程序员面试手册
程序员面试手册

Appearance

Star

TypeScript 5.x 类型系统深度 ​

前端工程化 ⭐⭐⭐ 中等 🔥🔥🔥 高频

💡 核心要点（2026 必备）

2026 年 TypeScript 5.5+ 已是前端标配。面试不再问"什么是 TypeScript"，而是问 泛型约束 / 条件类型 / 模板字面量 / infer 这些深度用法，以及 5.x 新特性（const 类型参数、装饰器 GA、推导改进）。能讲清 as const / satisfies / infer 三件套立刻区分初/中/高级。

版本演进时间线 ​

TypeScript 由微软 Anders Hejlsberg（C# 之父）主导，2012 年发布。每 3 个月一个小版本，类型系统能力不断向"可推导"和"模式描述"两个方向演进。

版本时间关键变化
0.82012.10首次开源：类、接口、模块、JSX 前身、基本类型注解
1.02014.04第一个正式版；ES6 风格类与模块；与 Angular 团队达成合作（Angular 2 选 TS）
1.52015.07装饰器（Stage-1）、ES6 模块、Tagged Templates
2.02016.09🔥 strict null checks（--strictNullChecks）、readonly、never 类型、控制流分析
2.12016.12🔥 Mapped Types & keyof：Partial<T> / Pick<T,K> 等工具类型可写出来
2.82018.03🔥 Conditional Types & infer：T extends U ? X : Y；类型层面的"if-else"，奠定后续所有高阶类型基础
3.02018.07Project References、Tuple in Rest、unknown 类型
3.42019.03const assertions（as const）：字面量类型保留；只读元组与数组
3.72019.11可选链 ?. 与空值合并 ??（领先 ES 提案落地）、断言函数
4.02020.08Variadic Tuple Types（可变元组）、Labeled Tuple Elements
4.12020.11🔥 Template Literal Types：`${'on'}${Capitalize<K>}` 字符串模式可参与类型计算
4.42021.08Control Flow Analysis of Aliased Conditions（别名条件也参与窄化）、--exactOptionalPropertyTypes
4.52021.11Awaited<T> 工具类型；ES 模块支持改进
4.72022.05Node 16 ES Modules（.mts / .cts）、Instantiation Expressions
4.92022.11🔥 satisfies 操作符：保留字面量类型推导的同时校验约束，取代很多场景下的类型断言
5.02023.03🔥 装饰器 GA（符合 TC39 Stage-3 提案）、const 类型参数（<const T>）、enum 全面改进、性能大幅提升
5.12023.06undefined 返回的隐式类型放宽、JSX 类型支持改进
5.22023.08using / await using（资源显式释放，匹配 ES 提案）
5.32023.11Import Attributes（import json from './x.json' with { type: 'json' }）
5.42024.03NoInfer<T> 工具类型；改进闭包内类型窄化保留
5.52024.06类型谓词推断（array.filter(x => x !== null) 自动收窄）、JSDoc @import、正则类型检查
5.62024.09"Disallowed Nullish/Truthy Checks" 类错误（防 if (foo) 写错）、Iterator Helpers
5.72024.11Never-Initialized 变量检查、Path Rewriting 输出
5.82025.02--erasableSyntaxOnly 配合 Node 原生 TS 执行；Conditional Return Type 推导改进
5.92025 年下半年持续优化推导稳定性、Project References 增量构建提速
6.0 / 7.0（Native Port）2025-2026 进行中🔥 编译器 Go 语言重写：官方目标 10× 速度，已开源 microsoft/typescript-go。改写编译器后向兼容，类型系统行为不变

