TypeScript中 as const 的使用技巧

最新推荐文章于 2024-11-25 15:48:42 发布

liangshanbo1215

最新推荐文章于 2024-11-25 15:48:42 发布

阅读量1.1k

点赞数 29

分类专栏：代码优化 TypeScript 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/liangshanbo1215/article/details/143847285

版权

代码优化同时被 2 个专栏收录

37 篇文章

订阅专栏

TypeScript

9 篇文章

订阅专栏

在 TypeScript 中，as const 是一种强大的类型修饰符，它可以让你将数组或对象转换为只读的元组或只读的对象。这会改变编译器对这些数据结构类型的推断方式，使得它们更加精确。下面是一些 as const 的使用技巧和例子：

1. 创建只读数组（元组类型）

当你有一个数组，并且想要确保它的长度和元素类型都是固定的，你可以使用 as const 将它变成一个只读的元组类型。

const fruits = ['apple', 'banana', 'cherry'] as const;
// fruits 的类型是 readonly ["apple", "banana", "cherry"]

2. 创建只读对象

对于对象，as const 可以让对象的所有属性成为只读的，并且它们的值也会被推断为字面量类型。

const config = {
  port: 80,
  host: 'localhost'
} as const;

// config 的类型是 { readonly port: 80; readonly host: "localhost"; }

3. 字面量类型的推断

as const 可以用来确保编译器将字面量推断为具体的类型，而不是更宽泛的类型，比如将数字推断为 1 而不是 number。

const count = 1 as const;
// count 的类型是 1

4. 在函数参数中使用

你也可以在函数参数中使用 as const，以确保传递给函数的数组或对象是不可变的。

function printFruits(fruits: readonly string[]) {
  for (const fruit of fruits) {
    console.log(fruit);
  }
}

const myFruits = ['apple', 'banana', 'cherry'] as const;
printFruits(myFruits); // 这里 myFruits 的类型是 readonly ["apple", "banana", "cherry"]

5. 结合类型别名使用

你可以结合 as const 和类型别名来创建更加具体的类型。

const COLORS = ['red', 'green', 'blue'] as const;
type Color = typeof COLORS[number]; // "red" | "green" | "blue"

6. 避免不必要的类型扩展

有时候，你不希望 TypeScript 自动推断出过于宽松的类型。例如，如果你有一个对象数组，你可能希望每个对象都有特定的结构，这时 as const 就很有用了。

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
] as const;

// items 的类型是 readonly [{ readonly id: 1; readonly name: "Item 1"; }, { readonly id: 2; readonly name: "Item 2"; }]

通过使用 as const，你可以确保你的代码中数据结构的不变性和类型准确性，这对于防止意外的数据修改和提高代码质量非常有帮助。

as const 有哪些典型的应用场景？

以下是几个典型的应用场景：

1. 创建枚举类替代品

虽然 TypeScript 提供了枚举类型，但在某些情况下，使用 as const 创建常量对象可以作为枚举的一个轻量级替代方案。

const Directions = {
  Up: 'UP',
  Down: 'DOWN',
  Left: 'LEFT',
  Right: 'RIGHT'
} as const;

type Direction = typeof Directions[keyof typeof Directions];
// Direction 类型是 "UP" | "DOWN" | "LEFT" | "RIGHT"

2. 定义配置选项

当定义配置对象时，你通常不希望这些配置在运行时被修改。使用 as const 可以确保这些配置项是不可变的。

const appConfig = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
} as const;

// appConfig 的类型是 { readonly apiUrl: "https://api.example.com"; readonly timeout: 5000; }

3. 构建映射表

在构建映射关系时，as const 可以确保键值对不会被意外修改，同时也能获得更精确的类型推断。

const statusCodes = {
  success: 200,
  notFound: 404,
  serverError: 500
} as const;

type StatusCodes = typeof statusCodes;
// StatusCodes 类型是 { readonly success: 200; readonly notFound: 404; readonly serverError: 500; }

type StatusCode = keyof typeof statusCodes;
// StatusCode 类型是 "success" | "notFound" | "serverError"

4. 控制状态机的状态

在实现状态机模式时，状态的值通常是固定的，使用 as const 可以确保状态不会被更改，并且可以得到更准确的状态类型。

const States = {
  Idle: 'idle',
  Running: 'running',
  Paused: 'paused',
  Stopped: 'stopped'
} as const;

type State = typeof States[keyof typeof States];
// State 类型是 "idle" | "running" | "paused" | "stopped"

5. 防止数组中的元素类型被泛化

当数组中的元素是特定的字面量类型时，使用 as const 可以避免 TypeScript 将它们泛化为更通用的类型。

const roles = ['admin', 'editor', 'viewer'] as const;
// roles 的类型是 readonly ["admin", "editor", "viewer"]

type Role = typeof roles[number];
// Role 类型是 "admin" | "editor" | "viewer"

6. 在 UI 框架中定义静态数据

在 React 或 Vue 等 UI 框架中，有时你需要定义一些静态的数据，如按钮的文字、选项列表等，使用 as const 可以确保这些数据不会被修改，并且可以获取到更精确的类型信息。

const buttonLabels = {
  primary: 'Submit',
  secondary: 'Cancel'
} as const;

