TypeScript 高级特性：`as const` 关键字的妙用
原创TypeScript 高级特性：`as const` 关键字的妙用
原创
"as const" 的作用是什么？
在 TypeScript 中，你可以用 "as const" 声明一个变量。这会让变量的值成为常量，或者换句话说，它会让变量成为只读。这与只用 const 声明变量不同。你不能重新声明 const 变量的值，但可以修改它。如果你使用 "as const"，你不能重新声明或修改它。
以下是一个例子：
// 没有 as const
const config = {
theme: {
primaryColor: '#3498db',
secondaryColor: '#2ecc71',
},
api: {
baseUrl: 'https://api.example.com',
version: 'v1',
},
features: {
enableAnalytics: true,
enableNotifications: false,
},
};
// 这是被允许的
config.theme.primaryColor = '#ff0000';
// 这也是被允许的
config.features.enableNotifications = true;在这个例子中，我们有一个 Web 应用配置，包括一个 theme、api 和 features 对象。正如你可能猜到的那样，这些值可能几乎永远不会改变。如果一个团队成员改变了这个配置的值，而其他人不知道，这可能导致不必要的调试时间来解决一个微不足道的问题。为了将它们保持为只读对象，你可以将它们推断为 "as const"。
// 使用 as const
const config = {
theme: {
primaryColor: '#3498db',
secondaryColor: '#2ecc71',
},
api: {
baseUrl: 'https://api.example.com',
version: 'v1',
},
features: {
enableAnalytics: true,
enableNotifications: false,
},
} as const; // <-- 注意这里的 as const
// 这将导致 TypeScript 错误
config.theme.primaryColor = '#ff0000';
// 这也将引发错误
config.features.enableNotifications = true;这很酷，但 "as const" 还为我们提供了另一个有用的特性。TypeScript 主要用于类型检查，通过使用 "as const"，你可以声明更严格的类型。我指的是，与其值的类型为字符串，不如将其类型声明为字符串字面量。
这里有另一个例子：
// 没有 as const
const config = {
theme: {
primaryColor: '#3498db', // 类型: string
secondaryColor: '#2ecc71', // 类型: string
},
api: {
baseUrl: 'https://api.example.com', // 类型: string
version: 'v1', // 类型: string
},
features: {
enableAnalytics: true, // 类型: boolean
enableNotifications: false, // 类型: boolean
},
};
// 当你悬停在这上面时，你会看到类型: string
config.theme.primaryColor
// 当你悬停在这上面时，你会看到类型: boolean
config.features.enableAnalytics但如果我们使用 "as const"，我们可以在悬停在这些变量上时看到它们的值。由于它们是只读的，它们的类型并不重要，它们不能改变。
// 使用 as const
const config = {
theme: {
primaryColor: '#3498db', // 类型: '#3498db'
secondaryColor: '#2ecc71', // 类型: '#2ecc71'
},
api: {
baseUrl: 'https://api.example.com', // 类型: 'https://api.example.com'
version: 'v1', // 类型: 'v1'
},
features: {
enableAnalytics: true, // 类型: true
enableNotifications: false, // 类型: false
},
} as const;
// 当你悬停在这上面时，你会看到类型: '#3498db'
config.theme.primaryColor
// 当你悬停在这上面时，你会看到类型: true
config.features.enableAnalytics让我们简要回顾一下。
因此，通过使用 "as const"，我们可以将变量变成只读变量，这意味着它们的类型被转换为它们的值，因此当我们尝试更改它们时，TypeScript 会抛出错误。它还为我们提供了更好的智能感知，这意味着我们只需悬停在一个变量上即可看到它们的常量值。
我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。