TypeScript 如何做 Promise 类型

在前端开发中，异步请求就像点外卖：你下单后不会一直守在手机前等外卖，而是继续做别的事，外卖到了再处理。这种“先做别的事，之后处理结果”的异步逻辑，靠的就是Promise。而TypeScript给Promise加上了“类型标签”，就像给外卖单标上“酸菜鱼（辣）”“奶茶（常温）”，能避免拿到错的东西，大幅减少代码bug。

先搞懂：普通Promise和带类型的Promise有啥不一样？

假设你要写一个函数，去请求用户的名字：

• 用JavaScript写，函数返回Promise，你拿到结果时可能是字符串，也可能因为写错接口拿到数字，要自己判断类型；
• 用TypeScript写，你可以告诉它“这个Promise最终会返回一个字符串”，如果不小心把返回值写成数字，编辑器会直接标红提醒，不用跑一遍代码才发现错。

简单说，给Promise加类型，就是给它定好“最终要给你啥东西”的规矩，相当于给异步结果上了“保险”。

最常用的2种Promise类型写法，新手一看就会

用泛型直接定义（最常用）

泛型是TypeScript的“通用类型工具”，给Promise加类型，就是把你要的类型套进Promise<>的尖括号里。

举个生活化例子：你点外卖时备注“要可乐（常温）”，对应Promise的泛型就是Promise<string>，意思是“这个外卖（Promise）最终会给你可乐（字符串）”。

代码示例：

`typescript

// 定义一个返回字符串的Promise

const getName = (): Promise<string> => {

return new Promise((resolve) => {

setTimeout(() => resolve("张三"), 1000); // 1秒后返回字符串

});

};

`

这里如果把resolve("张三")改成resolve(123)，编辑器会立刻报错，因为我们定好了要返回字符串，不能给数字。

处理异步错误的Promise（带拒绝类型）

外卖也可能送错、超时，对应Promise也会有“失败”的情况，TypeScript可以给失败的结果也定类型，比如接口报错的信息类型。

还是用外卖举例：如果你点的是“无糖奶茶”，送过来是“全糖”，报错信息是“商家没看清备注”，对应Promise可以定义成Promise<string | Error>，意思是“成功给字符串，失败给错误对象”。

代码示例：

`typescript

// 定义一个可能返回字符串或错误的Promise

const getSugarTea = (): Promise<string | Error> => {

return new Promise((resolve, reject) => {

setTimeout(() => reject(new Error("商家没看清备注")), 1000);

});

};

`

这种写法能让你在处理Promise的结果时，提前知道要判断成功还是失败的类型，不会乱点属性。

实操小技巧：Promise类型的日常用法

拿到带类型的Promise结果时，怎么用才不踩坑？

还是用点外卖举例：你拿到外卖（Promise结果），要先确认是“可乐”还是“奶茶”，不能直接乱加冰。对应代码里，要用await或者.then()时做类型判断。

比如用await处理上面的getName函数：

`typescript

const getUserInfo = async () => {

const name = await getName();

// 这里name已经被TypeScript认定为string，可以直接用字符串方法

console.log(用户名字是：${name.length}个字符);

};

`

如果没加类型，name可能是任意类型，你用name.length时，TypeScript会担心name是数字，数字没有length属性，就会标红提醒，这就是类型的保护作用。

其实TypeScript给Promise加类型，本质是让你写代码时少“猜”，多“明确”。就像你点外卖时明确备注，商家不会送错，写代码时明确Promise的类型，你拿到的结果也不会错。新手不用纠结复杂术语，只要记住“给Promise套个<你要的类型>”，日常开发的90%场景就够用了。