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

TypeScript for Every Part of Your Stack

By Ryan Chenkie

TypeScript for Every Part of Your Stack

Developing a real-world full-stack app often involves tedious threading of data across multiple layers of the stack. This is particularly undesirable during prototyping phases where the main goal may be just to demonstrate an idea or design. It’s also risky when going to production since data inconsistencies between the layers can lead to bugs. We show one solution to this velocity and type-safety dilemma via Nexus combined with Prisma.

  • 777

More from Ryan Chenkie