as vs satisfies
as tells the compiler to trust your type and check nothing, while satisfies checks that the value matches the type and keeps the exact type inferred from the value.
Side-by-side comparison
#Checks that the value matches the type
- Asercja typu (as)
- No
- satisfies
- Yes
Type of the resulting variable
- Asercja typu (as)
- The given type (
Type) - satisfies
- The type inferred from the value
A typo or a missing field
- Asercja typu (as)
- Won’t be reported
- satisfies
- Will be reported by the compiler
Keeps literals and specific keys
- Asercja typu (as)
- No
- satisfies
- Yes
Safety
- Asercja typu (as)
- Low, easy to fool the compiler
- satisfies
- High, the compiler still watches the shape
Typical use
- Asercja typu (as)
- A DOM element, data already checked earlier
- satisfies
- Configuration objects, color maps, routes
Example
#type Palette = Record<string, string>
const broken = { accent: '#a78bfa' } as { accent: number }
console.log(typeof broken.accent)
const safe = { accent: '#a78bfa' } satisfies Palette
console.log(safe.accent.toUpperCase())string #A78BFA
Definition and usage
#Both syntaxes pair an expression with a type, and you write both after the value: value as Type and value satisfies Type. In both cases nothing changes in the running program, because these are compile-time mechanisms.
The difference is in what the compiler does. as checks nothing: it swaps the expression’s type for the given one, even if the value doesn’t match it at all, and the error only surfaces at runtime. satisfies checks that the value matches the type, and reports an error for a typo or a missing field, but leaves the type inferred from the value itself, not from the annotation. Thanks to that, after satisfies you still see the exact literals and keys of the object, while after as you only see the given type.
Leave as for situations where you know more than the compiler, for example a DOM element after querySelector. Where you want the shape of a configuration object, a color map, or a set of routes checked, while also keeping precise value types, choose satisfies.
Syntax
#const a = expression as Type
const b = expression satisfies TypeMore examples
#type Config = { fontSize: number }
const wrong = { fontsize: 16 } as Config
console.log(wrong.fontSize)undefined
The typo fontsize instead of fontSize wasn’t reported, because as only overwrites the type. In the running program, the field fontSize simply doesn’t exist.
type Config = { fontSize: number }
const correct = { fontsize: 16 } satisfies Config
// Error: Object literal may only specify known properties, and 'fontsize' does not exist in type 'Config'.Good practices
#- Treat
asas a last resort, especially with data from outside. If you can, check the shape with a type guard instead. - After
satisfies, the variable has the type inferred from the value, not from the annotation, so the editor’s suggestions show the exact keys and literals. - A double assertion
as unknown as Tis a sign that something is off with the types.satisfiesnever requires a workaround like that.
Related entries
#Spotted a mistake or missing an example? Write to us.