TypeScript for Every Part of Your Stack

Ryan Chenkie

@ryanchenkie

GraphQL Dev Rel at Prisma

Let's Talk About Type Safety

@ryanchenkie

@prisma

function add(num1, num2) {
  return num1 + num2;
}

add(1, "foo");

Let's Talk About Type Safety

@ryanchenkie

@prisma

function add(num1: number, num2: number) {
  return num1 + num2;
}

add(1, "foo"); // compilation error

Let's Talk About Type Safety

@ryanchenkie

@prisma

How much collective time have we lost to type issues?

Author time

Runtime

@ryanchenkie

@prisma

@xjamundx

Watch Presentation

Jamund Ferguson

@ryanchenkie

@prisma

"We had no idea why or where our apps were failing"

How Do Problems Arise?

@ryanchenkie

@prisma

Requirements change over time

We prototype and will "fix it later"

As team size grows, so does the surface area for invalid code use

Prototyping

@ryanchenkie

@prisma

We want to move quickly, leading to:

Lack of documentation

Lack of good abstractions

Lack of solid knowledge of our own code

Change in Requirements

@ryanchenkie

@prisma

Over time, requirements change, leading to:

Bad abstractions surfacing

Brittle code

Brittle data models

Team Growth

@ryanchenkie

@prisma

As teams grow, so too does the possibility for:

Code misuse

Repeated code that does the same thing

Diffuse domain knowledge

One Way to Help:

Type Safety

@ryanchenkie

@prisma

Where is Type Safety Applied?

@ryanchenkie

@prisma

Typical

Front End

Backend

API Access

Less Typical

Database Access

Front End Type Safety

@ryanchenkie

@prisma

import React from 'react';

interface UserProps {
  name: string;
  email: string;
}

const User: React.FC = (props: UserProps) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.email}</p>
    </div>
  );
};

Backend Type Safety

@ryanchenkie

@prisma

interface User {
  name: string;
  email: string;
}

function getUser(): User {
  return {
    name: 'John Doe',
    email: 'john@doe.com'
  }
}

API Access Type Safety

@ryanchenkie

@prisma

type User {
  name: String!
  email: String!
}

type Query {
  users: [User]
}

Database Type Safety

@ryanchenkie

@prisma

model User {
  name  String
  email String
}

Managing Type Safety is a Pain

@ryanchenkie

@prisma

There's tooling that makes it easier, including Prisma

@ryanchenkie

@prisma

DEMO

@ryanchenkie

@prisma

Thank You!

@ryanchenkie

bit.ly/fullstack-typescript