Blog

We write about Ember.js, Ruby on Rails as well as Elixir and Phoenix.

Front End Development

TypeScript Fundamentals

Adding strong typing to large JavaScript apps with TypeScript helps reduce bugs, and keep developers on the performant and maintainable path. In this course, you’ll learn everything you need to know to be successful when using TypeScript to build web apps with React, Ember.js or Angular 2.

1
Module 1 Duration: 120 minutes

1 — Why TypeScript?

Adding types to JavaScript in a way that’s convenient requires considerable finesse. We’ll walk through how TypeScript’s compiler works, and the benefits that teams who use the language will enjoy.

Agenda
Why TypeScript? Duration: 15 minutes
9:00
Welcome and Setup

We’ll introduce ourselves and meet each other, and ensure everyone is properly set up for the course.

Why TypeScript? Duration: 30 minutes
9:15
Strange JavaScript & The Benefits of Types

JavaScript has some quirky characteristics that can lead to considerable confusion, particularly from those who come from a background using a strongly-typed language like C++ or Java.

Why TypeScript? Duration: 30 minutes
9:45
Using the TypeScript Compiler

The Typescript compiler is a robust tool for turning your code into JavaScript. We’ll look at how the tool is typically used, and the vast array of important configuration parameters we can tweak to get just what we need.

Why TypeScript? Duration: 30 minutes
10:15
EXERCISE: Compiling TypeScript into JavaScript

We’ll use our knowledge of the tsc command to compile some TypeScript files into appropriate JavaScript code.

Why TypeScript? Duration: 15 minutes
10:45
Coffee Break

Coffee Break

2
Module 2 Duration: 420 minutes

2 — Today's JavaScript is Yesterday's TypeScript

Starting with the ES2015 revision of the JavaScript language standard, it has begun to adopt many well-loved features of TypeScript. Because of this, it’s common to see some things that the JavaScript community would consider “experimental” used widely in TypeScript programs. We’ll look at some of these areas in detail.

Agenda
Today's JavaScript is Yesterday's TypeScript Duration: 30 minutes
11:00
Modules

Modules have been a first class part of TypeScript since before people started using them widely in JavaScript. We’ll look at how to stitch encapsulated and modular pieces of code together, and cover some best practices regarding namespaces, named and default exports, and importing.

Today's JavaScript is Yesterday's TypeScript Duration: 30 minutes
11:30
EXERCISE: Refactor into modules

Using our best practices for modules, refactor the code for this exercise so that it’s separated into distinct modules, and more easily unit testable.

Today's JavaScript is Yesterday's TypeScript Duration: 30 minutes
12:00
Classes and Prototypes

Classes are an important abstraction built on top of JavaScript’s prototypal inheritance, which reduces the propensity for developers to tread into a counterintuitive territory. TypeScript makes heavy use of the concept of a JavaScript class and adds some unique features that you won’t see in the JS world.

Today's JavaScript is Yesterday's TypeScript Duration: 30 minutes
12:30
EXERCISE: Color picker: class edition

Implement a color picker using JavaScript classes.

Today's JavaScript is Yesterday's TypeScript Duration: 60 minutes
13:00
Lunch

Break for lunch

Today's JavaScript is Yesterday's TypeScript Duration: 30 minutes
14:00
Decorators

Decorators allow us to modify and annotate things like classes, functions and values in an easy and declarative way. While they’re starting to look like promising additions to the JavaScript language spec, you’ll see them in TypeScript all the time.

Today's JavaScript is Yesterday's TypeScript Duration: 30 minutes
14:30
EXERCISE: Memoized functions

Memoization is a technique that can be used with pure functions, where output values are “remembered” for an input argument(s). Thus, re-invoking the function with the same arguments will return the same “remembered” result. We’ll implement a @memoize function decorator so that we can apply this technique easily and cleanly in our code.

Today's JavaScript is Yesterday's TypeScript Duration: 20 minutes
15:30
Enhanced Objects & Property Descriptors

Enhanced object literals allow us to do common things like add methods and properties more clearly and easily than ever before. We’ll look at how object literals have evolved since the ES5 JavaScript standard, and then explore additional features that TypeScript bring to the party.

Today's JavaScript is Yesterday's TypeScript Duration: 20 minutes
15:50
EXERCISE: Getter/Setter based properties

Using a property descriptor, define a property on an object that’s derived from other values. We should be able to get and set this property, just as if it was value based. For the getter and setter you define, you should take care of keeping all dependencies properly in sync.

Today's JavaScript is Yesterday's TypeScript Duration: 40 minutes
16:10
Iterators and Generators

Several core JavaScript objects are “Iterables”, meaning they can provide an Iterator: special objects that maintain iteration state and can be asked for the next item in a sequence. Generator functions are simply functions that return iterators. We’ll look at these concepts in depth, and illustrate how they serve as the foundation for many higher-level JavaScript language features.

Today's JavaScript is Yesterday's TypeScript Duration: 25 minutes
16:50
Async & Await

Async and await are starting to creep into the JavaScript world, but these keywords have been broadly used in TypeScript programs for many years. We’ll learn about how these new keywords allow us to write async code that looks almost like the synchronous (blocking) equivalent!

