minsk-19-12-16

Angular Meetup Minsk: https://www.meetup.com/de-DE/Angular-Minsk/events/266987055/

Transcript

1. TypeScript Conditional Types co-IT.eu GmbH Inspire To Change
2. Dynamic types add a lot of flexibility...
3. ... but can become a maintenance nightmare
4. Static types bring order to the dynamic world.
5. Gregor Woiwode medium.com/@gregor.woiwode twiAer.com/@GregOnNet Developer, Trainer & Speaker
6. NgRx Ducks Kentan schemaJcs
7. Agenda Syntax Debugging Analyse nested objects *Automated Testing
8. HANDS ON Introducing Conditional Types hAps://github.com/GregOnNet/condiJonal-types-playground
9. 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> = 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 .
10. 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
12. Warning D E B U G G I N G ⚠ CondiJonal types introduce logic to the type system.
13. 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.
14. Fill in the gaps C O N D I T I O N A L T Y P E S declare type StringOrNull<T> = T extends ... declare type isString = StringOrNull<string>;
15. HANDS ON Manual Debugging
16. You have the force...
17. 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
18. Restrict types D E B U G G I N G type StringOrNull<T extends string | null> = T extends string ? string : null; Type constraint
19. Omit unwanted types C O N D I T I O N A L T Y P E S declare type StringOrNull<T> = 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
20. 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
21. Pass responsibility to user C O N D I T I O N A L T Y P E S declare type StringOrNull<T> = T extends string ? string : T extends null ? null : unknown;
22. 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.“
23. HANDS ON never vs. unknown
24. You can’t see in anyone... Really?
25. Look inside structures inferring types C O N D I T I O N A L T Y P E S type Foo<T> = 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 .
26. 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
27. HANDS ON infer
28. 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<T, U> Exclude from T those types that are assignable to U. Extract<T, U> Extract from T those types that are assignable to U. NonNullable<T> Exclude null and undefined from T. ReturnType<T> Obtain the return type of a function type. InstanceType<T> Obtain the instance type of a constructor function type. ConstructorParameters<T> Obtain the parameter types of a constructor function type. https://www.typescriptlang.org/docs/handbook/advanced-types.html
29. 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
30. medium.com/@gregor.woiwode @GregOnNet co-IT.eu GmbH Inspire to change Thank you for listening. https://speakerdeck.com/gregonnet/minsk-19-12-16
31. 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/