说了多少遍要用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的参数是一个模块路径，这里最好使用通配符*声明模块路径，避免模块路径错误。

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

最后，见证奇迹。

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

排查

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

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

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

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

import { WInput } from 'wform';

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

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

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

罪魁祸首

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

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

对质

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

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

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

type和interface接口的最大区别

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

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

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

同名接口会自动合并

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

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

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

接口合并的基本规则

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

1. 非函数的成员：如果同名接口包含非函数的成员，这些成员必须是唯一的。如果它们不唯一，那么它们必须是相同的类型。如果不同名的成员有相同的类型，则认为是有效的；如果类型不同，则会导致编译错误。

2. 函数成员：对于函数成员，每个同名函数成员都会被视为这个函数的一个重载。TypeScript 会使用这些重载创建一个重载列表。在调用函数时，TypeScript 会尝试使用第一个重载，如果不匹配，就会继续尝试下一个，直到找到一个匹配的重载。