IT技术 - 在 React 组件上推断通用类型 - 吾爱随笔录

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 语法显式命名泛型类型吗？