TypeScript 高级特性：`as const` 关键字的妙用

"as const" 的作用是什么？

在 TypeScript 中，你可以用 "as const" 声明一个变量。这会让变量的值成为常量，或者换句话说，它会让变量成为只读。这与只用 const 声明变量不同。你不能重新声明 const 变量的值，但可以修改它。如果你使用 "as const"，你不能重新声明或修改它。

以下是一个例子：

代码语言：typescript复制

// 没有 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"。

代码语言：typescript复制

// 使用 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"，你可以声明更严格的类型。我指的是，与其值的类型为字符串，不如将其类型声明为字符串字面量。

这里有另一个例子：

代码语言：typescript复制

// 没有 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"，我们可以在悬停在这些变量上时看到它们的值。由于它们是只读的，它们的类型并不重要，它们不能改变。

代码语言：typescript复制

// 使用 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腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！

2024腾讯·技术创作特训营第五期

0 人点赞