TS基础类型与高级类型：泛型与条件类型

可视化演示

展示TypeScript基础类型标注、泛型约束机制及条件类型与映射类型转换，支持模式切换与参数调节。

基础类型标注

分拣中心的传送带起点，每件包裹都要先过磅、量尺寸、贴基础标签——重量用数字记录，目的地名用文字记录，是否易碎用打勾来表示。TypeScript 最基础的类型标注，就是给变量贴上这样的规格标签。number 表示数字型数据，string 表示字符串型数据，boolean 表示真假值，null 与 undefined 则分别表示“空”和“尚未定义”。

当你在代码中写下 const weight: number = 3.5，相当于对 TypeScript 编译器宣告：“这个变量是数字，后续所有操作都必须符合数字的规则。”数组类型 number[] 表示“一列数字”，元组 [string, number] 表示“固定组合”——就像快递面单上“收件人 + 电话”的固定搭配，两个位置的类型一一对应，顺序不能颠倒。

联合类型 string | number 允许数据在几种类型中取其一，类似“这个包裹可能是文件，也可能是小件商品，总之属于这两类之一”。字面量类型 'asc' | 'desc' 更严格，它把取值锁定在几个精确的字符串上，就像分拣通道只允许两个方向的标签存在，任何其他值都会在编译阶段被拦截。

有了规格标签，分拣中心才敢让包裹上路。同样，TypeScript 编译器依靠这些标注判断每一行代码是否“违规操作”——比如试图把数字包裹送去字符串拼接，编译器会在运行前立刻报警。基础类型标注，是整个类型系统一切高级能力的起点。

接口类型别名

包裹有了基础规格之后，还需要一张标准面单：收件人、电话、地址、备注。分拣中心的每一张面单都遵循同样的模板，TypeScript 的 interface（接口）就是这样的模板——它规定一个对象必须包含哪些字段、每个字段是什么类型。比如一个订单结构里有 id、total、coupon 三个字段，接口可以精确描述出来。

当订单数据结构存在 id 和 total 两个必填字段，而优惠券 coupon 可有可无时，字段后的问号表示“可选”，readonly 表示“只读，初始化后不允许修改”。type 类型别名也能达到类似效果，但它更灵活：可以定义联合类型的别名 type ID = number | string，也可以给元组起别名，这是 interface 做不到的。

interface 与 type 的差异是面试常客：interface 支持“声明合并”——同名接口会自动合并属性；type 不行。type 能表达更多形态（联合类型、元组、基本类型别名）。对于描述对象结构，通常优先用 interface；需要做类型组合与运算时，则用 type 更顺手。

模板统一了面单格式，分拣员一眼就能找到需要的信息。接口和类型别名让团队里每个对象都“长着一张标准脸”，协作成本大幅降低——你不需要翻开代码细节，只看类型定义就知道这个数据结构长什么样。

泛型基础

有时候，分拣中心需要使用一种“万能中转箱”：不管里面装的是文件、数码产品还是生鲜，箱子本身的运送规则完全一致。泛型就是这样的万能箱——它不限定具体类型，而是等使用者放入数据时再确定箱子的真实身份。function identity<T>(x: T): T 是经典泛型函数：T 是一个“类型占位符”，调用时传入什么类型，返回值就是什么类型。

这样做的好处非常直观：既保证了类型安全——输入和输出类型严格一致，又不必为每一种类型单独写一个重复函数。你只需要写一个“万能版”，编译器在调用时会根据实际类型自动推导出 T 的值，并在后续代码中持续检查。

泛型还可以用在接口、类和类型别名中：interface Box<T> { content: T } 表示“装 T 类型东西的箱子”，比如 Box<number> 就是“装数字的箱子”。泛型约束 T extends HasLength 表示：T 必须满足 HasLength 的结构要求（至少含有一个 length 属性），就像易碎品必须符合“有缓冲层”才能进特殊通道。泛型默认参数 T = string 则在不指定类型时自动使用默认值。

万能中转箱的妙处在于，它对所有货物一视同仁，却不会在运送途中把货物“变种”。泛型让代码复用和类型安全同时成立，这是 JavaScript 永远给不了的保障——普通 JS 只会返回“未知内容”，而 TypeScript 能在编译期就知道箱子打开后是什么。

条件类型

分拣中心最智能的环节，是分流口的一个“三向闸机”。机器扫一眼包裹标签，立刻判断：是文件类 → 走左通道；是数码类 → 走中通道；其余 → 走右通道。条件类型就是类型世界的三向闸机，它让类型本身具备“判断能力”。条件类型的语法 T extends U ? X : Y，与 JavaScript 的三目运算符逻辑类似：如果 T 可以赋值给 U（类型兼容），取 X 类型，否则取 Y 类型。

当 T 是“裸类型参数”时，条件类型会触发“分发”行为：联合类型的每个成员会逐一参与判断，再把结果重新组合成联合类型。例如 type Result = 'a' | 'b' extends string ? 1 : 2，实际上是分别判断 'a' 和 'b'，全都成立，结果是 1 | 1 即 1。基于这个机制，内置工具 Exclude<T, U> 可以从 T 中剔除可赋给 U 的类型成员，Extract<T, U> 则保留符合条件的那部分。

