TypeScript Conditional Types co-IT.eu GmbH Inspire To Change 

Dynamic types add a lot of flexibility... 

... but can become a maintenance nightmare 

Static types bring order to the dynamic world. 

Gregor Woiwode medium.com/@gregor.woiwode twiAer.com/@GregOnNet Developer, Trainer & Speaker 

NgRx Ducks Kentan schemaJcs 

Agenda Syntax Debugging Analyse nested objects *Automated Testing 

HANDS ON Introducing Conditional Types hAps://github.com/GregOnNet/condiJonal-types-playground 

How to read the syntax C O N D I T I O N A L T Y P E S 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 r e 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 r e t u r n t h e t y p e n u l l . 

Benefit C O N D I T I O N A L T Y P E S Provide more clarity for API Provide more guidance Type declaraJons scale beAer 

No content

Warning D E B U G G I N G ⚠ CondiJonal types introduce logic to the type system. 

How to inspect condiJonal 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 C O N D I T I O N A L T Y P E S declare type StringOrNull = T extends ... declare type isString = StringOrNull; 

HANDS ON Manual Debugging 

You have the force... 

C O N D I T I O N A L T Y P E S Restrict types Omit unwanted types Pass responsibility to user 

Restrict types D E B U G G I N G type StringOrNull = T extends string ? string : null; Type constraint 

Omit unwanted types C O 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 , r e t u r n t y p e n e v e r 

The never type C O N D I T I O N A L T Y P E S function error( message: string ): never { throw new Error(message); } function infiniteLoop(): never { while (true) { } } T hrowi ng Er rors Infi n i te Loop 

Pass responsibility to user C O 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 : unknown; 

The unknown type C O N D I T I O N A L T Y P E S No idea what the shape of an object looks like „TypeScript, please make sure that I check the object‘s capability at run;me.“ 

HANDS ON never vs. unknown 

You can’t see in anyone... Really? 

Look inside structures inferring types C O N D I T I O N A L T Y P E S type Foo = T extends { a: infer U } ? U : never; I f t h e g i v e n t y p e T h a s t h e p ro p e r t y a n o t i c e i t s t y p e a n d r e t u r n i t . 

infer keyword C O N D I T I O N A L T Y P E S Build APIs based on the shape of your object 

HANDS ON infer 

Predefined helper types I N F E R T Y P E S C O N D I T I O N A L LY 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 

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

medium.com/@gregor.woiwode @GregOnNet co-IT.eu GmbH Inspire to change Thank you for listening. https://speakerdeck.com/gregonnet/minsk-19-12-16 

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