Reactjs有没有多元素类型声明的快捷方式

Question

我正在从表单中获取值。我正在为我的项目使用 tsx。但是我很不高兴使用这样的长元素类型：

handleChange = (e:React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLSelectElement>, id: string ) =>{
        e.preventDefault();
        const {value} = e.target;
        this.setState((prev) => ({fields: {...this.state.fields, [id]:value}}));
        console.log(id, this.state.fields);
    }

e（事件）有：

e:React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLSelectElement>

这么长的类型声明。有什么办法可以缩短这个吗？或任何其他类型有助于处理所有表单元素？

提前致谢。

Answer 1

嗯，你可以这样做：

handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, id: string ) =>{

这绝对是更简洁一点。或者如前所述，您可以简单地使用 type:

为您的类型声明起别名

type FormChangeEvent = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;

// ...

handleChange = (e: FormChangeEvent, id: string ) =>{

但除此之外，据我所知，没有包含您要查找的确切更改事件的现有类型别名。实际上，也不应该，因为这些元素有不同的类型定义是有原因的，e.target 应该相应地反映它们。

根据您的用例，您可以只为事件定义一个简单的、有限的类型，它只为您提供您实际需要的类型信息。根据我的经验，做这样的事情是相当普遍的，因为你运行的确切原因 - 有时简洁和简单比厨房水槽类型的完成主义更有价值。

handleChange = (e: { target: { value: string}; preventDefault: () => {} }, id: string ) =>{

编辑：您可以在此处做的另一件事是将 e 键入 any。如果您知道自己在做什么并且很小心，那么这是相当安全的 - 或者至少不会比我们使用 TypeScript 之前的日子更危险。

handleChange = (e: any, id: string ) =>{

Reactjs有没有多元素类型声明的快捷方式

Reactjs is there any shortcut for multiple element type declaration

typescript

reactjs

tsx

typescript-typings