时间戳

首页 > 解决方案 > 扩展打字稿接口

javascript - 扩展打字稿接口

问题描述

我有组件Checkbox.tsx，它的 ts 界面看起来像：

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;
}

问题是，我不知道这是否是正确的方法。

标签： javascriptreactjstypescriptinterface

解决方案

您可以使用 extends 关键字导出接口。

interface a extends b {
   ...
}

在你的例子中，它会像。

export interface ICheckboxLabel extends ICheckbox {
   label: string
}

另请访问官方文档以获取更多信息https://www.typescriptlang.org/docs/handbook/interfaces.html

推荐阅读