DEV Community

Benjamin Arambide
Benjamin Arambide

Posted on

Understanding TypeScript's `satisfies` vs `as`

#angular #typescript

In TypeScript, the satisfies operator is a safer, more precise alternative to as when you want to ensure a value conforms to a type without losing type inference.

Key Differences

Feature as satisfies
Type checking Not enforced Enforced
Keeps extra properties No Yes
Narrows const types No Yes
Safer for configuration objects No Yes

1. Keeping Extra Properties

Using as (unsafe): 

type Person = {
  name: string;
  age: number;
};

const user = {
  name: 'Alice',
  age: 30,
  email: '[email protected]',
} as Person; // No error, but `email` is lost from the type
Enter fullscreen mode Exit fullscreen mode

Using satisfies (safe): 

const user = {
  name: 'Alice',
  age: 30,
  email: '[email protected]',
} satisfies Person;
// TS checks that name and age exist and retains `email` in the inferred type
Enter fullscreen mode Exit fullscreen mode

2. Narrowing const Types

Using as: 

const colors = ['red', 'green', 'blue'] as string[];
Enter fullscreen mode Exit fullscreen mode

Using satisfies: 

const colors = ['red', 'green', 'blue'] satisfies readonly ['red', 'green', 'blue'];
Enter fullscreen mode Exit fullscreen mode

3. Ensuring Correct Object Shape

Using as (can lie): 

type Config = { port: number };

const config = {
  port: '3000',
} as Config; // No error, even though it's wrong!
Enter fullscreen mode Exit fullscreen mode

Using satisfies (type checked): 

const config = {
  port: '3000',
} satisfies Config; // Type error: 'string' is not assignable to 'number'
Enter fullscreen mode Exit fullscreen mode

4. With Utility Types 

type Route = {
  path: string;
  name: string;
};

const routes = {
  home: { path: '/', name: 'Home' },
  about: { path: '/about', name: 'About' },
} satisfies Record<string, Route>;
Enter fullscreen mode Exit fullscreen mode

Conclusion

Use satisfies when you want strong type validation without losing inferred details. It's ideal for configuration objects, constant arrays,

Top comments (3)

Collapse
 
seandinan profile image
Sean Dinan •

Would you say there's any benefit to using satisfies over a type assignment (or whatever its called...)? For example:

const config: Config = {
  port: 3000,
};
Enter fullscreen mode Exit fullscreen mode

vs.

const config = {
  port: 3000,
} satisfies Config;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

pretty cool seeing type safety get pushed like this tbh - makes me rethink some shortcuts i've taken before
you ever catch something big just because you swapped over to stricter checks

Collapse
 
seandinan profile image
Sean Dinan •

I've noticed that bug reports have dropped to almost zero since we switched from JS to TS. Enough so that I double-checked that our bug tracker was configured correctly after a couple months.

Using well-defined & strict typings have been the major differentiator I think. Not to mention how much more self-documenting it's been.