Conform a Derived Type Without Losing Its Literal Values

Deriving vs Declaring is key to getting the most inference out of your types with as few lines of code as possible.

But sometimes, you want to ensure that some code conforms to a type without losing its literal values.

Enter satisfies()() 👀

Discuss on Twitter

Transcript

0:00 A golden rule of effective TypeScript is you should always try and derive types instead of declare types. Here, we're creating this user actions array, where we already typed the enum for the type of actions that the user can do, and the type of role that you need in order to do them.

0:16 I think there's a better way to do this. Here, we've started obeying the golden rule, which is we're now declaring the user actions as a const, which means they're not going to change. There's a static configuration. We're now deriving the action and the role from the data structure that we have already.

0:34 There's a problem here, though. With user actions declared the way it is, it's not actually enforced what type this configuration should be. This type can technically be anything, and if I accidentally add this as a role here, then we're going to get this obscure type error down at the bottom here.

0:48 The issue is, if I add a type annotation up here saying what sort of vague type I want it to be, we first of all get an error up here, but we also get errors down here in that they're now typed as string instead of the actual const values that should be there.

1:03 We can do something really smart to cover this. I've created this satisfies function here. What this allows me to do is pass in a generic to say, "This is the kind of thing I want to accept." Then, when I actually call the function, it allows me to pass in a narrow version of that generic.

1:20 What it's going to do is it's not going to return a number here. It's going to return two, but it enforces that two is at least a number. For instance, if I pass this in here, then it's saying it's not assignable to type number. What this means is that I get the best of both worlds. I get to vaguely say what I want in this slot, and then also get the narrow inference here.

1:41 With the config that we defined before, we can say this very loose shape of generic here, and then we still get all of the deep inference right there. If I delete one of these things, it's going to give me a type error, because I didn't add the roles property.

More Tips

Play Type Predicates

Type Predicates

1 min

Play TypeScript 5.1 Beta is OUT!

TypeScript 5.1 Beta is OUT!

2 mins

Play How to Name your Types

How to Name your Types

4 mins

Play Don't use return types, unless...

Don't use return types, unless...

4 mins

Play TypeScript 5.0 Beta Deep Dive

TypeScript 5.0 Beta Deep Dive

6 mins

Play Avoid unexpected behavior of React’s useState

Avoid unexpected behavior of React’s useState

1 min

Play Understand assignability in TypeScript

Understand assignability in TypeScript

2 mins

Play Compare function overloads and generics

Compare function overloads and generics

1 min

Play Use infer in combination with string literals to manipulate keys of objects

Use infer in combination with string literals to manipulate keys of objects

1 min

Play Access deeper parts of objects and arrays

Access deeper parts of objects and arrays

1 min

Play Ensure that all call sites must be given value

Ensure that all call sites must be given value

1 min

Play Understand how TypeScript infers literal types

Understand how TypeScript infers literal types

1 min

Play Get a TypeScript package ready for release to NPM in under 2 minutes

Get a TypeScript package ready for release to NPM in under 2 minutes

1 min

Play Use assertion functions inside classes

Use assertion functions inside classes

1 min

Play Assign local variables to default generic slots to dry up your code and improve performance

Assign local variables to default generic slots to dry up your code and improve performance

2 mins

Play Know when to use generics

Know when to use generics

2 mins

Play Map over a union type

Map over a union type

1 min

Play Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

1 min

Play Use generics to dynamically specify the number, and type, of arguments to functions

Use generics to dynamically specify the number, and type, of arguments to functions

1 min

Play Use 'declare global' to allow types to cross module boundaries

Use 'declare global' to allow types to cross module boundaries

2 mins

Play Turn a module into a type

Turn a module into a type

2 mins

Play Create autocomplete helper which allows for arbitrary values

Create autocomplete helper which allows for arbitrary values

2 mins

Play Use deep partials to help with mocking an entity

Use deep partials to help with mocking an entity

1 min

Play Throw detailed error messages for type checks

Throw detailed error messages for type checks

1 min

Play Create a 'key remover' function which can process any generic object

Create a 'key remover' function which can process any generic object

1 min

Play Use generics in React to make dynamic and flexible components

Use generics in React to make dynamic and flexible components

1 min

Play Create your own 'objectKeys' function using generics and the 'keyof' operator

Create your own 'objectKeys' function using generics and the 'keyof' operator

1 min

Play Write your own 'PropsFrom' helper to extract props from any React component

Write your own 'PropsFrom' helper to extract props from any React component

1 min

Play Use 'extends' keyword to narrow the value of a generic

Use 'extends' keyword to narrow the value of a generic

1 min

Play Use function overloads and generics to type a compose function

Use function overloads and generics to type a compose function

2 mins

Play Decode URL search params at the type level with ts-toolbelt

Decode URL search params at the type level with ts-toolbelt

2 mins

Play Use 'in' operator to transform a union to another union

Use 'in' operator to transform a union to another union

2 mins

Play Derive a union type from an object

Derive a union type from an object

2 mins