TypeScript中的“as const”是什么意思?类型断言!

本文详细介绍了TypeScript中的const断言,它允许开发者限制编译器对数组或元组类型的推断,确保更精确的类型检查。通过举例说明,解释了在不使用const断言时可能导致的编译错误,并对比了使用const断言后的正确行为。const断言并不影响运行时行为,但有助于在编译阶段捕获潜在问题。

as const 也是类型断言的一种

这被称为const断言。const断言告诉编译器为表达式推断出它能推断出的最窄或最特定的类型。如果不使用它,编译器将使用其默认类型推断行为,这可能会导致更广泛或更一般的类型。

请注意,它被称为“断言”,而不是“强制转换”。术语“cast”在TypeScript中通常是要避免的;当人们说“cast”时,它们通常意味着某种可以在运行时观察到的效果,但是TypeScript的类型系统,包括类型断言和const断言,从发出的JavaScript中被完全删除。因此,在运行时,使用as const的程序和不使用as const的程序完全没有区别。


不过,在编译时,有一个明显的区别。让我们看看在上面的例子中省略as const会发生什么:

const args = [8, 5];
// const args: number[]
const angle = Math.atan2(...args); // error! Expected 2 arguments, but got 0 or more.
console.log(angle);

编译器看到const args = [8, 5];,并推断出number[]的类型。这是一个由0个或更多number类型的元素组成的可变数组。编译器不知道有多少或哪些元素。这样的推断通常是合理的;通常,数组内容意味着要以某种方式进行修改。如果有人想写args.push(17)或args[0]++,他们会很乐意使用number[]类型。

不幸的是,下一行Math.atan2(…args)导致了一个错误。Math.atan2()函数正好需要两个数值参数。但是编译器只知道args是一个数字数组。它完全忘记了有两个元素,因此编译器抱怨说,当它只需要两个参数时,您正在用“0或更多”参数调用Math.atan2()。


将其与as const的代码进行比较:

const args = [8, 5] as const;
// const args: readonly [8, 5]
const angle = Math.atan2(...args); // okay
console.log(angle);

现在编译器推断args属于readonly [8, 5]类型。。。一个readonly元组,其值正好是按此顺序排列的数字8和5。具体来说,args.length被编译器精确地称为2。

这就足够下一行使用Math.atan2()了。编译器知道Math.atan2(…args)与Math.atan2(8, 5)相同,这是一个有效的调用。

`as const` 是 TypeScript 中的一种类型断言,用于告诉编译器将某个值视为不可变的常量。通过 `as const` 断言,可以让 TypeScript 对值进行更精确的类型推断,将值的类型固定为字面量类型,并且将数组转换为只读元组,对象属性转换为只读属性。 ### 精确的只读元组 使用 `as const` 断言可以将数组类型推断为只读元组,即数组的元素类型和长度都被固定,并且不能修改数组的元素。示例如下: ```typescript const arr = [1, 2, 3] as const; // 类型推断为:readonly [1, 2, 3] arr[0] = 4; // ❌ 编译错误 ``` 在上述代码中,使用 `as const` 断言后,`arr` 的类型被推断为 `readonly [1, 2, 3]`,尝试修改 `arr` 的元素会导致编译错误 [^3]。 ### 对象属性只读 对于对象,使用 `as const` 断言可以将对象的属性转换为只读属性,防止属性被修改。示例如下: ```typescript const obj = { name: 'John', age: 30 } as const; obj.name = 'Jane'; // ❌ 编译错误 ``` 在上述代码中,使用 `as const` 断言后,`obj` 的属性 `name` 和 `age` 都变成了只读属性,尝试修改 `name` 属性会导致编译错误。 ### 实战应用场景 在 Redux action types 中,使用 `as const` 可以确保 action 的类型是精确的字面量类型,避免意外的类型错误。示例如下: ```typescript const ADD_TODO = 'ADD_TODO' as const; const REMOVE_TODO = 'REMOVE_TODO' as const; type TodoAction = | { type: typeof ADD_TODO; payload: string } | { type: typeof REMOVE_TODO; payload: number }; function addTodo(text: string): TodoAction { return { type: ADD_TODO, payload: text }; } function removeTodo(id: number): TodoAction { return { type: REMOVE_TODO, payload: id }; } ``` 在上述代码中,使用 `as const` 断言将 `ADD_TODO` 和 `REMOVE_TODO` 视为常量,确保 `TodoAction` 类型的精确性 [^1]。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尤雨东

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值