Расширение интерфейсов машинописи

Question

У меня есть компонент Checkbox.tsx, интерфейс которого выглядит следующим образом:

export interface ICheckbox {
    /** DOM element id. */
    id: string;
    /** Handler to the onClick event */
    onCheck?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

Теперь я хотел бы создать еще один компонент CheckboxWithLabel.tsx, который будет иметь очень похожий интерфейс, единственную дополнительную вещьбуду лейблом.Как я могу объединить два интерфейса или расширить существующий интерфейс?Что-то вроде:

import {ICheckbox} from './Checkbox.tsx';

export interface ICheckboxLabel {
    ...ICheckbox,
    label: string;
}

То, что я пробовал:

export interface ICheckboxLabel extends ICheckbox{
     children: JSX.Element | JSX.Element[] | string;
}

Проблема в том, что я не знаю, правильный ли это подход.

Answer 1

Вы можете экспортировать интерфейс, используя ключевое слово extends.

interface a extends b {
   ...
}

В вашем примере это будет похоже на

export interface ICheckboxLabel extends ICheckbox {
   label: string
}

Также посетите официальную документацию для получения дополнительной информации https://www.typescriptlang.org/docs/handbook/interfaces.html