co-IT.eu GmbH Inspire To Change Gregor Woiwode @GregOnNet TypeScript Conditional Types

Agenda Syntax Debugging „Error Handling“ Real World Use Case infer nested types *Automated Testing

HANDS ON Introducing Conditional Types https://github.com/GregOnNet/conditional-types-playground

Conditional types add ternery expressions I N T R O D U C T I O N declare type StringOrNull = T extends string ? string : null;

Benefit I N T R O D U C T I O N More flexible type system Better to maintain

How to read the syntax I N T R O D U C T I O N declare type StringOrNull = T extends string ? string : null; I f t h e g i v e n t y p e T i s a s t r i n g . . . . . . t h a n re t u r n t h e t y p e s t r i n g . . . o t h e r w i s e re t u r n t h e t y p e n u l l .

How to inspect conditional types D E B U G G I N G Since we add logic specifying types more precisely, we need to test it.

Fill in the gaps D E B U G G I N G declare type StringOrNull = T extends ... declare type isString = StringOrNull;

HANDS ON Manual Debugging

Observation D E B U G G I N G declare type isString = StringOrNull; type isStringOrNumber = string | null #

Learning D E B U G G I N G $ Unwanted types need to be omitted explicitly.

Nested ternary expressions CO N D I T I O N A L T Y P E S declare type StringOrNull = T extends string ? string : T extends null ? null : never; . . . o t h e r w i s e i f T i s o f t y p e n u l l . . . r e t u r n t y p e n u l l . . . o t h e r w i s e re t u r n t y p e n ev e r

Error handling for types N E V E R T Y P E % The never type represents the type of values that never occur. https://www.typescriptlang.org/docs/handbook/basic-types.html

Examples N E V E R T Y P E function error( message: string ): never { throw new Error(message); } function infiniteLoop(): never { while (true) { } } T h r o wi n g E r r o r s I n fi n i t e Loop

HANDS ON Apply fix

Congratulations! CO N D I T I O N A L T Y P E S Now, you are familiar with the syntax of conditional types. Now, we will have a look to apply this knowledge in practice.

Yet another story about Redux

No Redux knowledge needed D I S C L A I M E R No worries, we will continue focusing on conditional types.

No Redux bashing D I S C L A I M E R We just have a look at what can be improved. This talk will not mention all the cool benefits coming with Redux.

Before centralized state management... I N F E R T Y P E S C O N D I T I O N A L L Y export class RootComponent { notes$: Observable; constructor(private notes: NotesService) { this.notes$ = this.notes.loadNotes(); } }

Interacting with the Store is hard I N F E R T Y P E S C O N D I T I O N A L L Y export class RootComponent implements OnInit { constructor(private store: Store) {} ngOnInit() { this.store.dispatch(new LoadNotes()); } } From where do I need to import the state? From where do I need to import the action? Why am I not receiving a return value?

Actions need to be maintained I N F E R T Y P E S CO N D I T I O N A L LY export class LoadNotes implements Action { readonly type = NotesActionTypes.LoadNotes; } export class LoadNotesSuccess implements Action { readonly type = NotesActionTypes.LoadNotesSuccess; constructor(public payload: Note[]) {} }

An action is process by a reducer function I N F E R T Y P E S C O N D I T I O N A L L Y switch (action.type) { case NotesActionTypes.LoadNotesSuccess: return setNotes(action.payload, slice); ... function setNotes(notes: Note[], slice: NotesSlice): NotesSlice { return { ...slice, entities: notes }; } Case Reducer

Wouldn‘t it be nice, if ...? I N F E R T Y P E S C O N D I T I O N A L L Y export class RootComponent implements OnInit { notes$: Observable; constructor(private notesFacade: StoreFacade) { this.notes$ = this.notesFacade.all$; } ngOnInit() { this.notesFacade.loadNotes(); } } Creates Action + Dispatches Action Is created dynamically Offers consumable selectors

What needs to be done? I N F E R T Y P E S CO N D I T I O N A L LY Action Type Case Reducer Self Dispatching Action (payload: P) => void | () => void Case Reducer

Low hanging fruit | Automating reducer generation I N F E R T Y P E S CO N D I T I O N A L LY Self Dispatching Action Self Dispatching Action Self Dispatching Action Self Dispatching Action Reducer C o m b i n i n g a ct i o n t y p e & c a s e re d uc e r b u i l d i n g t h e red u cer fu n ct i o n .

The case reducer challange I N F E R T Y P E S CO N D I T I O N A L LY function caseReducerA(state: T, payload: P): T { ... } function caseReducerB(state: T, payload: Q): T { ""... } function caseReducerC(state: T): T { ""... } Or ... Or ...

Self dispatching action I N F E R T Y P E S C O N D I T I O N A L L Y Type Case Reducer

HANDS ON Getting to know infer https://github.com/GregOnNet/conditional-types-playground

Learning I N F E R T extends (state: any, payload: infer TPayload) "=> any ? (payload: TPayload) "=> void : never; i n f e r l e t s y o u e x t r a c t a t y p e b a s e d o n t h e u s a g e o f t h e r e s p e c t i v e m e t h o d

Congratulations! CO N D I T I O N A L T Y P E S Now, you can handle more advanced challenges using conditional types.

NgRx Ducks CO N D I T I O N A L T Y P E S @Ducksify({ initialState: ... }) export class NoteDucks { loadAll = effect('Load Notes‘); @Action('Loading Notes succeeded') set(State: State, notes: Note[]) { return { ...state, entities: notes }; } Case Reducer Type @Component({ ... }) export class RootComponent implements OnInit { constructor(@Inject(NoteDucks) private ducks: Duck) {} ngOnInit() { this.ducks.loadAll.dispatch(); } }

https://npmjs.org/@co-it/ngrx-ducks

Predefined helper types I N F E R T Y P E S C O N D I T I O N A L L Y Exclude Exclude from T those types that are assignable to U. Extract Extract from T those types that are assignable to U. NonNullable Exclude null and undefined from T. ReturnType Obtain the return type of a function type. InstanceType Obtain the instance type of a constructor function type. ConstructorParameters Obtain the parameter types of a constructor function type. https://www.typescriptlang.org/docs/handbook/advanced-types.html

Recapitulation THE END Conditional Types are ternary expressions Conditional Types can be nested Nested types can be extracted with infer Conditional Types add more flexibility Automated tests can be done with ts-snippet

medium.com/@gregor.woiwode @GregOnNet http://speakerdeck.com/gregonnet/conditional-types

Further Reading R E S O U R C E S Conditional types in TypeScript - Artsy Engineering TypeScript 2.8: Conditional Types — Marius Schulz Notes on TypeScript: Conditional Types - DEV Community *+ Conditional types in TypeScript – JavaScript everyday – Medium TypeScript: Create a condition-based subset types – DailyJS – Medium A Look at TypeScript’s Conditional Types TypeScript conditional types real-life example - codewithstyle.info https://www.reddit.com/r/typescript/comments/9n189u/how_are_you_using_conditional_types/