The Pragmatic TypeScript Programmer

Get the most out of TypeScript with simple, pragmatic and functional best practices.

by Gion Kunz

Gion Kunz

Angular GDE since 2018
Front-end developer, web standards advocate
Specialized in spa development using Angular
Onsite ramp-ups, coaching and implementation support in projects
Author of the book "Mastering Angular Components"
Frequent speaker at conferences and meetups
Teacher for web development and UX engineering at the SAE Institute in Zurich
Tutor at O'Reilly Safari Online Training
Contributor on the Angular project, author of Chartist.js library

Founder, UI Developer, UX Enthusiast at syncrea GmbH

If I am not in the Web universe, I ❤ watching Deep Space.

M82 (Bode's Galaxy, left) and M81 (Cigar Galaxy, right), both about 12 Mio Lightyears away.

Workshop Topics

TypeScript Base
- No Implicit Any
- Any and Unknown
- Strict null checks
Type Declarations
- Use native types
- Declaration by initialization
- Tuple type declarations
- Literal types
- Union types (and & or)
- String literal union types

ECMAScript 2015 - 2018
- Modules
- Var vs. Let vs. Const
- Template Strings
- Loops (for, for of, forEach)
- Arrow Functions
- Destructuring
- Spreading
- async / await

Functional Primer
- Pure functions
- Immutability
~~OOP~~ > FP > Pragmatic TypeScript
- Object literals with Interfaces
- The Myth of OOP

Advanced Topics
- Type aliases for Documentation
- Discriminated Union Types
- The Partial Interface
- The keyof Type
- Conditional Generic Types
- User Defined Type Guards with type predicates

Prerequisites

You have your Laptop with internet access
Access to https://stackblitz.com
If you want to keep your history, create an account!

Let's Hack!

TypeScript Base

No Implicit Any

// tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

> edit on stackblitz

Any and Unknown

let x: any = 10;
x = 'anything';

let y: unknown = 5;
y = 'unknown';

let z: number;
z = x;
// Not possible!
z = y;

> edit on stackblitz

Strict Null-Checks

// tsconfig.json
{
  "compilerOptions": {
     "noImplicitAny": true,
     "strictNullChecks": true
  }
}

> edit example 1 on stackblitz

> edit example 2 on stackblitz

How to Deal with possible null values

Non-Null Assertion Operator !
die() helper function

let x: string | null;

x!.toLowerCase();

function die(message: string): never {
  throw new Error(message);
}

(x || die('Ooops...')).toLowerCase();

Type Declarations

Use "Native" Types

let n: number;
// Not this -> let n: Number;

let b: boolean;
// Not this -> let b: Boolean;

let s: string;
// Not this -> let s: String;

Skip Declaration when Initialized with Value

const n = 100;
// Not this -> const n: number = 100;

const x = 'Hello World';
// Not this -> const x: string = 'Hello World';

Tuple Type Declarations

type NameAgeTuple = [string, number];

const nameAndAge: NameAgeTuple = ['Peter', 52];

> edit on stackblitz

Literal Types

type AnswerToAllQuestions = 42;
// Error!
const n: AnswerToAllQuestions = 13;

Union Literal Types

type FibonacciNumber = 1 | 2 | 3 | 5 | 8 | 13;
// Error!
const n: FibonacciNumber = 4;

String Literal Union Types as Enumeration Type

type OrderStatus = 'Ordered' | 'Paid' | 'Shipped' | 'Delivered';

interface Order {
  id: number;
  status: OrderStatus;
}

const order: Order = {
  id: 1,
  status: 'Ordered'
};

> edit on stackblitz

Intersection Types

interface Cat {
  name: string;
  meow: () => void;
}

interface Dog {
  name: string;
  bark: () => void;
}

export type CatDog = Cat & Dog;

> edit on stackblitz

ECMAScript 2015 - 2019

ECMAScript Modules

// a.ts
const magicNumber = 13;

export const modulePublic = 'This is public';

export function multiplyWithMagicNumber(n: number): number {
  return magicNumber * n;
}

// Default export
export default [1, 2, 3, 5, 8, 13];

> edit on stackblitz

// index.ts
import {
  modulePublic as moduleAText, 
  multiplyWithMagicNumber
} from './a';
import fibonacci from './a';
import * as A from './a';

console.log(moduleAText);
console.log(multiplyWithMagicNumber(7));
console.log(fibonacci);

console.log(A.default === fibonacci);
console.log(A.modulePublic === moduleAText);

> edit on stackblitz

Var vs. Let vs. Const

function closure() {
  var closureScoped = 1;
  for(let i = 0; i < 10; i++) {

  }
  // Error
  console.log(i);
}

> edit on stackblitz

Template Strings

const peter = {
  name: 'Peter'
};

console.log(`My name is ${peter.name}!`);

> edit on stackblitz

Loops Revived

const list = [1, 2, 3, 4, 5, 6, 7];

// Traditional but block scope counter
for(let i = 0; i < list.length; i++) {
  console.log(i);
}

// Functional
list.forEach(console.log);

// for...of loop
for(let item of list) {
  console.log(item);
}

> edit on stackblitz

Arrow Functions

const multiply = (a: number, b: number) => a * b;

> edit on stackblitz

Destructuring

// Array destructuring
const list = [1, 2, 3];
const [first, second, third] = list;

// Object destructuring
const peter = {
  firstName: 'Peter',
  lastName: 'Griffin'
};
const {firstName, lastName} = peter;

> edit on stackblitz

Parameter Destructuring and Defaults

export interface ConfigurationOptions {
  delay: number;
  host: string;
  limit: number;
}

function configure({delay = 1000, 
                    host = 'localhost',
                    limit = 300}: Partial<ConfigurationOptions>) {
  console.log(host);
  console.log(delay);
  console.log(limit);
}

> edit on stackblitz

Spreading

// Array spreading
const list = [1, 2, 3, 4];
const appended = [...list, 5, 6, 7];

// Object property spreading
const peter = {
  firstName: 'Peter',
  lastName: 'Griffin'
};
const peterWithAge = {
  ...peter,
  age: 52
};

> edit on stackblitz

Async / Await

// Traditional promise chain
function invalidateUsersLame() {
  return fetch('/api/users')
    .then(usersResponse => usersResponse.json())
    .then((users: User[]) => 
      Promise.all(users.map(user => 
        fetch(`/api/users/${user.id}/invalidate`).then(() => user)
      ))
    );
}

> edit on stackblitz

Async / Await

// Async await löve!
async function invalidateUsers() {
  const usersResponse = await fetch('/api/users');
  const users: User[] = await usersResponse.json();
  for(let user of users) {
    await fetch(`/api/users/${user.id}/invalidate`);
  }
  return users;
}

> edit on stackblitz

Functional Primer

Pure Functions

// Pure
function multiply(a: number, b: number): number {
  return a * b;
}

// Impure
const name = 'Peter';

function getNameLength() {
  return name.length;
}

As Much Pureness as Possible!

Very simple to reason about
No dependencies other than parameter
Reproducable
Highly deterministic
Simple to test
Cachable!

Immutability - What's wrong with mutability?

Object property mutation changes state, but consumers are not notified.
Mutable data is inherently complex, because it can change.
Mutable data can lead to distributed dependencies, which would need to be notified about change.
Harder to be confident about correctness of the code.
Reference Problem: The nested references

Immutability by using readonly

interface Person {
  readonly name: string;
  readonly age: number;
}

const person: Person = {
  name: 'Peter',
  age: 52
};

// Error!
person.name = 'Pete';

> edit on stackblitz

Convert mutable structures with Readonly<T>

interface Person {
  name: string;
  age: number;
}

const person: Readonly<Person> = {
  name: 'Peter',
  age: 52
};

// Error!
person.name = 'Pete';

> edit on stackblitz

Immutable Arrays, Sets and Maps

const list: ReadonlyArray<number> = [1, 2, 3, 4];
// Error!
list[0] = 10;
// Error!
list.sort();
// Error!
list.fill(42);

> edit on stackblitz

OOP > FP > Pragmatic TypeScript

Interfaces with Object Literals

export interface Person {
  firstName: string;
  lastName: string;
}

const person: Person = {
  firstName: 'Peter',
  lastName: 'Griffin'
};

> edit on stackblitz

Interfaces with Object Literals

Use interfaces to define your model / data.
If too much boilerplate for construction, use object factory functions.
Implement any logic outside your model using pure helper functions.

What's Wrong with OOP and Encapsulation?

One does not combine data and behavior to create living objects...
Mostly the types with behaviors metaphor is not taking you that far.
We have learned that Inheritance is a bad thing to begin with and we should avoid it.
Implementing behavior classes and using composition is suggested but it's just a work-around.
Encapsulation ≠ Data Hiding

The Multiple Inheritance Dilemma

export class DesigningDeveloper {
  design(): void {
    // Can design
  }

  develop(): void {
    // Can develop
  }
}

> edit OOP solution on stackblitz

> edit FP solution on stackblitz

Advanced Topics

Type aliases for Documentation

export type PersonId = number;

function getPerson(id: PersonId) {

}

> edit on stackblitz

Discriminated Union Types

export interface Apple {
  readonly kind: 'Apple';
  readonly color: string;
}

export interface Banana {
  readonly kind: 'Banana';
  readonly bendRadius: number;
}

export type Fruit = Apple | Banana;

> edit on stackblitz

The Partial Interface

export interface Person {
  readonly name: string;
  readonly age: number;
  readonly isHungry: boolean;
}

function updatePerson(data: Partial<Person>) {
  // Do stuff with partial person data...
}

> edit on stackblitz

The keyof Type

export interface Person {
  readonly name: string;
  readonly age: number;
  readonly isHungry: boolean;
}

export type PersonKey = keyof Person;

> edit on stackblitz

Combine keyof with Generics

// First version... We can do better!
function getPropertyLame<T>(object: T, key: keyof T) {
  return object[key];
}

// That's fantastic!
function getProperty<T, K extends keyof T>(object: T, key: K): T[K] {
  return object[key];
}

> edit on stackblitz

Mapped Types with keyof

export type Partial<T> = {
  [K in keyof T]?: T[K]; 
};

> edit on stackblitz

Conditional Generic Types

export type YesNo<T extends boolean> = 
  T extends true ? 'Yes' : 'No';

> edit on stackblitz

Infer Types in Conditional Generics

export type Unpacked<T> = 
  T extends (infer A)[] ? A : 
  T extends Promise<infer P> ? P : 
  T extends Set<infer S> ? S :
  T extends Map<infer MK, infer MV> ? [MK, MV] :
  T;

> edit on stackblitz

Let's create together.

Thanks!

@GionKunz