Intro

About the Instructor

• Frontend Masters instructor for 9 years
• Developer Platform Lead @ Stripe
• Designs Stripe’s API semantics
• Architect responsible for TypeScript projects like node-stripe, Stripe Shell, and Stripe Workbench

#1 Goal for this course

By the end of this course, I want you to have a rock solid mental model, that will allow you to design, discuss and understand types.

What is TypeScript?

TypeScript is an open source, typed syntactic superset of JavaScript

• Compiles to clean, readable JS
• Three parts: Language, Language Server and Compiler
• Kind of like a fancy linter — helps purely at build time

TypeScript is increasingly popular

Why types are a big deal

It allows developers to leave more of their intent “on the page”, especially when it comes to articulating constraints.

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

This code is more readable and is more self-documenting, in that it’s more clear how the author of this function intends it to be used.

TypeScript moves some kinds of common programming errors from runtime to compile time ¹

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.se
         
self
sessionStorage
setInterval
setTimeoutTry

Workshop Setup

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

• The course website you’re reading right now
• The official TypeScript website

If you’d like to follow along with interactive examples, please install Volta

sh
curl https://get.volta.sh | bash # Linux / macOS only
volta install node@lts yarn@^3

Make sure to follow the installation instructions for volta — both what you see on the website and what you see in the CLI console. Next, clone the git repo for this course github.com/mike-north/typescript-courses, enter the directory, and run yarn to install all dependencies

sh
git clone https://github.com/mike-north/typescript-courses
cd typescript-courses
yarn

most of our work today will be in the packages/notes-ts-fundamentals-v4 folder

sh
cd packages/notes-ts-fundamentals-v4