TypeScript - 字面量类型：初学者指南

你好，未来的编程巨星！今天，我们将深入了解TypeScript字面量类型的精彩世界。如果你是编程新手，不用担心——我会成为你这次冒险中的友好向导。在本教程结束时，你将能够像专业人士一样使用字面量类型！

字面量类型是什么？

在我们开始之前，让我们想象你正在点披萨。你不能只是说，“我想要一份披萨。”你需要指定大小：小、中或大。在TypeScript中，字面量类型就像那些特定的披萨大小——它们是变量可以具有的确切值。

语法

字面量类型的语法很简单。你只需要使用你想要允许的确切值。让我们来看一个基本示例：

let pizzaSize: "small" | "medium" | "large";

在这个例子中，pizzaSize只能被赋值为"small"、"medium"或"large"。不允许其他值——即使是"超大"或"迷你"！

字符串字面量类型

字符串字面量类型是最常见且最容易理解的。它们正如其名——变量可以是特定的字符串。

示例 1：星期天数

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // 这没问题
today = "Someday"; // 错误！类型 '"Someday"' 不能赋值给类型 'DayOfWeek'。

在这个例子中，DayOfWeek是一个只能被赋值为一周七天的类型。尝试赋值其他字符串，TypeScript会对你摇头！

示例 2：交通信号灯颜色

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
console.log(`灯光已经变成 ${color}`);
}

changeLight("Green"); // 没问题
changeLight("Purple"); // 错误！参数的类型 '"Purple"' 不能赋值给参数类型 'TrafficLightColor'。

在这里，我们确保交通信号灯只能变成有效的颜色。这条街上不允许有迪斯科灯！

数数字面量类型

和字符串一样，我们可以使用数字来创建字面量类型。这在你想要限制值为特定数字时非常有用。

示例 3：掷骰子

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

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

let myRoll = rollDice();
console.log(`你掷出了一个 ${myRoll}`);

在这个例子中，我们确保骰子只能掷出1到6的数字。我们的游戏中没有灌铅骰子！

示例 4：衬衫尺寸

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // 错误！类型 '41' 不能赋值给类型 'ShirtSize'。

在这里，我们限制了衬衫尺寸为特定的数字。这家店里不允许有中间尺寸！

组合字面量类型

当我们结合不同类型的字面量时，字面量类型的真正力量就会显现出来。

示例 5：游戏角色状态

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // 这也是有效的
hero = "Wounded"; // 错误！类型 '"Wounded"' 不能赋值给类型 'CharacterStatus'。

在这个游戏中，一个角色的状态可以是"Alive"、"Dead"、1（代表活着）或0（代表死亡）。就像同时有了文本和代码表示！

字面量类型的使用场景

字面量类型在许多场景中都非常有用。让我们探索几个：

1. 函数参数

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
// 发送请求
console.log(`发送 ${method} 请求到 ${url}`);
}

sendRequest("https://api.example.com", "GET"); // 没问题
sendRequest("https://api.example.com", "FETCH"); // 错误！参数的类型 '"FETCH"' 不能赋值给参数类型 'HttpMethod'。

通过为HTTP方法使用字面量类型，我们确保只能使用有效的请求方法。

2. 配置对象

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
theme: Theme;
language: Language;
notifications: boolean;
}

const myConfig: AppConfig = {
theme: "dark",
language: "en",
notifications: true
};

字面量类型帮助我们创建严格的配置对象，防止打字错误和无效设置。

3. 状态机

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
private state: LoginState = "loggedOut";

login() {
this.state = "loggingIn";
// 执行登录逻辑
this.state = Math.random() > 0.5 ? "loggedIn" : "error";
}

logout() {
this.state = "loggedOut";
}

getState(): LoginState {
return this.state;
}
}

在这里，我们使用字面量类型表示登录过程中的不同状态，确保状态只能是预定义值之一。

方法表

下面是一个总结我们涵盖的关键方法和概念的表格：

方法/概念	描述	示例
类型声明	使用字面量值定义新类型	type DayOfWeek = "Monday" | "Tuesday" | ...
变量赋值	将字面量类型赋值给变量	let today: DayOfWeek = "Monday";
函数参数	在函数参数中使用字面量类型	function sendRequest(method: HttpMethod) {...}
组合字面量	混合不同类型的字面量	type Status = "Active" | "Inactive" | 0 | 1;
接口属性	在接口属性中使用字面量类型	interface Config { theme: "light" | "dark" }

就这样，我的编程学徒！你已经通过掌握字面量类型在TypeScript旅程中升级了。记住，就像选择完美的披萨配料一样，字面量类型帮助你明确并避免错误。继续练习，很快你就能创建出像精心制作的披萨一样美味的类型安全代码！??

Credits: Image by storyset