TypeScript 如何做错误类型
你有没有过写代码时，因为变量类型搞错，结果运行半天出了bug，却半天找不到原因？比如把用户输入的“123”字符串，直接当成数字去做加减，最后算出来的结果完全不对——这几乎是每个刚接触编程的人都踩过的坑。而TypeScript能解决这类问题，其中很关键的一点，就是它对错误类型的处理。
先搞懂：错误类型不是“报错代码”
很多人以为“错误类型”就是浏览器控制台弹出的红叉报错，其实不是。TypeScript说的“错误类型”，是给代码里可能出问题的情况，提前标好“类型标签”，告诉编译器（也就是帮你检查代码的工具）：这里如果出了问题，属于哪一类错，该怎么处理。
举个生活化的例子：你开了个小超市，货架上的商品要分类放——零食、日用品、文具，顾客拿的时候不会乱拿。TypeScript的错误类型就像给“可能出错的环节”贴了分类标签：比如“用户输入格式错”“调用接口返回空”“变量类型不匹配”，这样出问题时，你一眼就知道该找哪个环节的问题。
最基础的做法：用类型注解提前“挡错”
TypeScript最常用的，就是给变量、函数参数加类型注解，从根源上减少类型错误。比如你做一个计算年龄的函数，要求输入的是数字，就直接标number类型：
`typescript
function calculateAge(birthYear: number): number {
return 2024 - birthYear;
}
`
如果有人输入了字符串，比如calculateAge("1990")，TypeScript会直接报错，告诉你“字符串不能赋值给数字类型参数”。就像超市规定“零食区不能放洗洁精”，员工放错的话，系统会直接拦下来，不会等顾客拿了才发现。
除了变量，函数返回值也可以标类型，避免函数偷偷返回意料之外的结果，比如本来要返回数字，结果不小心返回了数组，TypeScript会立刻提示错误。
进阶用法：用“联合类型”处理多种错误情况
实际写代码时，不可能只有一种出错可能，比如调用接口获取用户信息，可能成功返回数据，也可能失败返回错误。这时候就可以用TypeScript的联合类型，把不同的错误类型都列出来。
比如做一个接口请求函数，可能返回正确的User类型，也可能返回错误信息：
`typescript
type User = { name: string; age: number };
type ApiResponse = User | { error: string };
async function fetchUser(): Promise<ApiResponse> {
// 模拟请求逻辑
const isSuccess = Math.random() > 0.5;
return isSuccess ? { name: "小明", age: 20 } : { error: "网络超时" };
}
`
这样拿到返回结果后，你可以根据是User还是错误类型来处理：如果是错误，就给用户弹提示；如果是正确数据，就正常渲染。就像超市的退货通道，分“质量问题”“尺寸不对”等不同情况，对应不同的处理流程。
实用小技巧：用“类型守卫”缩小错误范围
有时候代码里会出现“可能出错的分支”，这时候可以用类型守卫，告诉TypeScript“这个分支里的情况，就是某一种错误类型”。比如上面的接口例子，判断返回值有没有error字段，就能确定它是错误类型：
`typescript
async function renderUser() {
const res = await fetchUser();
if ("error" in res) {
// 这里TypeScript自动知道res是错误类型，直接弹提示
alert(加载失败：${res.error});
} else {
// 这里res是User类型，直接渲染用户信息
console.log(用户：${res.name});
}
}
`
这就像超市里的“待处理商品区”，如果商品贴了“临期”标签，员工就会按临期商品的规则处理，不用再反复核对分类。
简单来说，TypeScript做错误类型的核心，就是“提前给问题贴标签”——从基础的变量类型限制，到进阶的多种情况分类，再到精准的分支判断，帮你把代码里的错误，从“运行后才发现”变成“写的时候就拦住”，大大减少调试的麻烦。