Learn TypeScript w/ Mike North

Intro

June 08, 2021

Table of Contents

About the Instructor

#1 Goal for this course

By the end of this course, I want you to have a rock solid mental model, that will serve you well for years

What is TypeScript?

TypeScript is an open source, typed syntactic superset of JavaScript

  • Compiles to readable JS
  • Three parts: Language, Language Server and Compiler
  • Kind of like a fancy linter

TypeScript is increasingly popular downloads-graph

Why developers want types

It allows you, as a code author, to leave more of your intent “on the page”

This kind of intent is often missing from JS code. For example:

js
function add(a, b) {
return a + b
}

Is this meant to take numbers as args? strings? both?

What if someone who interpreted a and b as numbers made this “backwards-compatible change?”

js
function add(a, b, c = 0) {
return a + b + c
}

We’re headed for trouble if we decided to pass strings in for a and b!

Types make the author’s intent more clear

ts
function add(a: number, b: number): number {
return a + b
}
add(3, "4")
Argument of type 'string' is not assignable to parameter of type 'number'.2345Argument of type 'string' is not assignable to parameter of type 'number'.
Try

It has the potential to move some kinds of errors from runtime to compile time 1

Examples:

  • Values that are potentially absent (null or undefined)
  • Incomplete refactoring
  • Breakage around internal code contracts (e.g., an argument becomes required)

It serves as the foundation for a great code authoring experience

Example: in-editor autocomplete, as shown here:

ts
window.setInterval
         
Try

Workshop Setup

As long as you can access the following websites, you should require no further setup emoji-tada

Agenda

  • Using tsc and compiling TS code into JavaScript
  • Variables and simple values
  • Objects and arrays
    --- BREAK ---
  • Categorizing type systems
  • Set theory, Union and Intersection types
  • Interfaces and Type Aliases
    --- LUNCH ---
  • Hack: Writing types for JSON values
  • Functions
  • Classes in TypeScript
  • Top and bottom types
  • User-defined Type guards
    --- BREAK ---
  • Handling nullish values
  • Generics
  • Hack: higher-order functions for dictionaries
  • Wrap up

  1. TypeScript by itself is not going to reduce the occurrence of errors in your projects. It does, however, provide several tools that greatly improve visibility of some kinds of defects.



© 2023 All Rights Reserved