Today's JavaScript is Yesterday's TypeScript Duration: 15 minutes
17:15
Recap & Wrap Up

We’ll recap what we’ve covered today, and set our sights on a homework assignment and tomorrow’s agenda

Today's JavaScript is Yesterday's TypeScript Duration: 60 minutes
18:30
HOMEWORK: Async Task Runner

One of the most powerful things we can build on top of generator functions is an “async task runner”. You have an “autocomplete” use case already set up, that involves running several async operations in sequence.

3
Module 3 Duration: 315 minutes

3 — 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.

Agenda
Applying Types Duration: 20 minutes
9:00
Welcome & Solution to Homework

We’ll go through the agenda for today and the solution to last night’s homework exercise.

Applying Types Duration: 20 minutes
9:20
Type 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 Types Duration: 20 minutes
9:40
EXERCISE: Typed Color Picker

Add type annotations to our color picker. Your solution should result in no warnings emitted by the TypeScript compiler.

Applying Types Duration: 20 minutes
10:00
Ambient Types

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

Applying Types Duration: 20 minutes
10:20
EXERCISE: 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 Types Duration: 10 minutes
10:40
Coffee Break

Coffee Break

Applying Types Duration: 20 minutes
10:50
Optionals

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 Types Duration: 20 minutes
11:10
EXERCISE: 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 Types Duration: 20 minutes
11:30
Interfaces

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 Types Duration: 20 minutes
11:50
EXERCISE: 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 Types Duration: 50 minutes
12:10
Lunch

Break for lunch

Applying Types Duration: 20 minutes
13:00
Generics

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 Types Duration: 20 minutes
13:20
EXERCISE: Generics

Solve the provided exercise so that all tests pass, and the TypeScript compiler emits no warnings or errors.

Applying Types Duration: 20 minutes
13:40
Type 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 Types Duration: 15 minutes
14:00
Working 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.

4
Module 4 Duration: 175 minutes

4 — Beyond JavaScript

We are essentially using “modern JavaScript with types”, and we will start adding in other language features that TypeScript brings to the table.

Agenda
Beyond JavaScript Duration: 15 minutes
14:15
Access Modifiers

The public, private and protected access modifiers allow us to control what our classes expose down their inheritance chain, and out to the rest of the world. We’ll study how structural type matching is affected by these modifiers, and provide some guidance and best practices to strike the appropriate balance between safety and flexibility.

Beyond JavaScript Duration: 15 minutes
14:30
Readonly and Static

The readonly and static keywords further enhance what we can do with JavaScript classes.

Beyond JavaScript Duration: 20 minutes
14:45
EXERCISE: Access modifiers

Solve the provided exercise, such that all tests pass, and the TypeScript compiler emits no warnings or errors

Beyond JavaScript Duration: 20 minutes
15:05
Enums

Enums allow us to group a collection of related values together. TypeScript provides us with a robust and full-featured solution in this area, with some options that let us strike the balance between full-featured and lightweight.

Beyond JavaScript Duration: 20 minutes
15:25
Mixins, Abstract Classes and Interfaces

When it comes to inheritance, we have many options to choose from. We’ll look at the appropriateness of abstract classes, interfaces, and mixins for various use cases, highlighting the pros and cons of each.

Beyond JavaScript Duration: 20 minutes
15:45
EXERCISE: Data Modeling

Solve the provided exercise, such that all tests pass, and the TypeScript compiler emits no warnings or errors

Beyond JavaScript Duration: 15 minutes
16:05
Code Style

Odds are, you’re probably used to writing plain JavaScript. We’ll go over some code style best practices that you may want to add to your tslint typescript linting configuration.

Beyond JavaScript Duration: 20 minutes
16:20
Using TypeScript with React

React components provide us with some excellent opportunities to reap the benefits of what we’ve learned so far. We’ll review React’s DefinitelyTyped library type descriptions and see how much our editor helps us, compared to what we’d see were we using “vanilla JavaScript”.

Beyond JavaScript Duration: 30 minutes
16:40
EXERCISE: A typed react component

Rebuild the UI component for our color picker, using interfaces for the component state and props.

5
Module 5 Duration: 50 minutes

5 — Migrating to TypeScript

As Typescript works side-by-side with JavaScript easily and conveniently, the overhead to start using Typescript is very low. We’ll discuss some topics related to moving a conventional JavaScript app to TypeScript, while striking the balance between capability and productivity.

Agenda
Migrating to TypeScript Duration: 15 minutes
17:10
Adding Types Incrementally

One of the core requirement of TypeScript is that it must be conveniently usable side-by-side with regular JavaScript. We’ll look at what it would take to add TypeScript to an existing project, and then incrementally add type information over time.

Migrating to TypeScript Duration: 20 minutes
17:25
Using TypeScript with Babel

You will often use TypeScript and Babel together. Because both of these libraries are responsible for taking something other than browser-friendly JavaScript and transforming it to ES5, there can be some strange behavior depending on how things are set up. We’ll provide some guidelines for a setup that maximizes the benefit you get from both of these tools while minimizing confusion.

Migrating to TypeScript Duration: 15 minutes
17:45
Wrap up and recap

We’ll recap everything we’ve covered today, and provide some recommendations for further reading and learning.

Do you Have a Project in Mind?