Skip to main content

TypeScript

Introduction

Built-in types

Compiler options

Conditional types

  • 📺 Conditional Types, TypeScript’s most POWERFUL feature • 4 minute video by Basarat Ali using the example of a typeName helper to demonstrate how conditional types work and why you can think of them as functions that compute an output (a specific type) based on an input (a generic type)
  • 📺 TypeScripts amazing INFER Keyword • 3 minute video by Basarat Ali showing how to use the infer keyword inside a conditional type to get the type name of the generic argument that was passed in

Generic types

  • Why Generics? • 3 minute video by Basarat Ali showing how generics help in cases where a structure accepts alternating types of inputs and outputs 📺
  • TypeScript Challenge! • Quick example of generics to define a method a function argument needs to include (like a trait in Rust) • Visual Studio Code 📺

Literal types

Special types

  • 📺 Lookup Types - one of the first super powers of TypeScript • 3 minute video by Basarat Ali showing how lookup types can clean up your code and prevent typos by using a larger root type as the source of truth for smaller types
  • 📺 What are TypeScript MAPPED Types and how to use them Effectively • 4 minute video by Basarat Ali using the example of creating a readonly version of an existing type to demonstrate how a mapped type is created by mapping over the properties of an existing type and modifying their definitions (similar to creating a new JS array by mapping over an existing array and returning a copy that transforms each item in some way)
  • 📺 Mapped type MODIFIERS in TypeScript • 4 minute video by Basarat Ali showing how to use +, - and Partial to modify properties in a mapped type

Function return types

Operators

Type guards

Narrowing

  • Narrowing types at run-time with typeof and instanceof (really a JS thing, but useful in TS too)
  • Narrowing TS types with arg is Type type predicate functions
    • e.g. function isString(arg: unknown): arg is string { return typeof arg === 'string'; }
    • e.g. function isFish(pet: Fish | Bird): pet is Fish { return (pet as Fish).swim !== undefined; } (copied from docs)
  • Narrowing TS types with switch statements
  • Narrowing TS types with function overloads (when the return type of a function changes as the type of its arguments change)

Editor features

  • Adding a @ts-check comment at the top of a JS file will trigger TS checking in that file
    • In VS Code only?

Runtime Type Checking

Challenges

Make TS understand Array.filter by using type predicates

  • Narrowing: Using type predicates • TypeScript docs 📚
  • A colleague DM’d me with a TS puzzle that was solved by this on Nov 4, 2022 (check Slack)
  • It’s super common for devs to expect TS will understand that Array.filter just narrowed the type
  • But it doesn’t unless the function you put in that filter() is has a return type that’s a “type predicate” like “value is MyType”
  • If the return type is just “boolean” as usual, TS doesn’t understand how that just narrowed your type options

Inbox