⚠️ 版本演进高频面试题

  1. "infer 是什么时候引入的？为什么重要？" → 2.8（2018）引入；它让类型系统具备了"模式匹配 + 局部变量"能力，所有高阶工具类型（ReturnType / Parameters / Awaited）都依赖它。
  2. "as const 和 satisfies 的区别？" → as const（3.4）把字面量"冻成最窄类型"；satisfies（4.9）"校验是否满足某个约束，但保留推导出的精确类型"。4.9 之前要么类型断言丢失推导，要么宽松推导丢失约束，satisfies 一举解决。
  3. "TypeScript 5.0 的装饰器和旧装饰器为什么不兼容？" → 旧版（experimentalDecorators）跟 TC39 Stage-1 提案，字段装饰器、参数装饰器、运行时元数据等行为不同；5.0 GA 的是 Stage-3 标准提案，API 形态、执行时机、可读写访问器都不一样。Angular 等框架仍依赖旧版，需开启 experimentalDecorators。
  4. "为什么要把编译器用 Go 重写？" → 当前 TS 编译器是 TS/JS 自身写的，大型仓库类型检查动辄数十秒到数分钟。Native Port 目标 10× 速度，编辑器/CLI 响应将进入毫秒级。不改变类型系统行为，只是更快。

三大能力跃迁 ​

2012 ─────────── 2016 ─────────── 2020 ─────────── 2024+
"基本类型时代"    "类型计算时代"    "模式推导时代"    "原生加速时代"
                  (Mapped + Cond)  (Template + as const)
   TS 0.8-1.x     TS 2.0-3.x       TS 4.x           TS 5.x / Native
   类、接口、注解  泛型、infer、never 字面量模式、satisfies  编译器 Go 重写
   "JS 加类型"    "类型当编程语言"   "类型描述协议"    "万级文件秒级检查"

面试黄金答法：被问"你怎么看 TS 演进"时按这四阶段讲，并强调**"类型系统已演化为一门小型 DSL，4.x 后的核心议题是如何用类型描述运行时的字符串/对象 schema"**——例如 tRPC、Zod、Drizzle 都靠 5.x 类型能力实现端到端类型安全。

类型系统核心特性（必背） ​

1. 类型推导 vs 类型注解 ​

TypeScript 设计哲学：能推导就别注解。

typescript
// ✅ 推导出 string[]
const names = ['Alice', 'Bob'];

// ❌ 多余的注解
const names: string[] = ['Alice', 'Bob'];

// ✅ 函数参数必须注解，返回值通常推导
function add(a: number, b: number) {
  return a + b;  // 推导返回 number
}

// ⚠️ 公共 API 建议显式返回值（防 breaking change）
export function getUser(id: string): User { /* ... */ }

2. 字面量类型 + 联合类型 + 交叉类型 ​

typescript
// 字面量类型
type Status = 'pending' | 'success' | 'error';
type Direction = 'up' | 'down' | 'left' | 'right';

// 联合类型
type Id = string | number;

// 交叉类型（合并）
type Person = { name: string };
type Worker = { jobTitle: string };
type Employee = Person & Worker;  // { name: string; jobTitle: string }

3. 泛型（Generics）— 类型的"函数" ​

typescript
// 基础泛型
function identity<T>(value: T): T {
  return value;
}
identity<string>('hi');     // 显式
identity(42);                // 推导 T = number

// 泛型约束
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
getProp({ name: 'A', age: 1 }, 'name');  // ✅ string
getProp({ name: 'A', age: 1 }, 'xx');    // ❌ 编译报错

4. 工具类型（必背） ​

typescript
type User = { id: string; name: string; age: number; admin: boolean };

// Partial: 全部可选
type UserPatch = Partial<User>;
// { id?: string; name?: string; age?: number; admin?: boolean }

// Required: 全部必需
type StrictUser = Required<UserPatch>;

// Pick: 选取部分字段
type UserBasic = Pick<User, 'id' | 'name'>;

// Omit: 排除部分字段
type CreateUserDto = Omit<User, 'id'>;

// Readonly: 全部只读
type ImmutableUser = Readonly<User>;

// Record: 键值映射
type StatusMap = Record<'pending' | 'success' | 'error', string>;

// ReturnType / Parameters
type T1 = ReturnType<() => string>;       // string
type T2 = Parameters<(a: string, b: number) => void>;  // [string, number]

