Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React and TypeScript, Turing School

React and TypeScript, Turing School

Steve Kinney

July 18, 2022
Tweet

More Decks by Steve Kinney

Other Decks in Technology

Transcript

  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. 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. };
  5. type Item = { id: string; title: string; }; type

    ContrivedExampleComponmentProps = { item: Item; items: Item[]; };
  6. 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; };
  7. const add = (a: number, b: number): number => {

    return a + b; }; function subtract(a: number, b: number): number { return a - b; }
  8. keyof Get all of the keys from a given type.

    type ObjectLiteralType = { first: 1; second: 2; }; // Inferred Type: "first" | "second" type Result = keyof ObjectLiteralType;
  9. 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"];
  10. 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];
  11. Unions type A = "a" | "b" | "c"; type

    B = "b" | "c" | "d"; // Inferred Type: "a" | "b" | "c" | "d" type Union = A | B;
  12. 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;
  13. Intersection Only What Appears in Both type A = "a"

    | "b" | "c"; type B = "b" | "c" | "d"; // Inferred Type: "b" | "c" type Intersection = A & B;
  14. 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>;
  15. 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">;
  16. 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">;
  17. 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">;
  18. 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">;
  19. 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">;
  20. 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={...} ... />
  21. React.ComponentProps<typeof XXX> We'll use this one in the very next

    exercise—just sayin'. type MyComponentProps = React.ComponentProps<typeof MyComponent>;