TypeScript 4.9 satisfies 操作符使用方法

[wangkailang]

TypeScript 4.9 Beta 版本新增 satisfies 操作符，有点类似于 as，但使用比 as 更加灵活。

定义两个类型：

// object key
type Colors = "red" | "green" | "blue";

// object value
type RGB  = [number, number, number];

之前的对象的类型匹配

设置对象默认类型

const palette: Record<Colors, string | RGB> = {
    red: [255, 0, 0],
    green: "#00ff00",
    // 符合预期，提示 key 不对
    bleu: [0, 0, 255]
}

// ❌ 类型提示错误，green 是 string | RGB 类型，无法使用 toUpperCase 方法
const greenNormalized = palette.green.toUpperCase();

强行指定对象类型

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    // 符合预期，提示 key 不对
    bleu: [0, 0, 255]
} as Record<Colors, string | RGB>

// ❌ 类型提示错误，green 是 string | RGB 类型，无法使用 toUpperCase 方法
const greenNormalized = palette.green.toUpperCase();

想处理类型问题，还需要指定具体类型：

const greenNormalized = (palette.green as string).toUpperCase();

结论：旧版本的两种类型定义都需要在处理对象值是强行指定类型才可以，这种强行指定可能会导致其他问题。

别扭的使用方式

interface ISelected {
    item: string | string[]
}

// 提示类型问题，往往这时候我们不想考虑初始化的值，但是这里必须指定
const select: ISelected = {};

// 偷懒做法强行指定
const select = {} as ISelected;

// 明显这里是错误的，但是不会有类型提示错误
select.item

satisfies 可以实现在赋值过程中推导具体类型

const palette = {
    red: [255, 0, 0],
    green: '#00ff00',
    // 符合预期，提示 key 不对
    bleu: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

// =>
// const palette: {
//     red: [number, number, number];
//     green: string;
//     bleu: number[];
// }

// ✅ 没有出现类型错误
const greenNormalized = palette.green.toUpperCase();

• 依旧可以借助 satisfies 后的类型检查 palette 对象 key 的正确性
• palette 对象返回了更加明确的类型定义，后续操作有更好的类型提示

优雅的使用

interface ISelected {
    item: string | string[]
}

// 声明时就会报错
const select = {} satisfies ISelected;

// 自动推导类型 => { item: string } 
const _select = { item: 'cat' } satisfies ISelected;