Question

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的{{1}}参数具有相同的类型。相反，当我用

初始化组件时

onClick

我收到编译错误<AwesomeComponent value="Hello World" onClick={(v) => { console.log(v); }} />;。

是否可以在React元素的道具上推断泛型类型？

我意识到JSX转换为对error TS2322: Type 'string' is not assignable to type 'T'的调用（它不像我上面的React.createElement示例那样直接初始化类）并且这可能使过程复杂化 - 是交易杀手？如果是这样，我可以使用JSX语法显式命名泛型类型吗？

Answer 1

这还不可能，这是一个关于它的问题：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); }} />;

在React组件上推断的通用类型

1 个答案: