React组件的推断通用类型

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必须具有相同类型的onClick的result说法。相反，当我初始化组件与

<AwesomeComponent 
    value="Hello World" 
    onClick={(v) => { console.log(v); }} />; 

我得到一个编译错误error TS2322: Type 'string' is not assignable to type 'T'。

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

我意识到JSX transpiles向React.createElement通话（但不直接初始化类像我和我上面AwesomeClass例子做），这可能会过程复杂 - 是一个交易的杀手？如果是这样，我可以使用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); }} />;