TypeScript 如何做类型检查

在前端开发里，你是不是常遇到这种糟心事：改代码时因为变量传错类型，导致页面报一串看不懂的“红色错误”，调试半天找不到问题？比如你想统计用户的年龄总和，不小心把年龄（数字类型）写成了字符串，结果相加变成了奇怪的拼接文本，找错找到头大？这时候，TypeScript的“类型检查”就是帮你提前堵住这类漏洞的“智能安检员”。

那这个“安检员”到底是怎么工作的？咱们用生活化的例子拆解，保证一看就懂。

先搞懂：TypeScript的类型是什么？

你可以把TypeScript的类型，理解成“岗位要求”。比如公司招聘前台，要求是“会基本接待、会用办公软件”，这就是这个岗位的“类型要求”；如果来应聘的是个只会修机器的技术工，不符合要求，公司直接pass，不会到试用期才发现不合适。

对应到代码里，比如你定义一个变量age，要求它只能存数字，那age: number就是它的“岗位要求”。如果不小心写了age = "二十"，就像让技术工去当前台，TypeScript的类型检查就会直接报错，告诉你“这个岗位要数字，你给的字符串不符合要求”。

基础类型检查：从“小变量”开始的第一道关卡

最基础的类型检查，就是对单个变量、函数参数、返回值的类型做校验，就像给每个“岗位”先卡最低门槛。

举个常见的例子，你写一个计算两个数字相加的函数：

`typescript

function add(a: number, b: number): number {

return a + b;

}

`

这里的a: number和b: number，就是给两个参数定了“数字岗”，最后的: number是说这个函数的返回值也必须是数字。

如果你不小心传了字符串进去，比如add("3", 5)，TypeScript会立刻标红报错，告诉你“第1个参数应该是number类型，你给了string”——相当于公司在你填应聘表的时候就拦下来，不会让你进面试环节。

哪怕你是用变量传值，比如先定义const num = "5"，再传add(num, 5)，TypeScript也能识别num是字符串，照样报错，不会因为你是“间接给错”就放过。

复杂类型检查：给“组合岗位”定规则

实际开发里，不会只传单个数字，更多是处理用户信息、商品列表这类“组合数据”，这时候TypeScript的类型检查，就能管到“组合里的每个细节”。

比如你要做一个用户信息展示，用户得有姓名（字符串）、年龄（数字）、是否会员（布尔值），这时候你可以用TypeScript的“接口”（可以理解成“组合岗位的岗位说明书”）来定义规则：

`typescript

interface User {

name: string;

age: number;

isVip: boolean;

}

`

现在你写一个函数来打印用户信息，要求参数必须符合这个规则：

`typescript

function printUser(user: User) {

console.log(${user.name}今年${user.age}岁，${user.isVip ? "是会员" : "不是会员"});

}

`

这时候如果你传的对象缺了某个属性，比如只写了{name: "张三", isVip: true}，或者属性类型错了，比如把age写成"25"，TypeScript都会直接报错——就像你给公司报用户信息，缺了年龄或者填成了字符串，行政会直接让你补对，不会等到数据库存错了才发现。

哪怕是嵌套的复杂数据，比如用户还有一个“收货地址”，里面有街道、城市，TypeScript也能一层一层检查，不会漏掉任何一个细节。

类型推论：不用明说也能做检查

很多人会疑惑，是不是所有类型都要手动写？其实不用，TypeScript有个“自动推论”的功能，就像你看到一个人穿着厨师服，就知道他是厨师岗，不用再问“你是不是厨师”。

比如你写let userName = "李四"，TypeScript会自动推论出userName是字符串类型，如果你后面不小心写userName = 25，它照样会报错。

只有当类型不明确的时候，比如写let value;（没赋值也没写类型），TypeScript才会暂时把它当成“任意类型”，这时候就失去了检查效果——就像你没给岗位定要求，什么人都能来，容易出问题。所以尽量给变量或函数明确类型，才能让检查更准确。

其实TypeScript的类型检查，本质就是帮你把“ runtime（运行时）才会出现的错误，提前到编码阶段就找出来”。以前写JavaScript，这些错误可能要到用户用的时候才会暴露，现在有了类型检查，相当于给代码加了一层“提前预检”，开发时少踩坑，上线后更稳。只要你习惯给变量、函数、数据定好“岗位要求”，就能轻松用好这个工具。