TypeScript 系列:satisfies 的实用之处

假设我们要定义一份配置,如果直接写则没有类型提示,写错字段名或少写字段 TS 也不会报错。

ts 复制代码
const TIME_UNITS_TRANSLATIONS = {
    day: {
        singular: 'day',
        plural: 'days',
    },
    hour: {
        singular: 'hour',
        plural: 'hours',
    },
    minute: {
        singular: 'minute',
        plural: 'minutes',
    },
    second: {
        singular: 'second',
        plural: 'seconds',
    },
    millisecond: {
        singular: 'millisecond',
        plural: 'milliseconds',
    },
}

但若加上类型,确实解决了字段提示的问题,但是又会出现新问题:

ts 复制代码
type ITimeUnit = 'day' | 'hour' | 'minute' | 'second' | 'millisecond'
type IForms = {
    singular: string
    plural: string
}

const TIME_UNITS_TRANSLATIONS: Record<ITimeUnit, IForms> = {
    day: {
        singular: 'day',
        plural: 'days',
    },
    hour: {
        singular: 'hour',
        plural: 'hours',
    },
    minute: {
        singular: 'minute',
        plural: 'minutes',
    },
    second: {
        singular: 'second',
        plural: 'seconds',
    },
    millisecond: {
        singular: 'millisecond',
        plural: 'milliseconds',
    },
}

当我们 hover 变量其类型变成

const TIME_UNITS_TRANSLATIONS: Record<ITimeUnit, IForms>

而不加类型之前,VSCode 是能完整提示到字段级别的。这样便于我们观察变量,无需跳转到其定义处就能知道里面有哪些字段。

ts 复制代码
const TIME_UNITS_TRANSLATIONS: {  
    day: {  
        singular: string;  
        plural: string;  
    };  
    hour: {  
        singular: string;  
        plural: string;  
    };  
    minute: {  
        singular: string;  
        plural: string;  
    };  
    second: {  
        singular: string;  
        plural: string;  
    };  
    millisecond: {  
        singular: string;  
        plural: string;  
    };  
}

能否一举两得 - satisfies to the rescue 💉

ts 复制代码
const TIME_UNITS_TRANSLATIONS = {
    day: {
        singular: 'day',
        plural: 'days',
    },
    hour: {
        singular: 'hour',
        plural: 'hours',
    },
    minute: {
        singular: 'minute',
        plural: 'minutes',
    },
    second: {
        singular: 'second',
        plural: 'seconds',
    },
    millisecond: {
        singular: 'millisecond',
        plural: 'milliseconds',
    },
} satisfies Record<ITimeUnit, IForms>

这时候 hover 后发现我们平铺的类型定义又回来,而且字段能自动提示。

更进一步 - as const satisfies ... 🔬

能否做到更好?我们试试 as const satisfies ...

ts 复制代码
const TIME_UNITS_TRANSLATIONS = {
    day: {
        singular: 'day',
        plural: 'days',
    },
    hour: {
        singular: 'hour',
        plural: 'hours',
    },
    minute: {
        singular: 'minute',
        plural: 'minutes',
    },
    second: {
        singular: 'second',
        plural: 'seconds',
    },
    millisecond: {
        singular: 'millisecond',
        plural: 'milliseconds',
    },
} as const satisfies Record<ITimeUnit, IForms>

此时发现还能具体到字段的值,完美!

第二个例子

这个例子帮助我们更好理解 satisifies

ts 复制代码
type User = {
  id: string;
  name: string;
  age?: number;
};

const alice = {
  id: "123",
  name: "Alice",
  age: 30,
} satisfies User; // ✅ 类型仍然是 { id: string; name: string; age: number }

// 仍然可以访问 alice.age.toFixed(2),因为 age 被推断为 `number` 而不是 `number | undefined`

如果改成普通的类型标注:

ts 复制代码
const alice: User = {
  id: "123",
  name: "Alice",
  age: 30,
}; // 类型变成了 User 即 { id: string; name: string; age?: number }

alice.age.toFixed(2)
// ^^^^ 'alice.age' is possibly 'undefined'.(18048)

代码将报错因为 age 被推断为number | undefined 而不是 number

但实际上我们知道 alice 的 age 并不为空(30)。

到这里我们就学会了何时在项目中使用 satisifies 了 🎉!

总结

当我们想验证变量类型但不改变类型本身 ,可以试试 satisifies,打破鱼与熊掌二者不可兼得。

参考

相关推荐
codehub7 小时前
TypeScript 高频面试题与核心知识总结
typescript
张志鹏PHP全栈8 小时前
TypeScript 第一天,认识TypeScript
typescript
羊八井13 小时前
类型、分类定义时使用 type 还是 kind ?
rust·typescript·代码规范
MR_发13 小时前
万字实现带@和表情包的输入框
vue.js·typescript
OEC小胖胖1 天前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
三水气象台1 天前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
難釋懷1 天前
TypeScript-webpack
javascript·webpack·typescript
摸鱼仙人~3 天前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
一生躺平的仔3 天前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
MiyueFE3 天前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript