前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >早读《Const Assertions in Literal Expressions in TypeScript》

早读《Const Assertions in Literal Expressions in TypeScript》

作者头像
icepy
发布2019-12-24 14:17:54
5080
发布2019-12-24 14:17:54
举报
文章被收录于专栏:子曰五溪

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

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

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

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

代码语言:javascript
复制
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"
};

如果你使用:

代码语言:javascript
复制
fetchJSON("https://example.com/", HTTPRequestMethod.GET)
  .then(data => {
    // ...
  });

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

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

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

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

代码语言:javascript
复制
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变量来描述二维空间中的原点,如下所示:

代码语言:javascript
复制
const ORIGIN = {
  x: 0,
  y: 0
} as const;

这等同于(并且比以下声明更简洁):

代码语言:javascript
复制
const ORIGIN: {
  readonly x: 0;
  readonly y: 0;
} = {
  x: 0,
  y: 0
};
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-12-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 子曰五溪 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档