TypeScript

What is TypeScript?

• build on JavaScript → all valid JS-Code is also TS-Code
• add static type definitions
• types provide better DX, documentation, validation and testing
• types are optional
• type-checking errors won't stop running JavaScript
• TS-Code is transformed via TS or Babel
• adopting to existing code base easily → start with documentation, switch only a few files to be checked etc.
• TS infers types so you don't have to annotate your code
• integration for many editors available or built-in (VSCode)

Getting started

Install TypeScript

# npm
npm install typescript --save-dev
# yarn
yarn add typescript --dev

Compile *.ts files to *.js files

# npm
npx tsc
#yarn
yarn tsc

Watch for changes

# npm
npx tsc -w
#yarn
yarn tsc -w

Add TS to a project

cd ~/Workspace/my-awesome-project
tsc --init

• initialize a TS project
• creates a tsconfig.json file

Basics

Example

message.toLowerCase()
message()

Problems

• Is message callable?
• Does it have a property called toLowerCase on it?
• If it does, is toLowerCase even callable?
• If both of these values are callable, what do they return?

Solution

const message = "Hello World!"
message.toLowerCase() // it works
message() // error → This expression is not callable.

• valid JavaScript
• would lead to a runtime error
• TS infers the type of message
• TS throw an error and doesn't render resulting

Working with the type system

Common types

• primitives string, number and boolean
• arrays can be written as string[], number[] or Array<number>
• special type any can be used - TS use this if the compiler cannot infer the context
• type void for callbacks or function return
• use types null and undefined to signal absent or uninitialized value
• union types number | string
• literal types allow specific strings or numbers as type
• combining literals and unions are a common and useful concept → 'left' | 'right' | 'center'

Type annotations

• variables → const myName:string = "John"
• function parameters → function greet(name: string) { … }
• function returns → function getName(): string { … }
• object → function print(point: { x:number, y:number }) { … }
• use ? for optional properties → function printName(first: string; last?: string) { … }

Type assertions

• use a type assertion to specify a more specific type

// using the `as` keyword
const logo = document.getElementById('logo') as HTMLImageElement
// using angle-bracket syntax
const logo = <HTMLImageElement>document.getElementById('logo')

• using the Non-Null Assertion operator ! says TS that the value isn't null or undefined

Type aliases and interfaces

Type aliases

• to reuse type definition use a type alias → a name for any type

type ID = number | string
type Point = {
  x: number
  y: number
}

function printCoords(id: ID, pt: Point) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase())
  } else {
    console.log(id)
  }
  console.log(pt.x, pt.y)
}
…

Interfaces

• another way to name an object type

interface Point = {
  x: number
  y: number
}

function printCoords(pt: Point) {
  console.log(pt.x, pt.y)
}

Types vs. Interfaces

Aspect	Type	Interface
Can describe functions	✅	✅
Can describe constructors	✅	✅
Can describe tuples	✅	✅
Interfaces can extend it	⚠️	✅
Classes can extend it	🚫	✅
Classes can implement it (implements)	⚠️	✅
Can intersect another one of its kind	✅	⚠️
Can create a union with another one of its kind	✅	🚫
Can be used to create mapped types	✅	🚫
Can be mapped over with mapped types	✅	✅
Expands in error messages and logs	✅	🚫
Can be augmented	🚫	✅
Can be recursive	⚠️	✅

⚠️ In some cases

Classes & OOP

Class members

• fields, functions and constructor
• readonly fields prevents assignments outside of the constructor
• supports type annotations, default values and constructor overloads
• getters and setters

Class Heritage

• classes may extends from a base class using the extends keyword
• methods can be overridden
• calling super to access base class methods
• classes can implement multiple interfaces using implements

More features

• class members can be declared as private, public or protected
• parameter properties → constructor(public foo: string)
• classes may have static members
• class expressions → const foo = class<T> { … }
• classes, methods and fields may be abstract
• classes can be generic

Generics

• create reusable components that can work for a wide range of types
• allows users to use their own types on these components

The identity function → return back whatever is passed in

Without generics

function identity(arg: number): number {
  return arg;
}

Why not use the any type

function identity(arg: any): any {
  return arg;
}

• Problem: no type checking for the any type

Solution: use a type variable instead

function identity<Type>(arg: Type): Type {
  return arg;
}

and now

let out1 = identity<string>('hello')
let out2 = identity(42)
let out3 = identity<MyCustomType>(value)

• TS knows and can handle types (parameters, return)
• multiple types allowed identity<T, U>(a: T, b: U): T { … }
• no type casting necessary
• stronger type checks at compile time

Much more features

• Decorators
• Enums
• Iterators and generators
• JSX
• Mixins
• Modules
• Namespaces
• Symbols
• Declaration files
• …

Resources

• TypeScript Handbook → https://www.typescriptlang.org/docs/handbook/intro.html
• Understanding TypeScript - 2021 Edition → https://www.udemy.com/course/understanding-typescript/

Thank you