Typescript高级技巧-基本类型中的const
使用对象初始化变量时,TypeScript 认为该对象的属性是可以被更改的。例如,如果您编写了这样的代码:
const obj = { counter: 0 };
if (someCondition) {
obj.counter = 1;
}
TypeScript 不会认为把 counter 从0改为1是错误的,只要 counter 符合数字类型就可以。
function handleRequest (url: string, method: 'GET' | 'POST') {}
const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method);
// 类型“string”的参数不能赋给类型“"GET" | "POST"”的参数。ts(2345)
在上面的示例中,req.method 被推断为字符串,而不是“GET”。TypeScript认为这段代码有错误。
有两种方法可以解决这个问题。
您可以通过在以下任一位置添加类型断言来更改推导的类型:
// Change 1:
const req = { url: "https://example.com", method: "GET" as "GET" };
// Change 2
handleRequest(req.url, req.method as "GET");
更改1意味着“我希望 req.method 始终具有文本类型“GET”,从而防止在之后将“GUESS”分配给该字段。更改2意味着“我知道出于其他原因,req.method 具有值“GET”。
可以使用常量将整个对象转换为基本值作为其类型:
const req = { url: "https://example.com", method: "GET" } as const;
handleRequest(req.url, req.method);
as const 后缀的作用类似于 const,但对于类型系统,确保所有属性都分配了文字类型,而不是更通用的基础类型,如字符串或数字。
这个最简单的声明,Typescript 会推断出 age 的类型是 number,你可以对它赋任何数值。
let age = 30
// age类型为number
但如果我们使用const声明这个变量,它的类型会变成什么?
const age = 30
// age类型为30
可以看到 30 就变成它的类型,而且再也无法更改。字符串也一样,会有这种限制。
如果对一个数组使用 const 定义,情况就有点不一样了,看下面的例子。它只是定义了 cars 为字符串数组类型,你还是可以对数组进行各种操作,比如插入一个数组元素之类的。
const cars = ['A', 'B', 'C']
// cars类型为string[]
如果你想限定死数组,那就需要加 as const, 如下:
const cars = [1, 2, 3, 4, 5]
// cars类型为readonly ["A", "B", "C"]
对象和数组差不多,如果直接 const 定义,你还是可以直接修改对象的字段,除非加入 as const,这样它会给每个字段加入 readonly, 并且使用基本值作为其类型。
评论