typescript教程:函数的返回值泛型 作者:马育民 • 2026-04-28 18:43 • 阅读:10001 # 介绍 在 TypeScript 中,**函数返回值泛型**的核心作用是:**让函数的返回值类型,和入参类型/指定的类型保持一致**,实现类型安全的复用,避免写重复代码。 ### 理解 **函数的返回值类型,由调用者自己决定**,就叫返回值泛型 简单说: - **普通函数:返回值类型写死**,一辈子只能返回一种类型 - **返回值泛型函数:函数代码不改,想要什么类型,就返回什么类型** # 基础用法 ### 自动推导返回值 泛型用 `` 定义,TS 会**自动根据入参推导返回值类型**。 ```typescript // 定义泛型函数:T 代表任意类型 function identity(arg: T): T { return arg; // 返回值类型 = 入参类型 } // 使用 let str = identity("hello"); // str: string let num = identity(123); // num: number let bool = identity(true); // bool: boolean ``` ✅ 优势: - 不用为 `string/number/boolean` 分别写函数 - 返回值类型**完全精准**,TS 会自动提示对应类型的属性/方法 --- ### 手动指定返回值泛型 有时候 TS 无法自动推导,你可以**手动传入泛型类型**,强制规定返回值: ```typescript function getData(): T { // 模拟接口返回 return {} as T; } // 手动指定:返回值一定是 User 类型 interface User { name: string; age: number; } const user = getData(); // user: User → TS 会自动提示 name、age ``` # 例子 - 一个全局 Map 存数据 - **存数据函数:没有泛型,普通参数** - **取数据函数:只有返回值是泛型** ### 1、定义全局缓存仓库 ```typescript // 全局缓存仓库,统一存页面全局数据 const globalCache = new Map() ``` ### 2、存数据函数 ```typescript // 存数据:固定 key字符串,value任意值,不需要泛型 function setCache(key: string, value: unknown): void { globalCache.set(key, value) console.log("保存成功:", key) } ``` --- ### 3. 无泛型 纯普通获取(原始写法,不推荐) ```typescript // 无泛型,返回固定 unknown function getCache(key: string): unknown { return globalCache.get(key) } ``` ##### 使用 ```typescript // 拿到的变量全是 unknown 类型 const user = getCache("userInfo") const token = getCache("token") // ❌ 直接使用全部报错 // user.name // 报错:类型“unknown”上不存在属性“name” // token.length // 报错:类型“unknown”上不存在属性“length” ``` ##### 强行使用只能手动类型断言 ```typescript // 每次取值都要手动写断言,重复、繁琐 const user = getCache("userInfo") as { name: string; age: number } const token = getCache("token") as string user.name token.length ``` ##### 无泛型缺点 1. 默认返回 `unknown`,**无任何代码提示** 2. 访问属性/方法直接红线报错 3. 每一次取值都要手动 `as 类型`,代码冗余 4. 类型写错不会及时校验,容易埋线上bug --- ### 4. 返回值泛型(推荐) ```typescript // 入参 key 固定 string,无泛型 // 只有返回值 T 为泛型,由调用方传入类型 function getCache(key: string): T { return globalCache.get(key) as T } ``` ##### 使用 ```typescript // 取值时 显式传入泛型类型,直接锁定返回值类型 const user = getCache<{ name: string; age: number }>("userInfo") const token = getCache("token") // ✅ 完美智能提示 user.name user.age token.length token.trim() ``` ##### 也可以抽离接口,更优雅(企业常用) ```typescript interface UserInfo { name: string age: number } // 语义更清晰,复用类型 const user = getCache("userInfo") ``` ### 5、企业真实使用场景 ```typescript // 1、先存数据(普通存储,不用管类型) setCache("userInfo", { name: "李四", age: 20 }) setCache("token", "abc123456") // 2、取数据【返回值泛型生效】 // 取用户,自动识别用户对象类型 const user = getCache<{ name: string; age: number }>("userInfo") user.name // ✅ 有提示,乱写报错 // 取令牌,自动识别字符串类型 const token = getCache("token") token.length // ✅ 字符串方法提示 ``` ### 两种写法核心对比 | 对比项 | 无泛型(unknown) | 返回值泛型`` | |--------|-----------------|---------------| | 返回类型 | 固定 unknown | 调用方自定义 T | | 代码提示 | 无 | 完整属性/方法提示 | | 类型安全 | 差,全靠手动断言 | 强类型约束 | | 重复代码 | 每次取值必写 `as xxx` | 一次指定类型,直接用 | | 错误校验 | 类型错误不易发现 | 写错类型直接TS红线 | --- ### 返回值泛型 核心好处 1. **存的时候随便存** `setCache` 保持简单,`unknown` 兼容所有数据,不用复杂泛型。 2. **取的时候精准约束** 只有读取时才声明类型,**读写分离**,符合缓存业务逻辑。 3. **杜绝隐式类型错误** ```typescript // 泛型约束下,写错类型直接报错 const token = getCache("token") // 明知是字符串,写成 number,编码阶段就预警 ``` 4. **多人协作友好** 别人看代码一眼就知道:这个 `key` 对应什么数据结构。 # 一句话总结 返回值泛型的作用:**函数逻辑写死不变,参数正常干活不变,只有返回值类型,随业务自己定义。** **不写死类型、不用 any、类型不丢失、一个函数通用所有场景。** 原文出处:http://malaoshi.top/show_1GW3DNkMiZV2.html