早读《Const Assertions》

connygpt 2024-11-28 08:09 12 浏览

https://mariusschulz.com/blog/const-assertions-in-literal-expressions-in-typescript

这篇文章讲述了 TypeScript 3.4 提供的一个功能 const 断言，这个功能解决了我以前遇到过的一个问题（axios 定义的 method 就是 "GET" | "POST"，不知道现在他们改了么）。

这个类型和对象属性字符串类型是对不上的，比如你直接传递 "HTTPMethod.GET"，不过常规方法还是要使用枚举来处理这些问题，由于提取精髓，因此略有删减。

TypeScript 对于类型推断有它自己的一套原则，当你定义了一个封装，如下一个场景就能还原这个问题：

function fetchJSON(url: string, method: "GET" | "POST") {
  return fetch(url, { method })
    .then(response => response.json());
}

const HTTPRequestMethod = {
  CONNECT: "CONNECT",
  DELETE: "DELETE",
  GET: "GET",
  HEAD: "HEAD",
  OPTIONS: "OPTIONS",
  PATCH: "PATCH",
  POST: "POST",
  PUT: "PUT",
  TRACE: "TRACE"
};

如果你使用：

fetchJSON("https://example.com/", HTTPRequestMethod.GET)
  .then(data => {
    // ...
  });

TS编译器检查类型时会报错，原因在于属性的字符串和字符串类型，这是有区别的，要理解这个问题需要去理解 TS 是如何定义字符串的，这里作者写的很长，综合起来就是：

如果定义常量，不可变，TS知道其中的值
使用的 let 或者对象属性都是字符串类型，这和明确定义的字符"GET"类型不符合
TS 有一种特殊的类型叫：扩展字符串类型，比如 "GET" as "GET"

我们可以设想一下，HTTP的规范定义的 Method 有 9 个，如果我们都那样写扩展字符串类型，这个就很脆了。

TS 3.4 给予了一个新功能来处理这个问题：

const HTTPRequestMethod = {
  CONNECT: "CONNECT",
  DELETE: "DELETE",
  GET: "GET",
  HEAD: "HEAD",
  OPTIONS: "OPTIONS",
  PATCH: "PATCH",
  POST: "POST",
  PUT: "PUT",
  TRACE: "TRACE"
} as const;

这是使用 const 关键字的特殊类型：

文字表达式中的文字类型都不会扩展
对象属性只读
数组变成只读的元组

由于变成了只读，如果你还想给 HTTPRequestMethod 分配新的值时，TS编译器是会给出错误的。

最后结论：

例如，您可以定义一个ORIGIN变量来描述二维空间中的原点，如下所示：

const ORIGIN = {
  x: 0,
  y: 0
} as const;

这等同于（并且比以下声明更简洁）：

const ORIGIN: {
  readonly x: 0;
  readonly y: 0;
} = {
  x: 0,
  y: 0
};

typescript断言

上一篇：TypeScript，基本数据类型、类型推断、类型断言和联合类型
下一篇：15道优秀的TypeScript练习题(上)

早读《Const Assertions》

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

生成对抗网络(GAN)的半监督学习

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三