Introduction to TypeScript

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

What might this look like in React? export interface DividerProps { label?: string; thin?: boolean; } export const Divider: React.SFC = ({ label, thin }) => { return (

); };

Slide 24

Slide 24 text

Enums

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Resources — DeﬁnitelyTyped — React and TypeScript