The Typescript Book

Notes on how to use the Typescript language

How to create a frontend development environment for Typescript

dockerfile.dev

from node:alpine
workdir /usr/application
cmd ["npm", "start"]
copy package.json .
run npm install
copy . .

docker-compose.yml

readme.txt

commands

How to create a backend development environment for Typescript

dockerfile.dev

FROM node:alpine
WORKDIR /usr/server
CMD ["npm", "run", "development"]
COPY package.json .
RUN npm install
COPY . .

docker-compose.yml

source/server.ts

package.json

tsconfig.json

readme.txt

commands

Three cases where you need explicit type annotation

As a rule you should rely on type inference. In 3 specific cases you need to use explicit type annotation.

Case 1

// When function that returns the "any" type e.g. JSON.parse()
// interface Point {
//   x: number
//   y: number
// }
// const thePoint: Point = { x: 10, y: 20 }
const thePoint = { x: 10, y: 20 }
const coordinates = JSON.parse(JSON.stringify(thePoint))
// Solution#1 const coordinates = JSON.parse(JSON.stringify(thePoint)) as Point
// Solution#2 const coordinates: Point = JSON.parse(JSON.stringify(thePoint))
console.log(coordinates)

Case 2

Case 3

How to annotate a function

Case 1

// Case 1: Annotate variable
const sum
  : (a: number, b: number) => number 
  = (a, b) => a + b

Case 2

How to annotate an object

Case 1

const person 
  : { name: string, age: number, 
      coordinates: { longitude: number, latitude: number }}
  = { name: 'bob', age: 35,
    coordinates: { longitude: 1.23456, latitude: 6.54321 }}

Case 2

How to annotate a destructured value

Case 1

const todaysWeather = {
  date: new Date(),
  weather: 'sunny',
}

// Case 1: parameter is not destructured
const logWeather1 = (forecast: { date: Date; weather: string }): void => {
  console.log(forecast.date)
  console.log(forecast.weather)
}

logWeather1(todaysWeather)

Case 2

Case 3

How to annotate arrays

Case 1

// homogenous arrays
const array: string[] = []
array.push('')
const value = array.pop()    // value inferred to be of type string

Case 2

How to annotate tuples

Case 1

// A tuple is an array that expects specific types at specific indexes
// The code below shows how to use an enumeration to enforce this ordering

// define enumeration to provide access to tuple elements at specific indicies
enum Quality { color, fizzy, calories }
const { color, fizzy, calories } = Quality

// define the type of the tuple
type Drink = [string, boolean, number]

// define an instance of a tuple
const pepsi: Drink = ['brown', true, 40]

pepsi[color] = 40        // error - cannot assign number to string 
pepsi[fizzy] = 'brown'   // error - cannot assign string to boolean 
pepsi[calories] = true   // error - cannot assign boolean to number 

How to create types in Typescript

Types

// (1) create a type for a function
type predicate = (value: number) => boolean
const isEven: predicate = (value) => value % 2 === 0

// (2) create a type for an object
type Person = { name: string; age: number }
const robert: Person = { name: 'bob', age: 35 }

// (3) create a type for a tuple
type Beverage = [string, boolean, number]
const drPepper: Beverage = ['brown', true, 75]

// (4) create a stype for a heterogenous array
type Dates = (string | Date)[]
const rolodex: Dates = ['2020-09-25 10:00:05', new Date()]

How to create interfaces in Typescript

Case 1

interface Reportable {
  name: string
  year: number
  broken: boolean
  print(): void
}

const car = {
  name: 'civic',
  year: 2000,
  broken: true,
  print() {
    console.log(`Name: ${this.name}`)
    console.log(`Year: ${this.year}`)
    console.log(`Broken: ${this.broken}`)
  },
}

const printVehicle = (vehicle: Vehicle) => {
  vehicle.print()
}

printVehicle(car)

How to add method and property accessibility specifiers

Case 1

class Vehicle {
  // only callable within class and subclasses
  protected drive() {
    console.log('chugga-chugga!')
  }
  // callable by anyone on class instance or subclass instance
  public honk() {
    console.log('beep-beep!')
  }
  // callable only within class 
  private price() {
    console.log('$1200')
  }
}

class Car extends Vehicle {
  // visibilty of protected method can be increased when overriding
  public drive() {
    console.log('vroom-vroom!')
  }
}

const car = new Car()
console.log(car.drive())
console.log(car.honk())

Case 2

How to use generics with constraints

Class

class Printer<T> {
  constructor(private valueOne: T) {}

  print(valueTwo: T): T {
    console.log(valueTwo)
    return this.valueOne
  }
}

const printer = new Printer<number>(42)
printer.print(24)
// printer.print('invalid value')

Function

Constraints

How to use decorators

Methods

class Boat {
  @log('I', 'could')
  pilot(): void {
    throw new Error('not pilot boat')
  }
}

function log(a: string, b: string) {
  return function (target: any, key: string, descriptor: PropertyDescriptor) {
    const method = descriptor.value
    descriptor.value = function () {
      try {
        method()
      } catch (error) {
        console.log(`${a} ${b} ${error.message}`)
      }
    }
  }
}

const boat = new Boat()
boat.pilot()              // prints the message "I could not pilot boat"

Classes

Properties

Method Parameters

How to use React prop types with Typescript

Props

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

// (1) These are where you define the prop types for your component
interface AppProps {
  // (2) Using JSDOC comments show up in Visual Code on hover 🥰
  /** The text to show */
  text?: string
}

class App extends Component<AppProps> {

  // (3) These are your default prop values 
  static defaultProps = {
    text: 'Not Available',
  }

  render() {
    return <h1>{this.props.text}</h1>
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

State

How to use useRef instead of useState to represent a form

The usual approach for a form is to use state and set up change handlers on each input field. However this results on change handlers being fired on every keypress, potentially a large number of events. Since we are only interested in the contents of the input fields on a form submission, we can use refs to the input fields and only grab their values once when there is a form submission.

import {
  FormEvent,
  FormEventHandler,
  FunctionComponent,
  useRef,
  RefObject,
} from 'react'

const getAndReset = (ref: RefObject<HTMLInputElement>): string => {
  if (!ref.current) return ''
  const value = ref.current.value
  ref.current.value = ''
  return value
}

export const SignIn: FunctionComponent = (): JSX.Element => {
  const emailRef = useRef<HTMLInputElement>(null)
  const passwordRef = useRef<HTMLInputElement>(null)

  const handleSubmit: FormEventHandler = (
    event: FormEvent<HTMLFormElement>
  ): void => {
    event.preventDefault()
    const email = getAndReset(emailRef)
    const password = getAndReset(passwordRef)
    console.log('form submission', email, password)
  }

  return (
    <div className="sign-in">
      <h2>I already have an account</h2>
      <span>Sign in with your email and password</span>
      <form onSubmit={handleSubmit}>
        <input name="email" type="email" required ref={emailRef} />
        <label htmlFor="email">Email</label>
        <input type="password" name="password" ref={passwordRef} />
        <label htmlFor="password">Password</label>
        <input name="submit" type="submit" value="Submit Form" />
      </form>
    </div>
  )
}