大家好,我苏学生,一名酷爱钻研、乐于分享的前端工程师,我最喜爱的一句话是:你只管致力,后果许已在路上!

前言

TypeScript4.9中新引入了satisfies操作符,依照官网的说法,它用于在确保某些表达式与某种类型匹配的同时保留该表达式的最特定类型以进行推理

在我看来,它和as关键字的用法差不多,或者说它的呈现是对as关键字的一种优化。下边咱们以几个示例来切身感受下satisfies的不同之处

示例一

之前,咱们想要去复用一个类型时,为了使其满足当下的需要,经常须要借助as帮咱们实现类型革新

interface MyElement{    class:string;    src:string;}const a = {    class:'test'} as Partial<MyElement>

上边的代码,当你尝试从a.class上调用toString()办法时,TypeScript会报错,因为src是此时是一个可选的属性,咱们必须在调用前增加?以平安的拜访它。除此之外,咱们对a.src的拜访也不会引起TypeScript的类型谬误提醒

a.class?.toString()a.src

对于前者,大多数状况下这都是能够承受的,无非就是每次调用的时候麻烦一点。然而对于后者则有可能导致致命性谬误。比方你开发了某个npm包,它进行了插件化设计,那么此时这个src属性就有可能对第三方开发者产生误导

当初,咱们应用satisfies来进行革新,它会对原类型与理论值联合后推断出一个新的类型

const a = {    class:'http://'} satisfies Partial<MyElement> 

此时,当咱们再次拜访a.src时,TypeScript就可能正确推断出类型谬误。并且咱们对toString的调用也不须要再增加?符号来进行守卫了


推广工夫:

我原本始终在推我的约定式路由库,不过目前看来收效甚微。如果它是我的世间现实的话,那挣票子则是我的面包,所以我选了几个我认为是咱们大多数前端开发者容易疏忽但又很重要的小册。有想要学习的掘友自行购买哈

  • 深刻分析 Node.js 底层原理
  • 图解网络协议
  • javascript设计模式原理与实战
  • 前端调试通关秘籍

示例二

因为类型推倒的存在,咱们不须要去手动定义类型

const sp = {    name:'spp',    id:410324}

但这无奈限度a中存在的key的个数,这简略,咱们去创立类型并做断言即可,就像下边这样

interface Person{    name:string;    id:number;}const sp = {    name:'spp'} as Person

当初,咱们想让id可能灵便一点,除了number外,传string也能够,所以革新后长这样

interface Person{    name:string;    id:number | string;}const sp = {    name:'spp',    id:410324} as Person

此时当咱们去读取id做解决时,因为TypeScript无奈判断以后到底是number还是string类型,导致在调用toFixed时就会被推断出类型谬误了

sp.id.toFixed()

以前咱们须要利用括号的优先级再一次进行断言来解决这个问题

(sp as number).id.toFixed()

当初,咱们通过satisfies操作符就能够从本源上杜绝该问题

const sp = {    name:'spp',    id:410324} satisfies Personsp.id.toFixed()

总结

通过两个示例的解说,咱们能够总结如下:

  • 能应用as的中央,也能够应用satisfies
  • satisfies兼顾了类型申明和类型推导

如果本文对您有用,心愿能失去您的❤

订阅专栏,每周更新2-3篇类型体操,等你哟


github与好文

  • vue3外围原理精讲-专栏-继续更新中...
  • TypeScript类型体操-专栏-每周更新
  • npm包插件化方案设计与实现
  • 利用cli-pkg实现主动公布npm、创立github release、github tag
  • 据说你还在应用原生localStorage?