type ButtonLabel = typeof buttonLabels[keyof typeof buttonLabels];
// ButtonLabel 类型是 "Submit" | "Cancel"

7. 构建常量集合

当你有一组相关的常量时，使用 as const 可以创建一个常量集合，同时还能得到相应的联合类型。

const Colors = {
  Red: '#FF0000',
  Green: '#00FF00',
  Blue: '#0000FF'
} as const;

type Color = typeof Colors[keyof typeof Colors];
// Color 类型是 "#FF0000" | "#00FF00" | "#0000FF"

以上就是 as const 的一些典型应用场景。它可以帮助开发者更好地控制类型，确保数据的不可变性，从而提高代码的质量和可维护性。

使用 as const 时需要注意哪些问题？

使用 as const 时，有一些重要的注意事项和潜在的问题需要考虑：

1. 不可变性

当你在对象或数组上使用 as const 时，它会使得整个结构变得只读（readonly）。这意味着你不能在后续代码中改变这些值。如果你尝试去修改一个标记为 as const 的值，TypeScript 编译器将会报错。
如果你的应用程序逻辑依赖于修改某个值，那么使用 as const 可能不合适。

2. 类型推断

使用 as const 会触发 TypeScript 的字面量类型推断。这可能会导致更严格的类型检查，因为编译器会将变量类型视为其字面量值，而不是更广泛的原始类型（如 string 或 number）。
如果你不希望类型如此严格，或者你的代码依赖于更宽泛的类型，那么可能需要重新考虑是否使用 as const。

3. 对象的深层结构

as const 会影响到对象的所有层级，不仅仅是顶层属性。如果你的对象结构复杂，这可能导致整个对象树都变为只读。
如果你只需要部分属性为只读，而其他属性允许修改，那么 as const 可能不是最佳选择，你可以考虑为个别属性显式地添加 readonly 修饰符。

4. 数组和元组

在数组或元组上使用 as const 会使它们成为只读，并且每个元素都会被推断为其具体的字面量类型。
如果你需要保持数组的可变性，或者你需要数组元素具有更通用的类型，那么 as const 可能不适合。

5. 与第三方库的兼容性

如果你在与第三方库交互时使用了 as const，要确保该库能够处理只读类型。某些库可能期望传递给它们的对象是可以修改的。

6. 类型扩展

一旦你使用 as const 将一个对象标记为只读，你就不能再扩展它的类型。例如，你不能通过接口合并来扩展一个标记为 as const 的对象的类型。
如果你需要在未来扩展对象的类型，那么应该避免使用 as const。

7. 类型推断的局限性

在某些情况下，as const 的类型推断可能不如预期的那样精确，特别是在复杂的类型操作中。这时你可能需要手动指定类型来达到预期的行为。

8. 代码审查

当你在代码库中广泛使用 as const 时，要确保团队成员了解它的含义以及它如何影响类型系统。在代码审查过程中，这一点尤为重要。

总之，as const 是一个强大的工具，可以用来确保数据的不可变性和精确的类型推断。但是，使用它时需要考虑到上述提到的各种因素，以确保它符合你的设计意图并且不会引入不必要的限制。

as const 和 readonly 有什么区别？

as const 和 readonly 都是 TypeScript 中用于增强类型安全性的特性，但它们的作用方式和应用场景有所不同。下面详细解释两者的区别：

`as const`

作用：
- as const 是一个类型断言，它告诉 TypeScript 编译器将一个表达式的类型视为尽可能具体的字面量类型。
- 它会使整个对象或数组及其所有嵌套的属性变为只读（readonly）。
类型推断：
- 使用 as const 会使变量的类型被推断为具体的字面量类型，而不是更宽泛的类型。
- 例如，const x = 1 as const; 的类型会被推断为 1 而不是 number。

不可变性：

as const 会使整个结构（包括嵌套的属性）都变为只读，无法修改。

例如：

const obj = { a: 1, b: { c: 2 } } as const;
// obj.a = 2; // Error: Cannot assign to 'a' because it is a read-only property.
// obj.b.c = 3; // Error: Cannot assign to 'c' because it is a read-only property.

应用场景：
- 适用于需要确保数据不可变的情况，特别是在配置对象或常量定义中。
- 适用于需要精确类型推断的场景，例如枚举值或特定的字面量类型。

`readonly`

作用：
- readonly 是一个类型修饰符，它可以应用于接口或类型别名中的属性，使其成为只读。
- 它只影响特定的属性，而不是整个对象或数组。

类型定义：

使用 readonly 时，你需要显式地在类型定义中指定哪些属性是只读的。

例如：

interface Person {
  readonly name: string;
  age: number;
}

const person: Person = { name: 'Alice', age: 30 };
// person.name = 'Bob'; // Error: Cannot assign to 'name' because it is a read-only property.
person.age = 31; // OK

不可变性：
- readonly 只使特定的属性变为只读，其他属性仍然可以修改。
- 嵌套的属性不会自动变为只读，除非你也显式地将它们标记为 readonly。
应用场景：
- 适用于需要对特定属性进行保护的情况，但仍然允许其他属性被修改。
- 适用于需要在类型定义中明确指定哪些属性是只读的场景。