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

什么是字面量类型（Literal Types）？

在TypeScript的高级类型中，字面量类型是一个重要的概念。它的含义非常直观：字面量类型是一种值级别的类型。简单来说，一个具体的值本身就可以作为类型使用。

它主要包括以下几种类型：

长期稳定更新的攒劲资源： >>>点此立即查看<<<

字面量类型 举例 数字 1, 42, 0 字符串 "hello", "yes" 布尔 true, false

它的用法可以通过下面的代码示例来理解：被声明为字面量类型的变量，只能被赋予那个特定的值。

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');   //  类型错误

字面量类型与基础类型的区别

字面量类型（特化） 宽泛基础类型 'hello' string 1 number true boolean

你可以将字面量类型理解为对应基础类型的“特化”或“子类型”。它们之间的赋值关系，通过下面这段代码可以清晰地展示：

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 倾向于给出更宽泛的类型。

情况 推断类型 原因 let a = 42; number 因为 let 声明的变量值可变 const a = someFunc(); 非字面量 如果函数返回值无法静态分析为字面量 const obj = { key: 'value' }; { key: string } 对象属性默认推断为宽泛类型，除非添加 as const

字面量类型的实际应用场景

掌握理论后，字面量类型的强大作用体现在以下几个实战场景中。

联合类型中的类型保护

与联合类型结合，可以实现精确的类型收窄：

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

作为可辨识联合（Discriminated Union）的标签

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

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;
  }
}

使用 as const 推导精确值类型

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

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

总结：字面量类型核心要点

最后，通过一个表格快速回顾核心知识点：

知识点 说明 字面量类型定义 例如 1, "hi", true 等 推断为字面量的条件 使用 const 声明、as const 断言、手动指定字面量类型 推断不会是字面量的情况 使用 let、函数返回值、未使用 as const 的普通对象/数组字面量 实际用途 实现更精确的类型检查、构建可辨识联合、定义配置常量、作为枚举替代等