Introduction to TypeScript

Transcript

1. Introduction to TypeScript
   

   View Slide

2. When should you consider TypeScript?
   — If the code base is relatively large
   — If you ever plan on refactoring
   — If you have a decently large group of people working
   on the code base
   — If you're spending a non-zero amount of time writing
   unit tests
   

   View Slide

3. There is literally academic research showing that using
   TypeScript leads to a 15% reduction in bugs. Source.
   

   View Slide

4. It turns out that most modern languages for UI
   development use types:
   — Swift
   — Kotlin
   — C#
   JavaScript is an exception in this area.
   

   View Slide

5. let x: number;
   x = 2;
   x = "2"; // Not cool.
   

   View Slide

6. You don't even have to declare types really.
   let x = 2;
   x = 4;
   x = "4"; // Not cool.
   

   View Slide

7. Out of the box, TypeScript supports JavaScript's seven
   native types.
   — undefined
   — null
   — boolean
   — number
   — string
   — symbol
   — object
   

   View Slide

8. It also supports the any type.
   This is effectively an escape hatch.
   

   View Slide

9. Union Types
   let stringOrNumber: string | number;
   let stringOrNumber = 4;
   let stringOrNumber = "Four";
   

   View Slide

10. You only need to type empty arrays.
    let numbers: number[] = [];
    let numbers: Array = [];
    let numbers = [1,2,3];
    

    View Slide

11. if you wanted some like a tuple from Swift or Python,
    you can do that as well.
    let point: [number, number] = [7, 5];
    This will only allow arrays with two number elements.
    This helps ensure that you're getting what you think
    you're getting.
    

    View Slide

12. Functions
    JavaScript:
    const numberToString = (n) => n.toString();
    TypeScript:
    const numberToString = (n: number): string => n.toString();
    The TypeScript compiler keeps track of inputs and
    outputs to make sure nothing strange will happen at
    runtime.
    

    View Slide

13. What about functional programming?
    JavaScript:
    const curriedAdd = a => b => a + b;
    TypeScript:
    const curriedAdd = (a: number): (b: number) => number => (b) => a + b;
    curriedAdd(1)(2);
    const add2 = curriedAdd(2);
    add2(5);
    See it with Intellisense.
    

    View Slide

14. Rest Types
    const joinNumbers = (...nums: number[]): string {
    return nums.join('-');
    };
    joinNumbers(1, 2, 3); // '1-2-3'
    

    View Slide

15. Okay, what about objects?
    interface Point {
    x: number;
    y: number;
    }
    let point: Point;
    point = { x: 1, y: 2 };
    

    View Slide

16. Optional properties
    interface Person {
    name: string;
    company?: string;
    }
    

    View Slide

17. Methods
    interface Point {
    x: number;
    y: number;
    distance(other: Point): number;
    }
    

    View Slide

18. Okay, so remember this syntax for arrays?
    let numbers = Array;
    let names = Array;
    That thing in the <> brackets is called a generic.
    It's not super wrong to think of it as a variable for a type.
    

    View Slide

19. class Queue {
    _store: T[] = [];
    push(val: T) {
    this._store.push(val);
    }
    pop(): T | undefined {
    return this._store.shift();
    }
    }
    const stringQueue = new Queue();
    const numberQueue = new Queue();
    numberQueue.push(2);
    

    View Slide

20. Alternatively…
    class Queue {
    _store: T[] = [];
    push(val: T) {
    this._store.push(val);
    }
    pop(): T | undefined {
    return this._store.shift();
    }
    }
    const stringQueue: Queue = new Queue();
    const numberQueue: Queue = new Queue();
    numberQueue.push(2);
    

    View Slide

21. Generics in functions
    const idWithNumbersOnly = (x: number) => x;
    const id = (x: T): T => x;
    id('wowow');
    id('wowowow');
    

    View Slide

22. Variable arguments using generics
    function fillArray(length: number, elem: T) {
    return new Array(length).fill(elem);
    }
    

    View Slide

23. What might this look like in React?
    export interface DividerProps {
    label?: string;
    thin?: boolean;
    }
    export const Divider: React.SFC = ({ label, thin }) => {
    return (
    className={cn({
    'is-thin': thin,
    })}
    data-label={label}
    />
    );
    };
    

    View Slide

24. Enums
    

    View Slide

25. enum Direction {
    Up,
    Down,
    Left,
    Right,
    }
    

    View Slide

26. Namespaces
    Think about them like objects of methods that you can
    split across files.
    namespace Validation {
    export interface StringValidator {
    isAcceptable(s: string): boolean;
    }
    }
    

    View Slide

27. namespace Validation {
    const lettersRegexp = /^[A-Za-z]+$/;
    export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
    return lettersRegexp.test(s);
    }
    }
    }
    

    View Slide

28. namespace Validation {
    const numberRegexp = /^[0-9]+$/;
    export class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
    return s.length === 5 && numberRegexp.test(s);
    }
    }
    }
    

    View Slide

29. Resources
    — DefinitelyTyped
    — React and TypeScript
    

    View Slide