TypeScript 如何做后端接口类型

刚写完前端代码的同学，大概率都踩过“接口传参错了类型，后端debug半小时”的坑——比如明明要传数字的年龄，手滑传了字符串"25"，明明要传邮箱，却给了一串乱码，最后两边各甩锅，效率全耗在“对不上”上。其实用TypeScript来管后端接口的类型，就能把这类乌龙掐灭在开发阶段，不用等到联调才发现问题。

先搞懂核心：为什么用TS管接口类型？

前端和后端对接接口，本质是“前端说清楚要传什么，后端说清楚返回什么”，但纯JS是“弱类型”：比如你给接口传{age: "25"}，JS不会报错，后端拿到后要么转成数字，要么直接报错，两边都要花时间处理这类“隐性错误”。

TS是“给JS加了类型标注”的工具，相当于给接口定了一张「标准化的订单」：前端要按订单填，后端要按订单给，谁填错都直接报错，不用等联调。举个生活化的例子：你点外卖，接口就是“商家的菜单”，TS就是“你手里的订单模板”——模板上写清楚“要1份中份黄焖鸡（类型是“餐品”）、加1份米饭（类型是“配套”）、备注要少辣（类型是“要求”）”，你按模板填，商家按模板给，不会出现“给你上了两份大份排骨”的乌龙。

第一步：给接口「入参」定类型

接口的“入参”就是前端要传给后端的内容，比如用户注册时，前端要传姓名、手机号、密码到后端，这三个字段的类型必须定死，不然传错就会报错。

用TS的「类型别名」就能给入参做标注：比如注册接口的入参，我们可以写一段代码（不用怕，代码是简单的）：

// 定义注册接口的入参类型

type RegisterParams = {

username: string; // 姓名必须是字符串

phone: string; // 手机号必须是字符串（因为要匹配11位格式，不用转数字）

password: string; // 密码必须是字符串

}

这样写之后，前端调用这个接口时，只要传的内容不符合这个类型，TS会直接在编辑器里标红——比如你少写了phone字段，或者把phone写成数字13800000000，都会立刻报错，不用等后端说“你传的参数不对”。

第二步：给接口「返回值」定类型

接口的“返回值”是后端传给前端的内容，比如注册成功后，后端会返回“用户ID、用户名、是否登录成功”这些内容，TS同样能给返回值定类型，避免前端拿错数据类型。

还是用刚才的注册接口，我们可以给返回值定类型：

// 定义注册接口的返回值类型

type RegisterResponse = {

userId: number; // 用户ID必须是数字

username: string; // 用户名必须是字符串

success: boolean; // 是否成功必须是布尔值（true/false）

}

前端调用接口时，只要把返回的内容标注成这个类型，比如写const res = await api.register<RegisterResponse>(params)，前端拿到res后，点userId就会知道是数字，不会出现“res.userId是undefined还是字符串”的疑惑，也不会出现“res.success用了数字0来判断，结果0在JS里等于false，导致逻辑出错”的问题。

第三步：处理「可选字段」和「通用类型」

实际接口不会全是必填字段，比如有些用户信息接口，地址是可选的，这时候用TS的「可选属性」就能解决，比如：

// 用户信息接口的类型

type UserInfo = {

name: string;

age?: number; // age是可选字段，加？就可以不传

address?: string;

}

如果有多个接口的类型重复，比如登录和注册的入参都有phone，就可以用TS的「接口继承」复用类型，不用重复写代码，比如：

type BaseUser = {

phone: string;

password: string;

}

type RegisterParams = BaseUser & { username: string };

type LoginParams = BaseUser;

这样不管是注册还是登录，都不用再写phone和password的类型，既省时间又避免写错。

最后总结一下：用TS管后端接口类型，核心就是给入参和返回值做「标准化标注」，从开发阶段就把类型错误堵死，不用靠后端debug，也不用联调时反复确认，是前端和后端对接时非常实用的工具。