说了多少遍要用interface定义组件属性类型

不满

"说了多少遍要用interface定义组件属性类型，你怎么还在使用type定义组件的属性类型。你自己加一下这个组件的showCount属性的定义，再发包给他。"

我对这个小伙子是越来越不满意了。已经宣贯多少遍了，要用interface定义组件的属性类型，还是使用 type 定义。

起因

部门在开发一个表单控件组件库 wform ，其中包含一个 WInput 组件。这个组件是基于 Ant Design 的 Input 组件进行的二次封装。想使用 Input 组件的 showCount 功能（显示已输入文本的长度）时，向 WInput 组件添加 showCount 属性后发现 TypeScript 报错。这是因为 wInput 组件的属性类型定义 WInputProps 中没有包含 showCount 属性的定义。

A部门的同事向我反馈了这个错误，我看到了，想了一下现在组件库更新版本的流程挺麻烦的，于是对他说："这个是组件属性类型漏定义了，你可以先使用 declare module 语句来扩展这个组件属性类型。"

"使用 declare module 语句扩展，怎么弄，不太会。"

"好吧，这个方法的确不常用，很简单的，我来教你一下。"

打脸

首先，你需要创建一个.d.ts文件，根据库的名称来命名这个文件，比如 wform.d.ts 。但是要确保这个文件被放置在 tsconfig.json 的 include 字段中指定的目录下。

然后，在wform.d.ts中写入以下代码，其中declare module的参数是一个模块路径，这里最好使用通配符*声明模块路径，避免模块路径错误。

ts 复制代码

declare module 'wform/*' {
  export interface WInputProps {
    showCount: boolean;
  }
}

最后，见证奇迹。

结果被打脸了。TypeScript 报错依旧存在。不应该啊，开始排查。

排查

打开 tsconfig.json 文件，查看 include 字段的值。

json 复制代码

{
  "include": [
    "./src",
  ]
}

在看 wform.d.ts 文件路径，没错啊，是在工程的src文件夹下。

会不会是引入wInput组件的模块路径不对，查看一下wInput组件引入的代码实现。

tsx 复制代码

import { WInput } from 'wform';

没错啊，WInput组件引入的模块路径是匹配declare module声明的模块路径。

再观察一下，TypeScript 报错，发现现在是 showCount 属性不报错，其它属性却提示不存在，比如原先的存在 value 属性现在提示不存在。

这应该是通过 declare module 定义的 WInputProps 属性类型，把原先在 WInput 组件中的定义的 WInputProps 属性类型给覆盖了。

罪魁祸首

马上查看了 WInput 组件的代码，发现 WInputProps 属性类型是用 type 来定义的。

ts 复制代码

export type WInputProps = {
  value?: string;
  // ...
}

对质

找到 WInput 组件的开发负责人，质问："为啥不用interface 定义 WInputProps？"

"type和interface都可以用定义对象类型，没啥区别，为啥不行呢。"

"好吧，原来他根本不懂type和interface的区别，真不知道当初怎么把他招进来的。"

`type`和`interface`接口的最大区别

使用type定义的类型称为类型别名，interface定义的类型称为接口。

同名类型别名会冲突，同名接口会自动合并。

ts 复制代码

type UserInfo = {
  name: string;
};
// 标识符"UserInfo"重复
type UserInfo = {
  age: number;
};

同名接口会自动合并

ts 复制代码

interface UserInfo {
  name: string;
}
interface UserInfo {
  age: number;
}

const userInfo: UserInfo = {  name: "张三", age: 23 };
userInfo.name; // "张三"
userInfo.age; // 23

在组件库中定义对象比如组件属性时候最好使用 interface，这样方便使用者可以利用 declare module 语句自由地扩展。

接口合并的基本规则

当然接口合并也是有一定规则的，在通常的场景只要考虑以下两点基本规则即可。

非函数的成员：如果同名接口包含非函数的成员，这些成员必须是唯一的。如果它们不唯一，那么它们必须是相同的类型。如果不同名的成员有相同的类型，则认为是有效的；如果类型不同，则会导致编译错误。
函数成员：对于函数成员，每个同名函数成员都会被视为这个函数的一个重载。TypeScript 会使用这些重载创建一个重载列表。在调用函数时，TypeScript 会尝试使用第一个重载，如果不匹配，就会继续尝试下一个，直到找到一个匹配的重载。

说了多少遍要用interface定义组件属性类型

不满

起因

打脸

排查

罪魁祸首

对质

type和interface接口的最大区别

接口合并的基本规则

`type`和`interface`接口的最大区别