TS小技巧-as const类型收窄

81 阅读1分钟

TS小技巧-as const类型收窄

先看如下代码

const routes = {
  home: '/',
  admin: '/admin',
  users: '/users'
}
​
type CRoute = '/' | '/admin' | '/users';
const goToRoute = (r: CRoute) => { };
​
goToRoute(routes.admin);

看着没啥问题,但是呢,会报错

image-20240715073558830

image-20240715073613203

为什么会报错?

先看类型,routes是字面量的对象,其中的每一项我们并没有给类型,TS自动推断为string,

image-20240715073845487

而goToRoute的形参r,它的类型为一个联合类型(CRoute其中一个类型),所以造成了类型不匹配。

解决办法

  • 使用as const进行类型收窄

    image-20240715074251563

    image-20240715074324309

    收窄后,变成了字面量类型,

  • 方法二:当然是给个类型了,可以使用Record

    image-20240715074601566