ts-ruhrjs-19

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 twitter.com/@GregOnNet Developer, Trainer & Speaker
6. NgRx Ducks Kentan schematics
7. Agenda Syntax Debugging Infer nested types *Automated Testing
8. HANDS ON Introducing Conditional Types https://github.com/GregOnNet/conditional-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 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 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 declarations scale better
11. Warning D E B U G G I N G ⚠ Conditional types introduce logic to the type system.
12. 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.
13. 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>;
14. HANDS ON Manual Debugging
15. You have the force...
16. CO N D I T I O N A L T Y P E S $ Restrict types % Omit unwanted types & Pass responsibility to user
17. $ Restrict types D E B U G G I N G type StringOrNull<T extends string | null> = T extends string ? string : null; Type constraint
18. % 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
19. 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 h r o wi n g E r r o r s I n fi n i t e Loop
20. 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
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 runtime.“
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 r o p e r t y a n o t i c e i s t 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 L Y 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. 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
30. medium.com/@gregor.woiwode @GregOnNet co-IT.eu GmbH Inspire to change Thank you for listening. http://speakerdeck.com/gregonnet/ts-ruhrjs-19
31. 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/