Busy Typescript Developer's Guide to the Typescript Type System

Typescript is a strongly typed language that compiles to Javascript. The key difference between Typescript and Javascript is the Type System, which enables developers to write type-safe programs with fewer errors and bugs. In this session, we will look to understand the Typescripts Type System and the features and tooling Typescript provides us to write more concrete types.

Transcript

1. 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
2. • Javascript Superset • Strongly Typed • Has no runtime • Provides Additional Tooling e.g. language server What is Typescript?
3. Types help Declare your Intentions • Tell Typescript what are you are building • Helps Typescript know how to Type check your code
4. 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
5. 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
6. Type Narrowing • Move an imprecise type to a more precise types • Improve Type Safety
7. Ways to Narrow Types Type Guards Truthiness Narrowing instanceof for Narrowing in Operator for Narrowing
8. 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.
9. 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
10. 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
11. • 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.
12. 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
13. Utility Types Create Types from Existing Types Partial<Type> Pick<Type, Keys> Omit<Type, Keys> Required<Type> ReadOnly<Type>
14. 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
15. Q & A
16. Thank You Follow me on twitter: @mwycliffe_dev