TypeScript Required 怎么用

你在写表单时，是不是遇到过用户漏填手机号、少选身份证号的情况？明明后台要的是必填信息，前端却没拦住错误提交？这时候，你可能会在代码里反复写“如果这个值是空的就提示”，不仅麻烦，还容易漏写，TypeScript 里的 Required 类型就能帮你简化这个问题。

先搞懂：`Required` 到底是做什么的

简单说，Required 是 TypeScript 自带的一个“工具类型”，作用是把一个类型里的所有属性，都变成“必填”的。它就像表单里的“必填标记”，不管原来的属性是不是可选，用了它之后，少填就会直接报错，不用你再一个个写判断。

举个生活化的例子：假设你做了一个“外卖订单”的类型，一开始有些信息是可选的，比如“备注”（用户可以填也可以不填）：

`typescript

// 原来的订单类型，有些属性可选

type Order = {

address: string; // 收货地址，必填

phone?: string; // 手机号，可选（比如用户不想填）

remark?: string; // 备注，可选

};

`

如果现在要求“所有订单信息都必须填”——哪怕用户没填备注，也得补上“无”，或者根本不能提交，这时候就可以用 Required 把所有属性变成必填。

怎么用？两步就能上手

用 Required 特别简单，只需要把你要处理的旧类型，放进 Required<> 的尖括号里就行。

第一步，定义好旧类型（比如上面的 Order）；第二步，用 Required 生成“全必填”的新类型：

`typescript

// 用 Required 生成“全必填的订单”类型

type RequiredOrder = Required<Order>;

`

这时候，RequiredOrder 就变成了：

`typescript

type RequiredOrder = {

address: string; // 还是必填

phone: string; // 原来的可选属性，现在变成必填了

remark: string; // 原来的可选属性，现在也变成必填了

};

`

你可以试试用这个新类型创建订单：如果漏写 phone，TypeScript 会直接标红报错，根本不让你写错误的代码，比手动判断省心多了。

实际开发中的常见场景

Required 最适合用在“从可选类型转成必填”的情况，比如：

• 做页面初始化：有些接口返回的信息是可选的，你要渲染到页面时，必须确保每个字段都有值，就用 Required 处理一下，避免出现“undefined”的错误；
• 写提交函数：用户提交表单前，需要所有字段都填好，把表单类型用 Required 包裹，就能提前拦截漏填的情况；
• 改造已有类型：比如你复用了别人写的接口类型，里面有不少可选属性，但你自己的业务需要全必填，不用重新写类型，直接用 Required 就能快速改造。

注意：它是“类型层面”的工具

最后要提醒一句：Required 是 TypeScript 的类型语法，只能在写代码的时候帮你做检查，不会影响运行时的逻辑。比如你用 Required 把属性变成必填，但如果接口真的返回了空值，还是要自己做处理——它是帮你“提前发现错误”，而不是代替你做业务逻辑。

比如你用 RequiredOrder 写了提交函数，还是要在函数里判断 address 是不是真的非空，毕竟代码运行时的情况，有时候会比类型检查复杂。