TypeScript 中的 «as const»：拯救代码免于愚蠢错误

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

引言：为什么你的 TypeScript 代码行为异常？

你是否曾在 TypeScript 中写过类似这样的代码：

const direction = 'left';// ... 然后 TypeScript 说它是 string 类型，而不是 'left'？

熟悉吗？这是即使是经验丰富的开发者也会经常掉入的陷阱之一。今天，我们将深入探讨一个能一劳永逸解决这个问题的强大工具——as const。

本文的主题基于 Stack Overflow 上一个真实的问题，该问题获得了数千次浏览：“TypeScript 中的 ‘as const’ 是什么意思，它的用例是什么？”。我们将这个问题改编为教育内容，加入生动的示例，并展示 TypeScript 中的 as const 如何帮助你避免愚蠢的错误。

准备好了吗？让我们开始吧！

用简单的话说，TypeScript 中的 as const 是什么？

as const 是一种特殊的构造（const 断言），它告诉 TypeScript：“嘿，不要扩展类型！把这个值冻结为字面量。” 换句话说，你禁止 TypeScript 推断出更通用的类型（例如 string），并强制它使用精确的值。

没有 as const 的问题

看一个简单的例子：

// 没有 as constconst role = 'admin'; // TypeScript 推断类型：'admin' (因为 const)let userRole = 'admin'; // TypeScript 推断类型：string (因为 let)

// 现在看数组：const roles = ['admin', 'user', 'guest']; // TypeScript 推断：string[]

当你使用 let 或数组时，TypeScript 会将类型“扩展”为更通用的类型。这很合理：变量可能会改变，数组可能会被修改。但在 90% 的情况下，你需要的是精确的值！

使用 as const 的解决方案

const roles = ['admin', 'user', 'guest'] as const;// TypeScript 推断：readonly ["admin", "user", "guest"]

const config = {  api: 'https://api.example.com',  timeout: 5000} as const;// TypeScript 推断：// {//   readonly api: "https://api.example.com";//   readonly timeout: 5000;// }

现在 TypeScript 知道了精确的字面量。没有 string 或 number——只有具体的值。这就是 TypeScript 中的 as const 的魔力。

使用 as const 时的前 5 个错误（以及如何避免它们）

即使知道了 as const 是什么，开发者们也经常犯同样的错误。让我们通过真实案例来逐一分析。

错误 #1：尝试修改 readonly 对象

当你使用 as const 时，对象或数组会变成 readonly。尝试修改它们会导致编译错误。

不好的做法：

const colors = ['red', 'green', 'blue'] as const;colors.push('yellow'); // 错误！类型 'readonly [...]' 上不存在属性 'push'

如何避免：

如果你需要一个可修改的数组，不要使用 as const。或者使用一个副本：

const colors = ['red', 'green', 'blue'] as const;const mutableColors = [...colors]; // 现在这是一个普通数组mutableColors.push('yellow'); // 正常工作

错误 #2：忘记了嵌套对象

as const 是递归工作的——它会使所有嵌套属性变为 readonly。很多人会忘记这一点。

示例：

const theme = {  colors: {    primary: '#007bff',    secondary: '#6c757d'  }} as const;

theme.colors.primary = '#000'; // 错误！无法分配到 'primary'，因为它是只读属性。

如何避免：

如果你只需要修改对象的一部分，请进行浅层 as const 或使用部分类型。