TypeScript 中的 satisfies 运算符

24 年 2 月 15 日 星期四
346 字
2 分钟

起因

最近在 Astro 项目开发时自动提示出这样一段代码:

ts
export const getStaticPaths = (() => {
  return []
}) satisfies GetStaticPaths

按照以前我可能会这样去写:

ts
export const getStaticPaths: GetStaticPaths = () => {
  return []
}

这不经使我好奇,satisfies 是什么东西,为什么要这样去声明类型,这样做有哪些好处?

调查

satisfies 运算符是 TypeScript v4.9 新增的运算符,可以验证表达式的类型是否与某种类型匹配,而无需更改该表达式的结果类型1

这是什么意思呢,举个例子:

ts
type User = {
  id: string
  job: string | boolean
}
const mk = {
  id: 'uf193',
  job: 'chef',
} as User

mk.job.toUpperCase()

这里会报错:Property 'toUpperCase' does not exist on type 'string | boolean'。所以在调用 toUpperCase 之前,需要先判断 job 的类型:

ts
if (typeof mk.job === 'string') {
  mk.job.toUpperCase()
}

或者使用 asjob 进行断言:

ts
(mk.job as string).toUpperCase()

如果使用 satisfies 运算符,就可以解决这个问题:

ts
const mk = {
  id: 'uf193',
  job: 'chef',
} satisfies User

此时,mk.job 的类型就是 string,它是根据实际的值进行了类型推导的。

让我们再看一个例子:

ts
type Keys = 'id' | 'email' | 'birth'
const obj = {
  id: '81920',
  email: '[email protected]',
  birth: 1990,
} satisfies Record<Keys, string | number>

这样可以对对象的属性名称或者是对象的所有属性值的类型进行检查。

参考

  1. TypeScript 官方文档

文章标题:TypeScript 中的 satisfies 运算符

文章作者:柃夏chapu

文章链接:https://www.lxchapu.com/posts/the-satisfies-operator[复制]

最后修改时间:


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。