Typescript 非常擅长推断泛型类型。例如,如果我编写以下代码:
class AwesomeClass<T> {
constructor(public val: T) {
// ...
}
public getVal(): T {
return this.val;
}
}
const inst = new AwesomeClass("Hello World");
const result = inst.getVal();
result
自动输入为 string
。漂亮!我想通过 React 更进一步。
如果我制作跟随组件
interface IProps<T> {
value: T;
onClick: (result: T) => void;
}
interface IState { }
class AwesomeComponent<T> extends React.Component<IProps<T>, IState> {
// ...
}
我真的很想推断 value
必须与 onClick
的 result
参数具有相同的类型。相反,当我用
<AwesomeComponent
value="Hello World"
onClick={(v) => { console.log(v); }} />;
我收到编译错误 error TS2322: Type 'string' is not assignable to type 'T'
。
是否可以推断 React 元素的 props 的泛型类型?
我意识到 JSX 转换为对 React.createElement
的调用(它不像我在上面的 AwesomeClass
示例中那样直接初始化类)并且这可能会使流程复杂化——这是交易 killer 吗?如果是这样,我可以使用 JSX 语法显式命名泛型类型吗?
最佳答案
这还不可能,这里有一个问题:Using lookahead to detect generic JSX elements? .
现在你需要做的是:
interface IProps<T> {
value: T;
onClick: (result: T) => void;
}
interface IState { }
class AwesomeComponent<T> extends React.Component<IProps<T>, IState> {
// ...
}
class ConcreteAwesomeComponent extends AwesomeComponent<string> {}
<ConcreteAwesomeComponent
value="Hello World"
onClick={(v) => { console.log(v); }} />;
关于generics - React 组件的推断通用类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40895388/