typescripttype Config = {
theme: 'light' | 'dark' | 'system'
colors: Record<string, string>
}
// with a normal annotation you lose the literal type
const config1: Config = {
theme: 'dark',
colors: { primary: '#3d6fe8' }
}
// config1.theme is now 'light' | 'dark' | 'system', not 'dark'
// with satisfies, the shape is validated but types stay narrow
const config2 = {
theme: 'dark',
colors: { primary: '#3d6fe8', secondary: '#7c3aed' }
} satisfies Config// config2.theme is still 'dark' — the literal type is preserved
// config2.colors.primary is still 'string' — shape is validated
// if you typo a field name, TypeScript still catches it适用场景:对象需要符合某个类型约束,但又希望保留字面量推断时使用,例如主题配置、路由表、组件 variants 映射。
用法示例:
tsconst config = {
theme: 'dark',
colors: { primary: '#3d6fe8' }
} satisfies Config;
// 既能检查字段结构,又不会把 theme 扩宽成联合类型参数与返回:satisfies Type 不是运行时函数,没有返回值;它只在编译期校验左侧表达式是否满足 Type,并尽量保留原表达式的推断类型。
常见坑:不要把它当作类型断言。as Config 可能掩盖错误并强行改类型,satisfies Config 会检查结构但不改变变量自身类型;如果后续想按 Config 传参,仍需确认目标函数参数兼容。

扫码关注「前端达人」,干货代码每周更新