TypeScript 不强制执行通用交集类型（React 组件道具）

Question

我有一个接受泛型类型参数TChildProps的组件：

type GenericFieldHTMLAttributes =
    | InputHTMLAttributes<HTMLInputElement>
    | SelectHTMLAttributes<HTMLSelectElement>
    | TextareaHTMLAttributes<HTMLTextAreaElement>

interface FieldProps {
    name: string
    label?: string | React.ReactNode
    component?: string | React.ComponentType
    initialValue?: any
    children?: React.ReactNode | FieldRenderFunction
}

class Field<TChildProps = GenericFieldHTMLAttributes> extends React.PureComponent<FieldProps & TChildProps> {
    ...
}

当我使用这个组件时，我希望它能够阻止我传入无法识别的道具，例如：

render() {
    return (
        <Form onSubmit={this.save}>
            <Field foo="test" label="email" name="email" type="email" component={TextField} />
        </Form>
    )
}

令人惊讶的是，上面的代码编译时甚至没有任何警告，尽管foo 属性没有在任何地方定义。我尝试简化示例并得到相同的结果：

class Field<TChildProps = {}> extends React.PureComponent<FieldProps & TChildProps> {
    ...
}

// this still compiles without errors
<Field foo="test" label="email" name="email" type="email" component={TextField} />

TypeScript 是否按照 React.PureComponent 的类型定义在此处正常运行（顺便说一下，我在 React.Component 上对其进行了测试并得到了相同的结果），还是这是一个错误？

Answer 1

原答案

因为<TChildProps = {}>表示如果消费者不给TChilProps赋值，TChildProps的默认值为{}。所以TChildProps 实际上可以是任何东西，如果消费者决定将价值传递给它。这就是为什么 typescript 允许将任何道具传递给Field。您要做的是使用extends 关键字强制TChildProps 的类型。所以试试class Field<TChildProps extends GenericFieldHTMLAttributes>。因此，消费者需要将TChildProps 作为GenericFieldHTMLAttributes 类型传递。你可以在https://www.typescriptlang.org/docs/handbook/generics.html找到更多信息。

更新

这是简化的情况（UPDATE2：我倾向于认为这是一个错误或缺少的功能，原因如下）

下面这个Animal 类接受食物作为泛型反映了React.Component 类接受道具作为泛型。

class Animal<F> {
  eat(food: F) {
    return;
  }
}

下面扩展 Animal 的 Lion 类反映了扩展 React.Component 的 Field 类

class Lion<F = {pizza: string}> extends Animal<F> {

}

当消费者消费时，如果他们不指定狮子应该吃什么食物，狮子可以吃任何东西我们应该期望狮子只吃披萨

const lion1 = new Lion();
lion1.eat(""); // Argument of  type '""' is not assignable to parameter of type '{pizza: string}'

但是在 tsx 的情况下不会发生这种类型检查。

解决方法是“将类型和接口都别名为非泛型特化”。

const TextField = Field as { new (): Field<{value: string}>};

<TextField foo="test" label="email" name="email" type="email" value="asdf"/> // error: Property 'foo' does not exist

这两个链接应该为您提供有关如何使用通用组件的更多信息。

https://github.com/Microsoft/TypeScript/issues/3960 https://basarat.gitbooks.io/typescript/docs/types/generics.html#generics-in-tsx

显然他们working on这个。

2018 年 4 月更新

这在 Typescript 2.9 中应该是可能的，如 https://github.com/Microsoft/TypeScript/pull/22415 所示。