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

    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