// Awaited（4.5+）
type T3 = Awaited<Promise<Promise<string>>>;  // string

// NonNullable
type T4 = NonNullable<string | null | undefined>;  // string

进阶 — infer / 条件类型 / 模板字面量（必背） ​

条件类型（Conditional Types） ​

typescript
type IsString<T> = T extends string ? true : false;

type T1 = IsString<'hello'>;  // true
type T2 = IsString<42>;        // false

// 实际应用：根据类型挑选不同行为
type ApiResponse<T> = T extends Error
  ? { success: false; error: T }
  : { success: true; data: T };

infer —— 类型中"声明变量" ​

typescript
// 提取数组元素类型
type ElementOf<T> = T extends (infer U)[] ? U : never;
type T1 = ElementOf<string[]>;     // string
type T2 = ElementOf<number[]>;     // number

// 提取 Promise 的 resolve 类型
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type T3 = UnwrapPromise<Promise<User>>;  // User

// 提取函数参数类型 / 返回类型（标准库内部就这么实现）
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
type MyParameters<T> = T extends (...args: infer P) => any ? P : never;

模板字面量类型（Template Literal Types） ​

typescript
type Greeting = `hello, ${string}`;
const ok: Greeting = 'hello, world';  // ✅
const bad: Greeting = 'hi';            // ❌

// 字符串操作
type EventName<T extends string> = `on${Capitalize<T>}`;
type T1 = EventName<'click'>;  // 'onClick'

