TypeScript Academy · 课时

字符串与数值字面量类型

Q: 「字符串与数值字面量类型」这节课中我会学到什么？

使用字面量类型，将值限制为精确的字符串和数字。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用字面量类型，将值限制为精确的字符串和数字。

字符串与数值字面量类型 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

什么是字面量类型

大多数类型描述的是值的集合。string 表示任意字符串，number 表示任意数字。字面量类型则将范围缩小为一个确切的值。

'north' 类型只允许字符串 'north'，除此之外都不允许。字面量类型可以让您直接在类型系统中表示精确且有限的允许值集合。

let dir: 'north' = 'north';
console.log(dir);
// dir = 'south'; // Error: not assignable to type 'north'

字符串字面量联合类型

单个字面量单独使用时并不太有用。使用 | 将多个字面量组合起来，形成字面量联合类型。这是表示固定选项集合的惯用方式。

下面的 Direction 只能是四个确切字符串中的一个。

type Direction = 'north' | 'south' | 'east' | 'west';

let heading: Direction = 'east';
console.log('Heading:', heading);

heading = 'west';
console.log('Now:', heading);

拒绝无效值

字面量联合类型的优势在于，编译器会拒绝允许集合之外的任何值。拼写错误和无效选项会变成编译时错误，而不是运行时错误。

type Direction = 'north' | 'south' | 'east' | 'west';

let heading: Direction = 'north';
console.log(heading);
// heading = 'up'; // Error: '"up"' is not assignable to 'Direction'

将字面量用作函数参数

对于只接受特定值的函数参数，请使用字面量联合类型。调用方可以获得自动补全，并且无法传入无效值。

type Direction = 'north' | 'south' | 'east' | 'west';

function move(dir: Direction): string {
  return 'Moving ' + dir;
}

console.log(move('south'));
// console.log(move('left')); // Error

数字字面量类型

字面量类型不仅适用于字符串，也可以使用确切的数字。一个经典例子是六面骰子，其面值必须是 1 到 6 中的一个。

type Dice = 1 | 2 | 3 | 4 | 5 | 6;

function roll(): Dice {
  return (Math.floor(Math.random() * 6) + 1) as Dice;
}

console.log('Rolled:', roll());

参数中的数字字面量

数字字面量联合类型会将输入限制为一组确切的数字，非常适合质量级别、类似 HTTP 的状态码或网格大小等场景。

type Quality = 1 | 2 | 3;

function setQuality(level: Quality): void {
  console.log('Quality set to', level);
}

setQuality(2);
// setQuality(5); // Error: 5 is not 1 | 2 | 3

混合字符串和数字字面量

联合类型可以混合不同种类的字面量。这对于接受命名预设或原始值的应用程序接口非常方便。

type Size = 'small' | 'large' | 0 | 100;

function resize(s: Size): void {
  console.log('Resizing to', s);
}

resize('small');
resize(100);

布尔字面量类型

布尔值也有字面量类型：true 和 false 既是类型，也是值。完整的 boolean 类型实际上就是 true | false。

type AlwaysOn = true;

let enabled: AlwaysOn = true;
console.log('Enabled:', enabled);
// enabled = false; // Error: false not assignable to true

字面量可以改进文档

字面量联合类型本身就可以充当文档。任何读到 type Status = 'idle' | 'loading' | 'done' 的人，都能立即知道所有可能的状态——无需猜测，也不必在代码中散落魔法字符串。

type Status = 'idle' | 'loading' | 'done';

function render(s: Status): string {
  return 'State is: ' + s;
}

console.log(render('loading'));

将字面量与其他类型组合

您可以在联合类型中将字面量类型与更宽泛的类型混合使用。常见模式是 'auto' | number，表示特殊关键字 'auto' 或任意数字。

type Width = 'auto' | number;

function setWidth(w: Width): void {
  console.log('Width:', w);
}

setWidth('auto');
setWidth(320);

将字面量用作命名常量

字面量类型与命名常量搭配使用非常合适。定义一次类型后即可在各处复用，并安全地进行重构。编译器会确保每次使用都保持一致。

type Theme = 'light' | 'dark';

const DEFAULT_THEME: Theme = 'dark';

function applyTheme(t: Theme): void {
  console.log('Applying', t, 'theme');
}

applyTheme(DEFAULT_THEME);

快速检查

请测试您对字面量类型的理解。

回顾：字面量类型

您学到了：

字面量类型表示一个确切的值，例如 'north' 或 6。
使用 | 组合字面量，可以创建允许值的有限联合类型。
它们适用于字符串、数字和布尔值，也可以与 'auto' | number 这样的更宽泛类型混合使用。
将它们用作函数参数时，可以提供自动补全，并在编译时拒绝无效输入。

接下来，我们将探索 TypeScript 如何在字面量类型和拓宽后的类型之间做出决定。

type Direction = 'north' | 'south' | 'east' | 'west';
type Dice = 1 | 2 | 3 | 4 | 5 | 6;

function describe(d: Direction, n: Dice): string {
  return 'Go ' + d + ' ' + n + ' steps';
}

console.log(describe('north', 3));

常见问题解答

「字符串与数值字面量类型」课时是免费的吗？

是的 — 「字符串与数值字面量类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「字符串与数值字面量类型」这节课中我会学到什么？

使用字面量类型，将值限制为精确的字符串和数字。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「字符串与数值字面量类型」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy