Can typescript definitions survive even at runtime?

Transcript

1. Can typescript definitions survive even at runtime? Luca Del Puppo
2. ➔ Reason Why? ➔ Common Mistakes ➔ strict mode ➔ any vs unknown Agenda Can typescript definitions survive even at runtime? Agenda ➔ Guards ➔ Validation ➔ Conclusion
3. Ego Slide Luca Del Puppo (aka Puppo) Full-Stack Developer in Flowing @puppo92 https://www.linkedin.com/in/lucadelpuppo/ luca@delpuppo.net
4. WE ❤ REMOTE WORKING Milan, Rome, Turin, Treviso, Bologna, Ancona, Catania and wherever you want! How we are ⮕ https://www.flowing.it/playbook/
5. Frontend Developer, Backend Developer, UX Designer, AWS Cloud Engineer 📣 WE ARE HIRING! 📣
6. Reason Why? 1
10. Common Mistakes 2
11. Common Mistakes ➔ To think that typescript keeps always the code type-safe ➔ To forget that types disappears at runtime ➔ To use any if checking types is too hard or boring ➔ Don't know or forget the basics of js ➔ Don’t put a validation layer between the application and the externals Can typescript definitions survive even at runtime? Common Mistakes
13. The basic ➔ Use types, interfaces or class to describe your object ➔ Describe at the best your types, use undefined and null if they are necessary ➔ Create the right signature of your methods (don’t forget the result type) ➔ Prefer immutable types (readonly, ReadOnly, ReadOnlyArray) Can typescript definitions survive even at runtime?
14. strict mode 3
15. Strict mode ➔ It forces us to use the type-checker as a friend ➔ It prevents wrong checks or wrong accesses to the objects ➔ It forces us to write the code with the correct signatures ➔ It helps to find the errors at compile time instead of runtime Can typescript definitions survive even at runtime? Strict Mode
17. any vs unknown 4
18. any
19. unknown
20. Any vs Unknown let myAny: any = true myAny.trim().reverse().split(','); let myAnyNumeric: number = myAny; const sum = myAnyNumeric + 3; let myUnknown: unknown = true; myUnknown.trim(); // Property 'trim' does not exist on type 'unknown'.ts(2339) let myAnyNumeric: number = myUnknown; // Type 'unknown' is not assignable to type 'number'.ts(2322) if (typeof myUnknown === 'string') myUnknown.trim(); if (typeof myUnknown === "number") { let myAnyNumeric: number = myUnknown; const sum = myAnyNumeric + 3; }
21. Eslint ➔ eslint-config-airbnb-typescript ➔ @typescript-eslint/recommended Can typescript definitions survive even at runtime? Strict Mode
22. _
23. Guards 5
24. “Type guards are functions used to check if an object respect a specific type” Their form is Type Guard Can typescript definitions survive even at runtime? Guards declare function name(data: unknow): data is Type;
25. “Assert functions are functions used to check if an object respect a specific type otherwise they throw an error” Their form is Asser Functions Can typescript definitions survive even at runtime? Guards declare function name(data: unknow): asserts data is Type;
26. Type Guards vs Assert Functions type Circle = { type: 'circle'; radius: number; } type Square = { type: 'square'; size: number; } type Shape = Circle | Square; function isCircle(shape: Shape): shape is Circle { return shape.type === 'circle'; } function isSquare(shape: Shape): shape is Square { return shape.type === 'square'; } type Circle = { type: 'circle'; radius: number; } type Square = { type: 'square'; size: number; } type Shape = Circle | Square; function ensureCircle(shape: Shape): asserts shape is Circle { if (shape.type !== 'circle') throw new Error('Not a circle'); } function ensureSquare(shape: Shape): asserts shape is Square { if (shape.type !== 'square') throw new Error('Not a square'); }
27. Validations 6
28. “In this case using the Validation word I want to focus you to the layer between your application and the external” • Data from API • Data from socket • All the data received from the external of your application Validation Can typescript definitions survive even at runtime? Validation
29. - Prevent wrong types at runtime - Keep your code safer like during the development mode - Help you to find quickly if the APIs are changed - Prevent strange mistakes - You are sure that the API results are exactly what you expected Goal Can typescript definitions survive even at runtime? Validation
30. Validation library ➔ Zod https://github.com/colinhacks/zod ➔ @sinclair/typebox https://github.com/sinclairzx81/typebox ➔ jsonschema https://github.com/tdegrunt/jsonschema ➔ io-ts https://github.com/gcanti/io-ts Can typescript definitions survive even at runtime? Validation
31. _
32. Conclusioni
33. code MUG-2022-ts-best-practices code in action https://puppo.github.io/MUG-2022-ts-best-practices/ dev.to series https://dev.to/this-is-learning/series/11213
34. Thanks! Thatʼs All! Luca Del Puppo @puppo92 https://www.linkedin.com/in/lucadelpuppo/ luca@delpuppo.net