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 errorLet's Talk About Type Safety
@ryanchenkie
@prisma
How much collective time have we lost to type issues?
Author time
Runtime
@ryanchenkie
@prisma
@xjamundx
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.
