Applying TypesWelcome & Solution to Homework
We'll go through the agenda for today and the solution to last night's homework exercise.
Applying TypesType Annotations
Applying TypesEXERCISE: Typed Color Picker
Add type annotations to our color picker. Your solution should result in no warnings emitted by the TypeScript compiler.
Applying TypesAmbient Types
Applying TypesEXERCISE: Adding types for an existing JS library
Use our knowledge of the standard setup for
*.d.tsfiles to supply type information for our color conversion library.
Applying TypesCoffee Break
Adding type annotations to your code can start to apply some unexpected constrains -- one of which is that "optional" arguments must be explicitly defined as such. We'll look at how this is done in TypeScript, and how to decide between "optionals" or arguments with default values when designing functions.
Applying TypesEXERCISE: Making our color picker more robust
Using our knowledge of optionals and default parameter values, make the provided edge and corner test cases pass with no TypeScript compiler warnings.
Interfaces allow us to go way beyond the default basic types that we're provided with, and to define complex types of our own. We'll look at how interfaces can be used for "structural typing" and how we can implement multiple interfaces in an ES2015 class using the
Applying TypesEXERCISE: Structural typing with interfaces
Use an interface to represent a color as an object with r, g, and b channels. Update the rest of your code so that all tests pass with this new color representation, with no TypeScript compiler warnings or errors.
Break for lunch
Generics allow us to define classes or functions in ways that are type-agnostic, meaning that they work across a broad range of types, while still providing the benefits of type safety. We'll look at how this works, and walk through some common use cases.
Applying TypesEXERCISE: Generics
Solve the provided exercise so that all tests pass, and the TypeScript compiler emits no warnings or errors.
Applying TypesType Guards, Coersion, Casting and Assertion
There are several ways we can guard against and convert values to get the type we need, but these language features are a little different than what you may be used to due to TypeScript not having any kind of runtime reflection API. We'll look at the broad range of options available, and then narrow down to best practices that will serve you well, even in very complex applications.
Applying TypesWorking with TSX
TypeScript can be used with JSX very easily, but there are certain types of TypeScript syntax that interfere with JSX parsing. We'll identify these issues, and provide some TSX-friendly workarounds that'll let us get the same things done, even in React components.