Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to TypeScript

Steve Kinney
April 17, 2018
150

Introduction to TypeScript

Steve Kinney

April 17, 2018
Tweet

Transcript

  1. 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
  2. It turns out that most modern languages for UI development

    use types: — Swift — Kotlin — C# JavaScript is an exception in this area.
  3. You don't even have to declare types really. let x

    = 2; x = 4; x = "4"; // Not cool.
  4. Out of the box, TypeScript supports JavaScript's seven native types.

    — undefined — null — boolean — number — string — symbol — object
  5. You only need to type empty arrays. let numbers: number[]

    = []; let numbers: Array<number> = []; let numbers = [1,2,3];
  6. 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.
  7. 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.
  8. 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.
  9. Rest Types const joinNumbers = (...nums: number[]): string { return

    nums.join('-'); }; joinNumbers(1, 2, 3); // '1-2-3'
  10. Okay, what about objects? interface Point { x: number; y:

    number; } let point: Point; point = { x: 1, y: 2 };
  11. 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.
  12. 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);
  13. 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);
  14. Generics in functions const idWithNumbersOnly = (x: number) => x;

    const id = <T>(x: T): T => x; id<string>('wowow'); id('wowowow');
  15. 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} /> ); };
  16. Namespaces Think about them like objects of methods that you

    can split across files. namespace Validation { export interface StringValidator { isAcceptable(s: string): boolean; } }
  17. namespace Validation { const lettersRegexp = /^[A-Za-z]+$/; export class LettersOnlyValidator

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

    implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } }