TypeScript Fundamentals

Adding strong typing to large JavaScript apps with TypeScript helps reduce bugs, and keep developers on the performant and maintainable path. We'll look at recent advancements in the JavaScript standard like classes and decorators; some new tools for managing asynchrony; and then dive into TypeScript to add static typing to the mix. In this course, you'll learn everything you need to know to be set up for success when using TypeScript to build a modern web app.

TypeScript Fundamentals

Applying Types

Now that we've bolstered our knowledge of some less-frequently-used areas of JavaScript, we'll start to add types to the mix.

  • 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

    Type annotations, which can be used anywhere a value is declared, passed or returned, are the basis for some fantastic editor features and static code analysis. We'll look at some of the most basic type annotation use cases, and demonstrate how those ugly areas of JavaScript quickly begin to go away.

  • 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

    Ambient types allow us to provide type information for any JavaScript code that's included in our project.

  • Applying TypesEXERCISE: Adding types for an existing JS library

    Use our knowledge of the standard setup for *.d.ts files to supply type information for our color conversion library.

  • Applying TypesCoffee Break

    Coffee Break

  • Applying TypesOptionals

    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.

  • Applying TypesInterfaces

    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 implements keyword.

  • 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.

  • Applying TypesLunch

    Break for lunch

  • Applying TypesGenerics

    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.