Typescript：通用反應組件上的兒童的類型推斷

Question

給定一個在兩個屬性上通用的反應組件，load函數返回類型T和子項（這是一個參數類型爲T的函數）...

class Test<T> extends React.Component<{ 
    load:() => T; 
    children: (r: T) => JSX.Element; 
}> { 
    render() { 
    return this.props.children(this.props.load()); 
    } 
} 

打字稿無法從load返回值推斷res類型，默認爲輸入{}。

<Test load={() => ({ test: 'x' })}> 
    {res => 
    <span> 
     {res.test} 
    </span>} 
</Test>; 

這是一個錯誤，或者是打字稿無法根據返回值來推斷 - 因爲它看起來像支持JSX孩子的打字。

編輯：

爲背景下，用例是創建它接受load函數返回一個承諾解決一些進一步JSX一個「懶」組分。

Answer 1

我認爲問題是，你的代碼被transpiled類似的東西：

React.createElement(
    Test, 
    {load:() => ({ test: 'x' })}, 
    res => 
    <span> 
     {res.test} 
    </span> 
) 

從這種情況更明顯，這將是非常困難的編譯器/定義正確推斷泛型參數。在你的情況下，這將足以提示編譯器：

<Test load={() => ({ test: 'x' })}> 
    {(res: { test: string }) => 
     <span> 
      {res.test} 
     </span>} 
</Test>