// 联合类型分发
type Direction = 'top' | 'right' | 'bottom' | 'left';
type CSSProperty = `padding-${Direction}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'

// 提取路由参数（小型类型体操）
type ExtractParams<T extends string> =
  T extends `${string}:${infer Param}/${infer Rest}`
    ? Param | ExtractParams<`/${Rest}`>
    : T extends `${string}:${infer Param}`
    ? Param
    : never;

type T2 = ExtractParams<'/user/:id/post/:postId'>;  // 'id' | 'postId'

映射类型（Mapped Types） ​

typescript
// 把所有字段变可选（自己实现 Partial）
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// 把所有字段加 readonly
type MyReadonly<T> = {
  [K in keyof T]: Readonly<T[K]>;
};

// Key 重映射（4.1+）
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }

TypeScript 5.x 新特性深度（2026 必背） ​

TS 5.0：装饰器 GA + const 类型参数 ​

1. 装饰器 GA（ECMAScript 标准） ​

重要：TS 5.0 装饰器是 Stage 3 ECMA 标准，与之前的 experimentalDecorators 完全不同。

typescript
// ✅ TS 5.0 装饰器（Stage 3 标准）
function loggable<This, Args extends any[], Return>(
  target: (this: This, ...args: Args) => Return,
  ctx: ClassMethodDecoratorContext
) {
  return function (this: This, ...args: Args): Return {
    console.log(`[${String(ctx.name)}] called with`, args);
    return target.call(this, ...args);
  };
}

class Service {
  @loggable
  greet(name: string) {
    return `Hello, ${name}`;
  }
}

⚠️ 不要混用

老的 experimentalDecorators 与新装饰器语义/类型/元数据完全不同。Angular / TypeORM 等仍依赖旧版，迁移需等库升级。

2. const 类型参数 — 替代 as const ​

typescript
// TS 4.x: 必须显式 as const
function tuple<T extends readonly unknown[]>(...args: T): T {
  return args;
}
const t1 = tuple('a', 1, true);       // (string | number | boolean)[]
const t2 = tuple('a' as const, 1 as const, true as const);  // ['a', 1, true]

// ✅ TS 5.0: const 类型参数
function tuple<const T extends readonly unknown[]>(...args: T): T {
  return args;
}
const t3 = tuple('a', 1, true);  // ['a', 1, true] 自动推导为元组！

TS 5.2：using 声明（资源管理） ​

typescript
// ⚠️ ES2026 提案：自动释放资源
class FileHandle {
  [Symbol.dispose]() {
    console.log('closing file');
  }
}

function readFile() {
  using file = new FileHandle();   // ★ 离开作用域自动调 dispose
  // ...
}  // 此处自动关闭

// 异步版
class DBConnection {
  async [Symbol.asyncDispose]() { await this.close(); }
}

async function query() {
  await using conn = new DBConnection();
  // ...
}  // 自动 await 异步释放

TS 5.3 / 5.4：NoInfer + import 属性 ​

typescript
// NoInfer<T>: 阻止某个泛型从特定位置推导
function createStreetLight<C extends string>(
  colors: C[],
  defaultColor?: NoInfer<C>   // ★ 不允许从这里影响 C 的推导
) { /* ... */ }

createStreetLight(['red', 'yellow', 'green'], 'red');     // ✅
createStreetLight(['red', 'yellow', 'green'], 'blue');    // ❌ 报错
// 没有 NoInfer 时 'blue' 会污染 C，导致误推 'red'|'yellow'|'green'|'blue'

// import 属性（替代旧 assert）
import data from './data.json' with { type: 'json' };

TS 5.5：推导改进 + 编辑器性能 ​

改进收益
类型谓词推导（type predicate inference）arr.filter(x => x != null) 自动推导为 NonNullable<T>[]
正则字面量类型检查/[a-z+/ 编译期检测语法错
JSDoc @importJS 项目也能 import 类型
Isolated declarationsDTS 生成速度大幅提升（Bun/Deno 友好）
typescript
// TS 5.5: filter 自动推导
const xs: (string | null)[] = ['a', null, 'b'];
const ys = xs.filter(x => x != null);
// 之前: (string | null)[]
// ✅ 5.5+: string[]

as const / satisfies / infer 三件套（面试必背） ​

as const —— 字面量字面量化 ​

typescript
// 不加 as const
const config = { mode: 'dark', size: 12 };
// type: { mode: string; size: number }  ← 太宽

// ✅ as const
const config = { mode: 'dark', size: 12 } as const;
// type: { readonly mode: 'dark'; readonly size: 12 }

satisfies —— 校验类型但保留窄类型 ​

TS 4.9 新增，解决"既要校验又不想丢字面量"的痛。

typescript
type Config = Record<string, string | number>;

// ❌ 用 as Config —— 丢失字面量
const c1 = { mode: 'dark', size: 12 } as Config;
c1.mode.toUpperCase();   // ✅ 但 c1.mode 是 string|number 联合

// ❌ 用 : Config —— 同样丢失
const c2: Config = { mode: 'dark', size: 12 };
c2.mode.toUpperCase();   // 报错: string|number 没有 toUpperCase

// ✅ satisfies —— 校验通过 + 保留字面量
const c3 = { mode: 'dark', size: 12 } satisfies Config;
c3.mode.toUpperCase();   // ✅ c3.mode 是 string
c3.size.toFixed(2);       // ✅ c3.size 是 number

infer —— 见前面进阶部分 ​

三者组合示例 ​

typescript
// 定义 routes 配置 + 自动提取 path 类型
const routes = {
  home: '/home',
  user: '/user/:id',
  post: '/post/:id/comment/:commentId',
} as const satisfies Record<string, string>;

type RoutePath = typeof routes[keyof typeof routes];
// '/home' | '/user/:id' | '/post/:id/comment/:commentId'

// 提取参数
type ExtractParams<T extends string> =
  T extends `${string}:${infer P}/${infer R}`
    ? P | ExtractParams<R>
    : T extends `${string}:${infer P}`
    ? P
    : never;

type UserParams = ExtractParams<typeof routes.user>;  // 'id'
type PostParams = ExtractParams<typeof routes.post>;  // 'id' | 'commentId'

实用类型体操（Type Challenge） ​

DeepPartial（递归可选） ​

typescript
type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;

Tuple 转 Union ​

typescript
type T1 = ['a', 'b', 'c'][number];  // 'a' | 'b' | 'c'

Union 转 Intersection（高阶） ​

typescript
type UnionToIntersection<U> =
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void
    ? I
    : never;

type T1 = UnionToIntersection<{ a: 1 } | { b: 2 }>;
// { a: 1 } & { b: 2 }

Awaited 递归 Promise ​

typescript
type MyAwaited<T> = T extends Promise<infer U>
  ? MyAwaited<U>   // 递归
  : T;

tsconfig.json 关键配置（生产建议） ​

jsonc
{
  "compilerOptions": {
    "target": "ES2022",                    // 现代浏览器/Node 20+
    "module": "NodeNext",                  // 或 "ESNext" + bundler
    "moduleResolution": "NodeNext",
    "strict": true,                        // ★ 必开
    "noUncheckedIndexedAccess": true,      // ★ 强烈建议：数组下标自动加 undefined
    "exactOptionalPropertyTypes": true,    // 区分 ?:undefined 和 ?
    "noImplicitOverride": true,            // 重写必须 override
    "verbatimModuleSyntax": true,          // import type 强制
    "isolatedModules": true,               // 兼容 Babel/SWC
    "esModuleInterop": true,
    "skipLibCheck": true,                  // 跳过库的类型检查（加速）
    "allowImportingTsExtensions": true,    // 5.0+: 可 import './x.ts'
  }
}

⚠️ strict 实际包含 7 个子选项

strict: true 等价于：strictNullChecks + noImplicitAny + strictFunctionTypes + strictBindCallApply + strictPropertyInitialization + noImplicitThis + alwaysStrict。所有新项目第一天就打开。

常见陷阱（面试 Top 必踩） ​

陷阱后果解决
滥用 any类型保护失效改 unknown + 类型守卫
滥用 as类型欺骗，运行时崩用 is 类型谓词或 zod 校验
enum 反模式编译产物臃肿 + 不支持 tree-shake用 as const 对象或 union 字面量
interface vs type 选错扩展性 / 性能差异公共 API 用 interface（可声明合并），内部联合/工具类型用 type
! 非空断言真实 null 时 crash用 ?? / ?. 或显式判
Object.keys 推导是 string[]期望 keyof T(Object.keys(obj) as Array<keyof typeof obj>)
Array.includes 类型过窄arr.includes(x) 在 x 类型不匹配时报错TS 5.0+ 用 const T extends readonly string[]
typescript
// ❌ 危险：as 欺骗
const user = JSON.parse(text) as User;   // 不校验，运行时可能崩

// ✅ 用 zod 运行时校验
import { z } from 'zod';
const UserSchema = z.object({ id: z.string(), name: z.string() });
const user = UserSchema.parse(JSON.parse(text));   // 校验失败抛异常

interface vs type —— 必背区别 ​

维度interfacetype
声明合并✅（同名自动合并）❌
联合 / 元组 / 字面量❌✅
extends 继承✅ 直观用 & 交叉
性能TS 内部优化好（命名引用）复杂条件类型可能慢
建议公共 API / 类约束联合 / 工具类型 / 类型计算
typescript
// ✅ interface 自动合并 —— 扩展第三方类型
interface Window {
  myCustomGlobal: string;
}

// ✅ type 联合
type Result = { success: true; data: User } | { success: false; error: string };

Branded Types：用类型系统强制业务约束（2026 进阶） ​

💡 高阶面试加分项

Branded Types（也叫 Nominal Typing 模拟） 用类型系统在编译期区分"结构相同但语义不同"的类型——比如 UserId 与 OrderId 都是 string，但应该互不兼容。DDD / 金融 / 后端 BFF 项目越来越多用这个。

typescript
// ❌ 没有 Branded：string 都是 string，互相能赋值
type UserId = string;
type OrderId = string;
function getOrder(id: OrderId) {}
const uid: UserId = 'u_1';
getOrder(uid);    // 编译通过 → 但语义错了！

// ✅ Branded：编译期严格区分
declare const brand: unique symbol;
type Brand<T, B> = T & { readonly [brand]: B };

type UserId = Brand<string, 'UserId'>;
type OrderId = Brand<string, 'OrderId'>;

function asUserId(s: string): UserId { return s as UserId; }
const uid = asUserId('u_1');
getOrder(uid);    // ❌ 编译报错：UserId 不能赋给 OrderId

典型应用：① ID 类型区分（UserId/OrderId/SkuId）；② 已验证 vs 未验证字符串（Email vs string、ValidPassword vs string）；③ 货币单位（Cents vs Dollars，避免单位错误）；④ Path 类型（AbsolutePath vs RelativePath）。

tsconfig 现代必知选项 ​

选项何时设作用
"moduleResolution": "bundler"Vite / Webpack / esbuild 工程5.0+ 新模式，模拟打包器解析（无 .js 后缀也能 import .ts）
"moduleResolution": "node16" / "nodenext"Node.js 原生 ESM需要写 .js 后缀，模拟 Node 解析
"declaration": true + "declarationMap": true发布类型库用户可"跳转到源码"（.d.ts.map）
"composite": true + "references"monorepo / 大项目Project References 增量构建（10× 加速）
"erasableSyntaxOnly": trueTS 5.8+ Node 原生执行 TS强制只用可擦除语法（无 enum / parameter property）
"verbatimModuleSyntax": true严格 ESMimport type 强制；只移除类型导入，不改 import 语义
"noUncheckedIndexedAccess": true任何严肃项目arr[i] 自动 T | undefined，防越界

⚠️ moduleResolution: bundler 是 2026 主流前端选择

Vite / Next.js / Astro / SvelteKit 都默认推荐 bundler。老的 node / classic 选项已 deprecated，不要再用。

工程化武器库：ts-reset / valibot / tsx ​

工具解决什么何时引入
@total-typescript/ts-resetTS 内置类型过宽：JSON.parse(): any、.filter(Boolean) 不去 null、Array.includes 报错任何 strict 项目（一行 import '@total-typescript/ts-reset'）
zod / valibot编译期类型 ≠ 运行时校验API 边界 / 表单 / 配置加载
tsx / bun直接执行 .ts 文件，不用 ts-node + tsconfig 折腾脚本 / CLI 工具
twoslash文档里嵌可执行 TS 代码，鼠标悬停显示类型教程站点 / 团队文档
tRPC / drizzle端到端类型安全（后端类型直达前端）TS 全栈 / monorepo

心智模型：「TypeScript 不能在运行时给你类型保护——边界处必须有运行时校验」。这是 2026 顶尖前端面试的"老实底线"。

黄金答题模板（必背） ​

面试官：TypeScript 你最熟的是哪些高级特性？

答：3 件套：① as const 把字面量字面量化；② satisfies（4.9+）校验类型但保留窄类型——比 :Type 和 as Type 都好用；③ infer 在条件类型中"声明变量"，是类型体操核心。

5.x 关键新东西：① 装饰器 GA（Stage 3 标准，与旧 experimentalDecorators 不兼容）；② const 类型参数 替代 as const；③ using 资源管理（5.2，类似 RAII）；④ NoInfer（5.4）防止泛型从某位置污染推导；⑤ filter 类型谓词推导（5.5）arr.filter(x => x != null) 自动是 NonNullable<T>[]。

生产配置必开 strict + noUncheckedIndexedAccess + exactOptionalPropertyTypes。运行时校验用 zod / valibot——TypeScript 编译期类型不能替代运行时校验。

看到什么就先想到这类 ​

  • "既校验又保留窄类型" → satisfies
  • "字面量字面量化" → as const
  • "从类型中提取子类型" → infer
  • "类型重映射" → mapped type with as clause
  • "字符串模板匹配" → 模板字面量 + infer
  • "全部可选" → Partial<T>
  • "递归可选" → 自定义 DeepPartial<T>
  • "重写 ECMA 装饰器" → TS 5.0+ Stage 3 标准
  • "运行时类型校验" → zod / valibot（TS 编译期不够）
  • "数组下标安全" → noUncheckedIndexedAccess