Машинопись: как установить тип потомков в 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

установить тип детей в React Component?

Не может быть сужено с аннотацией типа (все это JSX.Element). Может быть сделано с интроспекцией во время выполнения (type собственность каждого ребенка).