Introduction to TypeScript

Transcript

1. Introduction to TypeScript
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
3. There is literally academic research showing that using TypeScript leads to a 15% reduction in bugs. Source.
4. It turns out that most modern languages for UI development use types: — Swift — Kotlin — C# JavaScript is an exception in this area.
5. let x: number; x = 2; x = "2"; // Not cool.
6. You don't even have to declare types really. let x = 2; x = 4; x = "4"; // Not cool.
7. Out of the box, TypeScript supports JavaScript's seven native types. — undefined — null — boolean — number — string — symbol — object
8. It also supports the any type. This is effectively an escape hatch.
9. Union Types let stringOrNumber: string | number; let stringOrNumber = 4; let stringOrNumber = "Four";
10. You only need to type empty arrays. let numbers: number[] = []; let numbers: Array<number> = []; let numbers = [1,2,3];
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.
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.
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.
14. Rest Types const joinNumbers = (...nums: number[]): string { return nums.join('-'); }; joinNumbers(1, 2, 3); // '1-2-3'
15. Okay, what about objects? interface Point { x: number; y: number; } let point: Point; point = { x: 1, y: 2 };
16. Optional properties interface Person { name: string; company?: string; }
17. Methods interface Point { x: number; y: number; distance(other: Point): number; }
18. Okay, so remember this syntax for arrays? let numbers = Array<number>; let names = Array<string>; That thing in the <> brackets is called a generic. It's not super wrong to think of it as a variable for a type.
19. class Queue<T> { _store: T[] = []; push(val: T) { this._store.push(val); } pop(): T | undefined { return this._store.shift(); } } const stringQueue = new Queue<string>(); const numberQueue = new Queue<number>(); numberQueue.push(2);
20. Alternatively… class Queue<T> { _store: T[] = []; push(val: T) { this._store.push(val); } pop(): T | undefined { return this._store.shift(); } } const stringQueue: Queue<string> = new Queue(); const numberQueue: Queue<number> = new Queue(); numberQueue.push(2);
21. Generics in functions const idWithNumbersOnly = (x: number) => x; const id = <T>(x: T): T => x; id<string>('wowow'); id('wowowow');
22. Variable arguments using generics function fillArray<T>(length: number, elem: T) { return new Array<T>(length).fill(elem); }
23. What might this look like in React? export interface DividerProps { label?: string; thin?: boolean; } export const Divider: React.SFC<DividerProps> = ({ label, thin }) => { return ( <hr className={cn({ 'is-thin': thin, })} data-label={label} /> ); };
24. Enums
25. enum Direction { Up, Down, Left, Right, }
26. Namespaces Think about them like objects of methods that you can split across files. namespace Validation { export interface StringValidator { isAcceptable(s: string): boolean; } }
27. namespace Validation { const lettersRegexp = /^[A-Za-z]+$/; export class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } }
28. namespace Validation { const numberRegexp = /^[0-9]+$/; export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } }
29. Resources — DefinitelyTyped — React and TypeScript