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
必须具有相同的类型result
的论证onClick
。相反,当我用以下命令初始化组件时
<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
上面的例子),这可能会使过程复杂化 - 这是一个交易杀手吗?如果是这样,我可以使用 JSX 语法显式命名泛型类型吗?
这还不可能,这是一个关于它的问题:使用前瞻来检测通用 JSX 元素? https://github.com/Microsoft/TypeScript/issues/6395.
现在你需要做的是:
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); }} />;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)