TypeScript 如何做表单类型
很多做前端开发的朋友，都遇到过表单的“坑”：比如给用户输入年龄，不小心写成了字符串类型，导致计算的时候出bug；或者表单改了字段，又忘了去改验证规则，最后提交时报错。其实用TypeScript就能把这些坑提前填上，今天就用大家熟悉的生活例子，讲讲TypeScript怎么管表单的类型。
先搞懂：表单类型不是“乱贴标签”
很多人觉得TypeScript的类型就是“给变量加个标注”，其实不是，它更像表单的“说明书”。比如你去超市买牛奶，包装上会写“容量250ml、保质期6个月”，这就是给牛奶定的“类型说明”——你不会拿这个包装当酱油用，也不会以为它能放1年。
表单的类型也是这个道理：比如登录表单有“用户名”和“密码”，那我们就给这个表单定个规则：用户名必须是字符串，不能是数字；密码也得是字符串，长度不能少于6位。如果之后有人不小心把用户名改成了数字，TypeScript会直接报错，不用等用户提交才发现。
用“对象类型”给表单做基础规则
最常用的表单类型，就是用TypeScript的“对象类型”来写。比如我们做一个简单的注册表单，需要收集“姓名、邮箱、手机号、年龄”四个信息，那我们可以先写一个“表单说明书”：
`typescript
type RegisterForm = {
name: string; // 姓名是字符串
email: string; // 邮箱是字符串
phone: string; // 手机号是字符串（因为手机号不能做加减运算，用数字反而容易出问题）
age: number; // 年龄是数字，不能是字符串的“25”
};
`
这里的RegisterForm就是我们给注册表单定的类型。之后写表单的时候，只要把这个类型套进去，TypeScript就会帮我们盯着：比如你给age赋值成“25”（带引号的字符串），它会直接报错，告诉你“这里需要数字，不是字符串”。
举个生活化的例子：这就像你要寄快递，快递单上填“收件人”的地方，你必须写姓名，不能写一串数字——如果写了数字，快递员会告诉你不对，这就是类型的作用。
加“可选字段”和“特殊规则”，适配复杂表单
不是所有表单字段都是必填的，比如个人资料里的“地址”，很多人不想立刻填，这时候可以把字段改成“可选”的——就是在类型里加个?。比如：
`typescript
type ProfileForm = {
nickname: string; // 昵称必填
avatar: string; // 头像地址必填
address?: string; // 地址可选，可填可不填
birthday?: Date; // 生日也是可选的，用Date类型比数字更清楚
};
`
还有些表单需要特殊规则，比如手机号必须是11位，邮箱必须带“@”，这时候不用写复杂的代码，用TypeScript的“类型别名”就能搞定。比如我们先定一个“合法手机号”的类型：
`typescript
type PhoneNumber = string & { length: 11 }; // 手机号必须是11位的字符串
type Email = string & { includes: '@' }; // 邮箱必须包含@
`
然后把这些用到表单里：
`typescript
type RegisterForm = {
name: string;
email: Email; // 必须是合法邮箱
phone: PhoneNumber; // 必须是11位手机号
age: number;
};
`
这就像你去买火车票，身份证号必须是18位，不能随便填数字——TypeScript会提前帮你检查这些特殊规则，不会等你提交表单才发现手机号少了一位。
最后：怎么把类型用到实际开发里？
很多朋友会问，我写了类型，怎么让表单代码生效？其实很简单，只要在定义表单变量的时候，加上我们写的类型就行。比如写一个登录表单的变量：
`typescript
const loginForm: {
username: string;
password: string;
} = {
username: '张三',
password: '123456'
};
`
如果之后有人把username写成数字123，TypeScript会立刻标红，告诉你“这里需要字符串，不能是数字”，这样就能提前把bug消灭在开发阶段，不用等上线后用户反馈才修改。
简单来说，TypeScript做表单类型，就是给表单写了一份“说明书”，把哪些字段该是什么类型、哪些是必填的都讲清楚，开发的时候不会乱填，也不会出不该有的bug。