TypeScript之字面量类型的使用详解

✳️ 一、什么是字面量类型（Literal Types）？

说到 TypeScript 里的高级类型，字面量类型是个绕不开的话题。它其实挺直观的：字面量类型就是一种值级别的类型，简单说，这个值本身就成了类型的一部分。

常见的就以下几种：

它们具体怎么用？看一下代码就明白了：这种类型的变量，只认准那个具体的值。

type A = 1;
const x: A = 1;       // ✅ 合法
const y: A = 2;       // ❌ 报错：不能赋值 number 给类型 1

？ 为什么要有字面量类型？

这自然是为了追求极致的精确性。字面量类型能让代码的约束力上一个台阶，把值的合法性牢牢锁死。

一个经典的场景就是定义组件的可选项，比如按钮尺寸：

type ButtonSize = 'small' | 'medium' | 'large';
function createButton(size: ButtonSize) { ... }
createButton('medium'); // ✅
createButton('huge');   // ❌ 类型错误

✳️ 二、字面量类型 VS 基础类型的区别

你可以把字面量类型理解为对应基础类型的“特化”或“子类型”。它们之间的关系，用一段赋值代码就能说清楚：

let a: 'yes' = 'yes';       // ✅
let b: string = 'yes';      // ✅
a = b;                      // ❌ string 可能不等于 'yes'
b = a;                      // ✅ 'yes' 一定是 string

✳️ 三、什么时候会推断为字面量类型？

这里是个关键分水岭。TypeScript 并不会对所有的值都进行字面量推断，它有一套明确的规则。

✅ 1.const声明的变量，会推断为字面量类型

const a = 42;       // 推断为 42（字面量类型）
let b = 42;         // 推断为 number（更宽泛）

const s = "hello";  // 推断为 "hello"
let t = "hello";    // 推断为 string

？ 背后的逻辑： 由于 const 声明的变量值不可变，TypeScript 编译器就能放心地将其类型推断为那个精确的值。

✅ 2. 使用as const明确指定字面量类型

当你需要更强大的“锁定”能力时，as const 断言就派上用场了。它能将对象和数组的内部属性也“冻住”，变成只读的字面量类型。

const arr = [1, 2, 3] as const;
// 推断为 readonly [1, 2, 3] （字面量元组）

const obj = {
  type: 'success',
  code: 200,
} as const;
// 推断为 { readonly type: 'success'; readonly code: 200 }

？ as const 是强制进行字面量推断的利器，在需要极致类型安全的地方，比如状态管理、API 响应类型定义或复杂的类型映射中，它能发挥巨大作用。

✅ 3. 明确写了字面量类型

最直接的方法，当然还是手动声明：

let status: 'loading' | 'done' = 'loading';

❌ 不会推断为字面量类型的情况

了解什么时候不会推断，同样重要。下面这几种情况，TypeScript 会倾向于给出更宽泛的类型。

✳️ 四、推断字面量类型的实际应用场景

理论懂了，用在哪里呢？字面量类型的威力在下面这些实战场景中体现得淋漓尽致。

1. 联合类型的类型保护

与联合类型搭配，能实现精准的类型收窄（Narrowing）：

type Action = 'increment' | 'decrement';
function reducer(action: Action) {
  if (action === 'increment') {
    // ✅ 在这个分支里，action 的类型被收窄为 'increment'
  }
}

2. 字面量值作为 discriminated union 的 tag

这是构建复杂类型系统的基石。用一个字面量字段作为“标签”，来区分联合类型中的不同成员：

type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'square'; side: number };
function getArea(shape: Shape) {
  if (shape.kind === 'circle') {
    // ✅ 此处可以安全访问 shape.radius
    return Math.PI * shape.radius ** 2;
  }
}

3. 使用as const提供精确值类型

从常量数组推导出联合类型，是一种非常优雅的模式：

const options = ['up', 'down'] as const;
type Direction = typeof options[number]; // 推导出 'up' | 'down'

✅ 总结：字面量类型核心知识表

最后，用一张表快速回顾一下今天的核心要点：