Revealing the TypeScript Magic behind NgRx APIs

Ever wondered how NgRx integrates type-safety into its APIs? Marko from the NgRx team shows advanced TypeScript usage within the framework.

Support:
Support my content through GitHub sponsors:

Show Notes
00:00:00 - Intros
00:04:22 - Recreating createFeature
00:24:32 - Recreating createActionGroup
00:42:32 - Recreating createEffect

Links:

[michaelfaith]

Amazing demo. It was great to see how you built those complex types up.

[DenisBendrikov]

Thanks Marko for a very well done demo! And thanks Brandon for spreading such a great content

[aram]

Awesome awesome content. Thanks Marko and Brandon. It was a darn good lesson in TS. If I may make a suggestion for an upcoming episode: createSelector - a walk through selectors, memoization, parameterized selectors, releasing memoization, efective combining. Thanks again!

[PauloSantos-yutn]

Very nice content. Thanks for sharing.

[JeffryGonzalezHt]

Came for the createFeature wizardry (not disappointed!) but the thing at the end with the function overloads was hotness. Penny finally dropped for me on that. Thank you so much!

[arthurfedotiew]

Sprinkled some magic :) From readability perspective, some of the string literal manipulations might be better off as separate helper type like:

type StateKeys = `select${Capitalize<keyof State>}`;
type ExtractKey<K> = K extends `select${infer R}` ? Lowercase<R> : never;

type Selectors = {
[K in StateKeys]: State[ExtractKey<K>];
};