React && TypeScript Steve Kinney, Head of Engineering: Frontend and Developer Tools @ Temporal A Gentle Introduction

How to f ind me… Feel free to slide into my DMs. • I’m on y’all’s Slack under @steve. • I’m on Twitter—under duress—under @stevekinney. • All of this content today can be found here: https:// stevekinney.github.io/react-and-typescript/

Why use TypeScript? A brief sales pitch. • Type checking at compile time is way better than things crashing or—worse—behaving unexpectedly at run time. • You get a better development experience because autocomplete knows more about what you’re intending on doing. • Large codebases stay more maintainable because you’re able to put guardrails on how your code can be used.

Commonly Used Props

type CounterProps = { incident: string; count: number; enabled: boolean; };

type GroceryListProps = { items: string[]; };

type GroceryListProps = { items: string[]; status: "loading" | "error" | "success"; };

type ContrivedExampleComponmentProps = { anObject: object; // Useful as a placeholder. anotherObject: {}; // Can have any properties and values. item: { id: string; title: string; }; items: { id: string; title: string; }[]; // An array of objects of a certain shape. };

type Item = { id: string; title: string; }; type ContrivedExampleComponmentProps = { item: Item; items: Item[]; };

type ItemHash = { [key: string]: Item; }; type Dictionary = { [key: number]: string; };

Record Record

type ContrivedExampleProps = { // Does not take any arguments. Does not return anything. onHover: () => void; // Takes a number. Returns nothing (e.g. undefined). onChange: (id: number) => void; // Takes an event that is based on clicking on a button. // Returns nothing. onClick(event: React.MouseEvent): void; };

const add = (a: number, b: number): number => { return a + b; }; function subtract(a: number, b: number): number { return a - b; }

type ContrivedProps = { requiredProp: boolean; optionalProp?: string; };

Utility Types

keyof Get all of the keys from a given type. type ObjectLiteralType = { first: 1; second: 2; }; // Inferred Type: "first" | "second" type Result = keyof ObjectLiteralType;

Getting The Type Of A Single Key In An Object Use the index operator. type Obj = { 0: "a"; 1: "b"; prop0: "c"; prop1: "d"; }; // Inferred Type: "c" type Result0 = Obj["prop0"]; // Inferred Type: "a" | "b" type Result1 = Obj[0 | 1]; // Inferred Type: "c" | "d" type Result2 = Obj["prop0" | "prop1"];

Getting the Values from an Object Type It’s not as clean, but it will work. type Obj = { a: "A"; b: "B"; c: number; }; // Inferred Type: number | "A" | "B" type Values = Obj[keyof Obj];

Unions type A = "a" | "b" | "c"; type B = "b" | "c" | "d"; // Inferred Type: "a" | "b" | "c" | "d" type Union = A | B;

Unions with Objects Only what appears in both objects. type ObjectTypeA = { firstProp: number; sharedProp: string; }; type ObjectTypeB = { secondProp: boolean; sharedProp: string; }; type Union = ObjectTypeA | ObjectTypeB;

Intersection Only What Appears in Both type A = "a" | "b" | "c"; type B = "b" | "c" | "d"; // Inferred Type: "b" | "c" type Intersection = A & B;

Conditionals Ternaries Only type Wrap = T extends { length: number } ? [T] : T;

Conditional Example Kind of silly, but it demonstrates the point. type IsAssignableTo = A extends B ? true : false; // Type `123` is assignable to type `number` // Inferred Type: true type Result1 = IsAssignableTo<123, number>; // Type `number` is not assignable to type `123` // Inferred Type: false type Result2 = IsAssignableTo;

Exclude Removes Values from a Union type Exclude = T extends U ? never : T; // Inferred Type: 1 | 3 type Result0 = Exclude<1 | 2 | 3, 2>; // Inferred Type: "a" | "b" type Result1 = Exclude<1 | "a" | 2 | "b", number>; // Inferred Type: "a" | 2 type Result2 = Exclude<1 | "a" | 2 | "b", 1 | "b" | "c">;

Extract The Opposite of Exclude 🙃 type Extract = T extends U ? T : never; // Inferred Type: 1 | 2 type Result1 = Extract<1 | "a" | 2 | "b", number>; // Inferred Type: 1 | "b" type Result2 = Extract<1 | "a" | 2 | "b", 1 | "b" | "c">;

Pick Pick out certain keys from an object type. type ObjectLiteralType = { john: 1; paul: 2; george: 3; ringo: 4; }; // Inferred Type: { george: 2; ringo: 4; } type Result = Omit;

Omit Leave our particular properties. type ObjectLiteralType = { john: 1; paul: 2; george: 3; ringo: 4; }; // Inferred Type: { john: 1; paul: 2; } type Result = Omit;

String Manipulation You can change the casing of strings. type UppercaseWes = Uppercase<"wes">; type LowercaseWes = Lowercase<"Wes">; type CapitalizeWes = Capitalize<"wes">; type UncapitalizeWes = Uncapitalize<"Wes">;

React.HTMLProps A type representing Props of speci f ied HTML element. Useful for extending HTML Elements. const Input = (props: ) => { // … }

React.ComponentProps We'll use this one in the very next exercise—just sayin'. type MyComponentProps = React.ComponentProps;