TypeScript 如何做组件库类型

在前端开发里，很多人都遇过这样的麻烦：写组件的时候，给用户传错了参数，控制台只报个模糊的错，半天找不到问题在哪；或者组件用了大半年，突然改个参数名，整个项目炸了，还得一个个找调用的地方改。要是用普通的JavaScript写组件库，这类问题特别常见，而TypeScript就能帮上大忙——它最核心的优势之一，就是能给代码加“类型约束”，让组件库变得更安全、更易用。

先搞懂：组件库要的是什么类型？

组件库和普通项目不一样，它是给别人用的，就像你开了个便利店，货架上的每一样东西（组件）都得有明确的“使用说明”，不能让顾客（其他开发者）拿错、用错。所以组件库需要的类型，不是给自己人看的，是给所有用这个库的人看的，得说清楚：

这个组件要传什么参数？每个参数是什么类型？不传行不行？传错了会怎么样？这些就是我们要做的“组件类型”。举个例子，你做了个按钮组件，不能只写个按钮，得告诉用的人：这个按钮可以传“文字”（字符串），可以选“颜色”（只能是红、蓝、灰这三种），还可以选“要不要禁用”（布尔值），不传文字的话按钮就不显示。

第一步：给组件的参数定好“规则”

最基础的，就是给组件的输入参数（也就是props）写类型。不用搞复杂，就用TypeScript里的interface（可以理解成“规则表”）就行，特别像我们平时填的表单，每一项都要写清楚要求。

比如做个输入框组件，我们先写个规则表：

`typescript

interface InputProps {

// 输入框的默认提示文字，是字符串，必须传

placeholder: string;

// 输入框的默认值，是字符串，可选，不传就空着

defaultValue?: string;

// 输入框的类型，只能是'文本'或者'密码'，不传默认是文本

type?: 'text' | 'password';

}

`

你看，这里用?表示这个参数是可选的，用|表示“或者”，只能选里面的选项，就像你买奶茶，糖度只能选全糖、三分糖，不能选别的。有了这个规则，别人用你的组件的时候，要是传了个type: '水果'，TypeScript直接报错，不用等到运行的时候才发现，特别省心。

第二步：让组件的返回值也“明明白白”

很多人会忽略，组件的返回值（也就是输出）也需要类型。比如你做了个表格组件，用户点了某一行，组件要返回这一行的数据，你得告诉用的人：返回的每一行数据有哪些字段，每个字段是什么类型，不然用的人拿到数据，不知道里面有没有“姓名”“年龄”这些字段。

比如表格行数据的类型：

`typescript

interface TableRow {

name: string;

age: number;

id: string;

}

`

然后写组件的时候，把点击事件的类型和这个对应起来：

`typescript

function Table(props: { onRowClick: (row: TableRow) => void }) {

// 组件逻辑

}

`

这样，用户点行的时候，要是传了个onRowClick里的row没写id，TypeScript就会报错，提醒他：这个必填字段没传，避免后续用数据的时候出问题。

第三步：给组件加“通用类型”，让它更灵活

组件库不可能只做一个按钮，有时候要做不同大小的按钮，这时候就可以做通用的类型，不用每个按钮都写一套规则。比如做个带尺寸的组件，就可以用type结合通用类型：

`typescript

type Size = 'small' | 'medium' | 'large';

interface ButtonProps {

text: string;

size?: Size; // 只能选上面三个尺寸

}

`

这样不管做多少个按钮，尺寸的规则都是统一的，用户不会用到奇怪的尺寸。还有像“是否禁用”“是否加载中”这类通用属性，也可以抽成公共的类型，所有组件都能共用，不用重复写代码，也减少出错。

最后要注意，组件库的类型不能太复杂，要让用的人一看就懂，就像便利店的价签，要清晰明了。不用为了加类型而加类型，只需要把别人可能用错的地方、容易出错的地方加上约束，就能让你的组件库更受欢迎，别人用的时候也更放心。