Can typescript definitions survive even at runtime? Luca Del Puppo 

➔ Reason Why? ➔ Common Mistakes ➔ strict mode ➔ any vs unknown Agenda Can typescript definitions survive even at runtime? Agenda ➔ Guards ➔ Validation ➔ Conclusion 

Ego Slide Luca Del Puppo (aka Puppo) Full-Stack Developer in Flowing @puppo92 https://www.linkedin.com/in/lucadelpuppo/ [email protected] 

WE ❤ REMOTE WORKING Milan, Rome, Turin, Treviso, Bologna, Ancona, Catania and wherever you want! How we are ⮕ https://www.flowing.it/playbook/ 

Frontend Developer, Backend Developer, UX Designer, AWS Cloud Engineer 📣 WE ARE HIRING! 📣 

Reason Why? 1 

No content

No content

No content

Common Mistakes 2 

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 

No content

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? 

strict mode 3 

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 

No content

any vs unknown 4 

any 

unknown 

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; } 

Eslint ➔ eslint-config-airbnb-typescript ➔ @typescript-eslint/recommended Can typescript definitions survive even at runtime? Strict Mode 

_ 

Guards 5 

“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; 

“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; 

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'); } 

Validations 6 

“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 

- 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 

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 

_ 

Conclusioni 

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 

Thanks! Thatʼs All! Luca Del Puppo @puppo92 https://www.linkedin.com/in/lucadelpuppo/ [email protected]