TS satisfies操作符,解决类型提示问题

satisfies操作符

支持版本 typescript 4.9

在开发的时候, 我们经常需要严格的要求是某一种类型

const obj = {
  key1:{
    title: 'foo',
    name: 'foo'
  },
  key2:{
    title: 'foo',
    name: 'foo'
  }
}

我们要强制要求obj[key] 的值是一个指定的类型

interface Desc {
  title: string
  name: string
}
const obj:Record<string,  Desc> = {
  key1:{
    title: 'foo',
    name: 'foo'
  },
  key2:{
    title: 'foo',
    name: 'foo'
  }
}

但这样存在一个问题,就是我们的编辑会有没有具体的key提示
我们输入 obj.key1 obj.keyxxx 都不会有报错提示

为了解决这个问题, 就有了satisfies 操作符

type Colors = 'red' | 'green' | 'blue';
type RGB = [red: number, green: number, blue: number];

const palette = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [0, 0, 255],
} satisfies Record<Colors, string | RGB>;


palette.blue // RGB
palette.green // string
palette.xxx   
//     ^^^^ 类型“{ red: [number, number, number]; green: string; blue: [number, number, number]; }”上不存在属性“xxx”。ts(2339)


const palette2 = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0]
// ~~~ error ts(2322)
} satisfies Record<string, string | RGB>;

TS satisfies操作符,解决类型提示问题_第1张图片

你可能感兴趣的:(typescript,前端)