Typescript：React Componentで子どものタイプを設定するには？

Question

TypeScriptで子どものタイプを設定できますか？例えば

私は、このようなコンポーネント

class UserProfile extends React.Component<{ id: number }, void>{ 
} 

class Thumbnail extends React.Component<{ children: UserProfile[] }, void>{ 

} 

class UsersList extends React.Component<void, void>{ 

    public render() { 
     return (
      <div> 
       <Thumbnail><UserProfile id={1} /></Thumbnail> 
       <Thumbnail><UserProfile id={2} /></Thumbnail> 
      </div> 
     ) 
    } 
} 

を持っている私は、このような事態を避けるために、サムネイルのコンポーネントでサポートされている特定のものを子供定義したい：

class UsersList extends React.Component<void, void>{ 

    public render() { 
     return (
      <div> 
       <Thumbnail><UserProfile id={1} /></Thumbnail> 
       <Thumbnail><UserProfile id={2} /></Thumbnail> 
       <Thumbnail><span>Some plain text</span></Thumbnail> // This should be forbidden because Thumbnail component expects to have an array of UserProfile elements as it can handle them 
      </div> 
     ) 
    } 
} 

この例では動作しません、それを行う方法はありますか？

Answer 1

子どものタイプは反応成分ですか？

タイプアノテーション（そのすべてのJSX.Element）で絞り込むことはできません。実行時イントロスペクション（各子のtypeのプロパティ）で実行できます。