React and TypeScript, Turing School

Transcript

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

   View Slide

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/
   

   View Slide

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.
   

   View Slide

4. Commonly Used Props
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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.
   
   
   };
   
   
   

   View Slide

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

   View Slide

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

    View Slide

11. Record
    
    
    Record
    

    View Slide

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): void;
    
    
    };
    

    View Slide

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

    View Slide

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

    View Slide

15. Utility Types
    

    View Slide

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;
    
    
    

    View Slide

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"];
    
    
    

    View Slide

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];
    

    View Slide

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

    View Slide

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;
    
    
    

    View Slide

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;
    

    View Slide

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

    View Slide

23. 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;
    
    
    

    View Slide

24. 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">;
    
    
    

    View Slide

25. 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">;
    

    View Slide

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;
    
    
    

    View Slide

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;
    
    
    

    View Slide

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">;
    

    View Slide

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

    View Slide

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

    View Slide