infer 关键字是条件类型中的“信息读取器”：它像从包裹标签上读取关键信息，用于在类型中推导出被隐藏的子类型。比如 ReturnType<T> 工具类型的实现，就是利用 infer R 从函数类型中提取返回值类型——你只需要告诉 TypeScript“我想知道这里藏着的类型是什么”，它就能把类型“取”出来。

三向闸机把不同类型的包裹准确送入各自轨道，条件类型则在编译期自动规划好“类型流向”。很多高级工具类型——Exclude、Extract、ReturnType——都建立在条件类型这个基础机制之上，理解它，等于掌握了类型运算的“条件语句”。

映射类型

当双十一大促来临，一万件包裹需要在面单上统一加盖“易碎”章。分拣中心不会人工一个个盖，而是启动批量盖章流水线：传送带经过，咔嚓一下全部搞定。映射类型就是类型世界的“批量流水线”。keyof T 获取 T 所有键名的联合类型——相当于面单上的字段名清单；映射语法 [K in keyof T] 表示遍历每个键名，为每个键构造一个新属性。

内置工具类型 Partial<T>、Required<T>、Readonly<T> 都是映射类型的典型应用：Partial<T> 把每个属性变成可选，Required<T> 把每个属性变成必填，Readonly<T> 为每个属性加上只读修饰。Record<K, V> 则用键名联合 K 和值类型 V 建构一个全新的对象类型，类似于“按照指定字段清单和内容格式，批量生成同构面单”。

映射类型最大的威力在于“修饰符变换”：你可以在遍历键名的同时，用 + 或 - 增删属性的可选与只读修饰符。这意味着从一个已有的“面单模板”出发，你可以派生出“可选版”“只读版”“必填版”等多种变体，而无需手写大量重复代码。

批量盖章流水线让一万件包裹几秒内处理完毕，映射类型同样让“批量改造对象结构”在编译期瞬间完成。它是高级类型编程的“工厂车间”——配合泛型和条件类型，你可以组合出任意定制化的类型工具，让复杂类型定义变得简洁而优雅。

类型收窄

包裹到达终点站前，还需要最后确认：这个包裹到底是文件类还是数码类？分拣员先看面单上的文字──用 typeof 检查原始类型；再看包裹的外形特征──用 in 操作符判断对象是否拥有某个属性；最后决定放到哪个出口。类型收窄，就是“在代码执行过程中，让 TypeScript 更精确地知道变量当前类型”的技巧。

typeof x === 'string' 判断之后，x 在本分支内被收窄为 string 类型，可以安全调用字符串方法。'kind' in obj 判断对象是否存在某个属性，以区分不同分支——这比 typeof 更适合对象类型，因为 typeof 对对象、数组、null 都会返回 "object"，根本无法区分。

判别联合是收窄的进阶用法：每一个联合成员都有一个共同的字面量字段（如 kind），通过判断 kind 的值，TypeScript 能精确推导出当前是哪一个成员。配合 never 做穷尽检查，当所有分支都被覆盖之后，默认分支里的变量会被推断为 never——如果还有漏网分支，编译器会立即报错，就像分拣系统在最后一道闸口发现“无标签包裹”时直接亮起红灯。

终点确认是分拣流程的最后一道保险。类型收窄是 TypeScript 在运行时世界与静态世界之间架起的桥梁，它让复杂的联合类型在真实数据流中依然保持精准可控——这就是为什么大型项目里 TypeScript 能比 JavaScript 提前拦截大量潜在 bug。

AI 应用场景

Python 演示

class Box:    """模拟泛型容器 Box<T>：装进什么类型，取出什么类型"""     def __init__(self, value):        self._value = value     def get(self):        return self._value     def map(self, func):        return Box(func(self._value))  def identity(value):    """模拟 identity<T>(x: T): T，类型保持原样"""    return value  def is_string(value):    """模拟条件类型 T extends string ? true : false"""    return isinstance(value, str)  def filter_strings(items):    """模拟分布式条件类型：逐个判断联合成员"""    return [item for item in items if isinstance(item, str)]  def partial_get(data, key, default=None):    """模拟 Partial<T>：字段可能缺失，给出安全默认值"""    if isinstance(data, dict) and key in data:        return data[key]    return default  if __name__ == "__main__":    box = Box(42)    print("Box.get():", box.get())    print("Box.map(str).get():", box.map(str).get())    print("identity(3.14) 类型保持:", type(identity(3.14)).__name__)    print("is_string('a'):", is_string("a"))    print("filter_strings:", filter_strings([1, "a", True, "b"]))    order = {"id": 1, "total": 299}    print("partial_get 缺失字段:", partial_get(order, "coupon", "无优惠券"))

1. class Box:对应 TypeScript 的泛型容器 Box<T>，构造时接收任意类型的值并保存。
2. def identity(value):模拟泛型函数 identity<T>，返回原值且类型不改变。
3. isinstance(value, str)对应条件类型 T extends string ? true : false 的运行时版本。
4. [item for item in items if isinstance(item, str)]模拟分布式条件类型：对列表每个成员逐一做类型过滤。
5. if isinstance(data, dict) and key in data:模拟 Partial<T> 的可选字段安全取值逻辑。

常见误区

面试题