Busy Typescript Developer's Guide to the Typescript Type System Getting the most out of the Typescript Type System by Maina Wycliffe @mwycliffe_dev mainawycliffe.dev

● Javascript Superset ● Strongly Typed ● Has no runtime ● Provides Additional Tooling e.g. language server What is Typescript?

Types help Declare your Intentions ● Tell Typescript what are you are building ● Helps Typescript know how to Type check your code

Types are a set of value - Number - all possible numbers: 1,2,0, -2, 1.2, etc. - String - all possible string combinations e.g. Angular, Typescript, Foo, Bar, etc. - Boolean - True or False - Arrays - Array of numbers, string, objects, etc. - Any - could be all possible values, no restrictions

The same applies to unions Unions allow us to combine types Indicates a variable can have one of those types Possible values are the ones declared in the union and not anything else

Type Narrowing ● Move an imprecise type to a more precise types ● Improve Type Safety

Ways to Narrow Types Type Guards Truthiness Narrowing instanceof for Narrowing in Operator for Narrowing

Ways to Narrow Types Discriminated Unions ● Use a common field to narrow types ● The common field needs to be literal type ● Common use case - events types, shapes, etc.

Ways to Narrow Types Custom Type Guards in Typescript ● A function that returns a predicate ● A predicate takes the form parameterName is Type ● The function returns true or false ● Make sure to do an exhaustive check before returning

Unknown vs Any - Any overrides Type Checking - Any is used for compatibility - Unknown is for variables whose Type is unknown - Use unknown instead of Any - Unknown cannot be used without Type Narrowing

● Indicates that the values will never occur ● For example: The Never Type 1. A function that never returns 2. variables also acquire the type never when narrowed by any type guards that can never be true.

Template Literal Types in TypeScript ● Literal types allow us to define types that are more specific ● Build new types using a template just like template literal strings ● Can expand to many different string using Unions

Utility Types Create Types from Existing Types Partial Pick Omit Required ReadOnly

Generics ● Allow creation of components that are reusable across multiple components ● Avoids using of any type ● Uses Type Variable to pass the type used to the component

Q & A

Thank You Follow me on twitter: @mwycliffe_dev