React and TypeScript, Turing School

1. React && TypeScript Steve Kinney, Head of Engineering: Frontend and Developer Tools @ Temporal A Gentle Introduction
2. 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/
3. 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.
4. Commonly Used Props
5. type CounterProps = { incident: string; count: number; enabled: boolean; };
6. type GroceryListProps = { items: string[]; };
7. type GroceryListProps = { items: string[]; status: "loading" | "error" | "success"; };
8. 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. };
9. type Item = { id: string; title: string; }; type ContrivedExampleComponmentProps = { item: Item; items: Item[]; };
10. type ItemHash = { [key: string]: Item; }; type Dictionary = { [key: number]: string; };
11. Record<string, Item> Record<number, string>
12. 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<HTMLButtonElement>): void; };
13. const add = (a: number, b: number): number => { return a + b; }; function subtract(a: number, b: number): number { return a - b; }
14. type ContrivedProps = { requiredProp: boolean; optionalProp?: string; };
15. Utility Types
16. keyof Get all of the keys from a given type. type ObjectLiteralType = { first: 1; second: 2; }; // Inferred Type: "first" | "second" type Result = keyof ObjectLiteralType;
17. 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"];
18. 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];
19. Unions type A = "a" | "b" | "c"; type B = "b" | "c" | "d"; // Inferred Type: "a" | "b" | "c" | "d" type Union = A | B;
20. 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;
21. Intersection Only What Appears in Both type A = "a" | "b" | "c"; type B = "b" | "c" | "d"; // Inferred Type: "b" | "c" type Intersection = A & B;
22. Conditionals Ternaries Only type Wrap<T> = T extends { length: number } ? [T] : T;
23. Conditional Example Kind of silly, but it demonstrates the point. type IsAssignableTo<A, B> = 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<number, 123>;
24. Exclude Removes Values from a Union type Exclude<T, U> = 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">;
25. Extract The Opposite of Exclude 🙃 type Extract<T, U> = 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">;
26. 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<ObjectLiteralType, "george" | "ringo">;
27. Omit Leave our particular properties. type ObjectLiteralType = { john: 1; paul: 2; george: 3; ringo: 4; }; // Inferred Type: { john: 1; paul: 2; } type Result = Omit<ObjectLiteralType, "george" | "ringo">;
28. 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">;
29. React.HTMLProps<HTMLXXXElement> A type representing Props of speci f ied HTML element. Useful for extending HTML Elements. const Input = (props: <Props & React.HTMLProps<HTMLInputElement>) => { // … } <Input about={...} accept={...} alt={...} ... />
30. React.ComponentProps<typeof XXX> We'll use this one in the very next exercise—just sayin'. type MyComponentProps = React.ComponentProps<typeof MyComponent>;