TypeScript 如何做类型过滤
日常写代码时，你有没有遇到过这种情况？明明给函数传了参数，运行时却突然跳出“某属性不存在”的错误，半天找不到问题根源——大概率是类型没“盯紧”，让不符合要求的数据混了进来。这也是很多前端开发者一开始用 TypeScript 时踩的坑：明明写了类型约束，还是会出问题，其实只要学会“类型过滤”，就能把这些“捣乱”的数据拦在外面。
什么是类型过滤？一句话讲清楚
简单说，类型过滤就是帮TypeScript把不符合规则的“异类数据”筛出去，只留下符合你要求的那部分数据。举个生活化的例子：你开了个卖奶茶的小店，要求“只接待买了单的顾客”，那你可以在收银台设个小关卡：只有出示买单小票的人，才能进取餐区；没有小票的，直接拦在外面——这个“设关卡拦人”的操作，就类似代码里的类型过滤，帮你把不符合类型要求的数据挡在逻辑门外。
最常用的2种类型过滤方法（新手一看就会）
前端里的类型过滤，核心是处理两种常见场景：要么给一组数据里挑符合要求的，要么把一个“可能是多种类型”的变量缩小到确定类型。下面用两个生活化的代码例子，讲最实用的两种方法。
用类型守卫：给变量“验明正身”
如果一个变量可能有多种类型，比如用户输入的内容，可能是“纯文本字符串”，也可能是“数字格式的字符串”，甚至是“空值”，这时候用类型守卫，就能精准判断它到底是什么类型。
比如你写了一个函数，要把用户输入的内容转换成数字，但要保证不是空值：
`typescript
// 定义一个可能是多种类型的变量类型
type InputValue = string | number | null;
function toNumber(input: InputValue): number {
// 类型守卫：判断输入是不是数字类型
if (typeof input === 'number') {
// 这里TypeScript自动知道input是number，直接返回
return input;
}
// 类型守卫：判断输入是不是非空字符串
if (typeof input === 'string' && input.trim() !== '') {
// 把字符串转成数字
return Number(input);
}
// 其他情况（比如空、null），返回0
return 0;
}
`
这个过程就像你在快递站分拣包裹：扫一下快递面单（就像typeof判断），是生鲜的放去冷藏区，是普通件的放普通区，不是合法包裹的直接退回——类型守卫就是给变量做“身份验证”，帮TypeScript缩小类型范围，避免报错。
用类型谓词：自定义过滤规则
有时候内置的类型判断不够用，比如你有个“用户对象数组”，要过滤出“年龄满18岁的成年用户”，这时候可以用类型谓词，自定义过滤规则。
比如：
`typescript
// 定义用户对象的类型
interface User {
name: string;
age: number;
}
// 自定义类型谓词：判断用户是否成年
function isAdult(user: User): user is User & { age: 18 } {
return user.age >= 18;
}
// 模拟一组用户数据
const users: User[] = [
{ name: "小明", age: 16 },
{ name: "小红", age: 20 },
{ name: "小刚", age: 17 }
];
// 过滤出成年用户，这里的adults自动被TypeScript识别为“年龄≥18的用户”
const adults = users.filter(isAdult);
`
这个例子就像你在奶茶店挑熟客：你定了“只有满18岁的熟客才能买限定款”的规则，用isAdult函数做“熟客验证”，把符合要求的挑出来，不符合的排除，不会把未成年的用户误放进去。
类型过滤的核心：减少运行时错误
很多人觉得TypeScript的类型是“写出来好看的”，其实类型过滤最实际的作用，是帮你在编译阶段就把错误拦住，不用等到代码跑起来才崩溃。比如你写购物车计算总价的函数，要是不做类型过滤，有人传了个字符串类型的价格，运行时就会出现“无法计算字符串和数字”的错误；加了类型过滤，TypeScript会提前告诉你“你传的类型不对”，直接避免了这种麻烦。
日常开发里，不用记复杂的术语，只要记住：遇到“变量类型不确定”“要从一堆数据里挑符合要求的”，就用类型守卫或者类型谓词做过滤，就能让你的TypeScript代码更稳，少踩很多坑。