TypeScript: Seeing Past The Hype

Matthew Gerstman

bit.ly/broadway-book

Thank you for indulging me

Typescript

Google Trend

Today We're Going To Get Past The Hype

We're gonna go into the ugly parts, and then talk about why it's worth it anyway.

I want to convince you this tool is worth learning and using.

Let's take 10 steps back

What is a type?

A type is an attribute of data that tells the computer how the programmer intends to use it.

Basic Types

  • boolean
  • number
  • string
  • array
  • object

Falsy Types

  • ❌ null
  • ❌ undefined
  • ❌ never
  • ❌ void

Types can also be derived from other types

Any

What is TypeScript?

Strict superset of JavaScript

 1. const slytherin: string = 'slytherin';
 2. const gryffindor: boolean = false;
 3. 
 4. function takesString(arg: string) {
 5.   console.log(arg);
 6. }
 7. 
 8. takesString(slytherin); // works
 9. takesString(gryffindor); // error
10.

It's smart, really smart.

const a: HTMLCollectionOf<
  HTMLAnchorElement
> = document.getElementsByTagName("a");
const div: HTMLCollectionOf<
  HTMLDivElement
> = document.getElementsByTagName("div");
const p: HTMLCollectionOf<
  HTMLParagraphElement
> = document.getElementsByTagName("p");

It makes big refactors easy

Demo: VSCode + Typescript

    Slytherin.dev

      TypeScript is going to get in your way for the first few months

      lodash.get/set

      Tests require very well mocked data or lots of anys

      Advanced JavaScript translates to advanced TypeScript

      Higher Order Components

      This is hard to type

      • Generics
      • Intersections
      • Discriminated Unions

      Blogpost:

      bit.ly/ts-hoc

      TypeScript is not Sound!

      Anyone can put an any in your codebase.

      React Context

      React-Redux

      Context

      Thunks

      Dispatch

      TypeScript is a strict superset of JavaScript

      We're bolting on types to an untyped language

      Valid JavaScript

      function returnsDifferent(arg) {
        if (arg === "Harry") {
          return 7;
        }
        if (arg === "Ron") {
          return undefined;
        }
        if (arg === "Hermione") {
          return {};
        }
        return "Wizards";
      }

      All of this is still worth it.

      TypeScript is just another tool

      TypeScript is not a silver bullet

      TypeScript eliminates a class of bugs

      undefined is not an object

      variable is not a function

      Changing Interfaces

      Dropbox Scale

      • 👩‍💻 Hundreds of engineers working on the same codebase
      • 📚 Millions of lines of Typescript
      • 📘 Hundreds of Features
      • 🌎 NY, SEA, SF, TLV

      Typescript is a core part of our frontend workflow

      Library Upgrades

      DefinitelyTyped

      The first thing we do when upgrading a library is swap out the types.

      TypeScript catches the vast majority of breakages when upgrading a library.

      Examples

      • ❌ Deprecated features
      • 🔄 Changed types
      • ✅ The types often just get better

      At our scale I don't know how we would upgrade libraries without TypeScript

      TypeScript allows us to place constraints on engineers.

      Problem

      We want to test the latest version of React in production.

      But we might need to roll back.

      Developers will start using shiny new features as soon as we let them.

      Solution

      Roll out latest version behind a feature gate.

      Keep the previous version of React's Types.

      When we're confident it works, add the types.

        Restrict Lodash Usage

        import {after, ...} from 'lodash-full';
        export {after, ...};

        Blogpost:

        bit.ly/db-lodash

        What about for small teams?

        Free Documentation

        Free Documentation

        Free Tests

        Free Tests

        Contract Validation

        A Contract is precise and verifiable interface for software components.

        Verifiable

        Api

        Component Library

        Feature

        Sample App

        // API
        type User = {
          userId: number;
          name: string;
        };
        function fetchUsers(): Promise<User[]>;
        // Redux
        type FetchUserAction = {
          type: "FETCH/USER";
          payload: User;
        };
        function fetchUsersAction(): FetchUserAction;
        type StoreShape = {
          users: {
            [userId: number]: User;
          };
        };
        function getNameForUser(state: StoreShape, userId: number): string;
        // View Layer
        type UserProps = {
          name: string;
        };
        const User: React.FunctionComponent<UserProps> = props => {
          const {name} = props;
          return <div>Hi My name is {name}</div>;
        };

        TypeScript increases in value over time

        Unlike tests, typescript gets in your way

        TypeScript is not a silver bullet!

        • 👩🏽‍🔬 You still need to write tests
        • 👩‍💻 You still need to review code
        • 👩🏾‍🏫 You still need to think about architecture

        The metric for success on a codebase is how few things you need to keep in your head at a time.

        TypeScript allows you to forget about other parts of your codebase

        The cost of TypeScript is learning it.

        Matthew Gerstman