javascript - Typescript 接口(interface)中的输入类型

Question

我正在尝试编写一个要重用的组件，其中一个变量是要呈现的输入类型。

目前，我有这个:

type InputBaseProps = {
  children?: ReactChild;
  className?: string;
  id: string;
  label?: string;
  name?: string;
  onBlur: (event: ChangeEvent<HTMLInputElement>) => void;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
  placeholder?: string;
  style?: CSSProperties;
  type: ????;
  value?: string;
};

我只想允许有效的 HTML types，就像这里定义的整个列表 https://www.w3schools.com/tags/att_input_type.asp

有什么简单的方法吗？

Answer 1

import { HTMLInputTypeAttribute } from "react";

type InputBaseProps = {
    type?: HTMLInputTypeAttribute 
}

HTMLInputTypeAttribute 解析为 ff:

type HTMLInputTypeAttribute = "number" | "search" | "button" | "time" | "image" | "text" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "month" | "password" | "radio" | "range" | ... 5 more ... | (string & {})

智能感知工作正常。