TypeScript cheatsheet

Introduction

TypeScript is a superset of JavaScript that compiles to plain JavaScript. It is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript adds optional types, classes, and modules to JavaScript.

Microsoft designed TS with specific architectural parameters in mind, which allow TS to integrate fully and easily with existing JS code, while providing robust features external to JS.

1. Providing a Type Check
2. More Powerful Object-Oriented Programming
3. Basic TS Compiler
4. TypeScript Standalone Compiler, TSC
5. Language Service
6. Tool Integration

Getting Started

npm i -g typescript
tsc --version

## create a new tsconfig.json configuration file
tsc --init

## compile a single file
tsc hello.ts

## TS Compiler
tsc hello.ts
    tsc --outFile file.js file.ts
    tsc @args.txt
    tsc --build tsconfig.json

Basic types

any
void

boolean
number
string

null
undefined

bigint
symbol

string[]          /* or Array<string> */
[string, number]  /* tuple */

string | null | undefined   /* union */

never  /* unreachable */
unknown

enum Color {
  Red,
  Green,
  Blue = 4
};

let c: Color = Color.Green

Declarations

let isDone: boolean
let isDone: boolean = false

function add (a: number, b: number): number {
  return a + b
}

// Return type is optional
function add (a: number, b: number) { ... }

Type assertions

let len: number = (input as string).length
let len: number = (<string> input).length  /* not allowed in JSX */

// Functions

function object(this: {a: number, b: number}, a: number, b: number) {
  this.a = a;
  this.b = b;
  return this;
}

// this is used only for type declaration
let a = object(1,2);
// a has type {a: number, b: number}

Interfaces

// Inline
function printLabel (options: { label: string }) {
  console.log(options.label)
}

// Note the semicolon
function getUser (): { name: string; age?: number } {
}

// Explicit
interface LabelOptions {
  label: string
}

function printLabel(options: LabelOptions) { ... }

// Optional properties
interface User {
  name: string;
  age?: number;
}

// Read only
interface User {
  readonly name: string
}

// Dynamic keys
{
  [key: string]: Object[]
}

Type aliases

// Type aliases
type Name = string | string[]

// Intersection
interface Colorful { ... }

interface Circle { ... }

type ColorfulCircle = Colorful & Circle;

Function types

interface User { ... }

function getUser(callback: (user: User) => any) { callback({...}) }

getUser(function (user: User) { ... })

Classes

class Point {
  x: number
  y: number
  static instances = 0
  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }
}

// Inheritance
class Point {...}

class Point3D extends Point {...}

interface Colored {...}

class Pixel extends Point implements Colored {...}

// Short fields initialisation
class Point {
  static instances = 0;
  constructor(
    public x: number,
    public y: number,
  ){}
}

// Fields which do not require initialisation
class Point {
  public someUselessValue!: number;
  ...
}

Generics

class Greeter<T> {
  greeting: T
  constructor(message: T) {
    this.greeting = message
  }
}

let greeter = new Greeter<string>('Hello, world')

Modules

export interface User { ... }

Type extraction

interface Building {
  room: {
    door: string;
    walls: string[];
  };
}

type Walls = Building['room']['walls']; // string[]

Keyof Type Operator

type Point = { x: number; y: number };

type P = keyof Point; // x | y

Conditinal Types

// SomeType extends OtherType ? TrueType : FalseType;

type ToArray<T> = T extends any ? T[] : never;

type StrArrOrNumArr = ToArray<string | number>; // string[] | number[]

// Inferring


type GetReturnType<T> = T extends (...args: unknown[]) => infer R
  ? R
  : never;

type Num = GetReturnType<() => number>; // number

type First<T extends Array<any>> = T extends [infer F, ...infer Rest] ? F : never;

type Str = First<['hello', 1, false]>; // 'hello'

Literal Type

const point = { x: 4, y: 2 }; // { x: number, y: number }

const literalPoint = { x: 4, y: 2 } as const; // { readonly x: 4, readonly y: 2 };

Template Literal Types

type SpaceChar = ' ' | '\n' | '\t';

type TrimLeft<S extends string> = S extends `${SpaceChar}${infer Rest}` ? TrimLeft<Rest> : S;

type Str = TrimLeft<'    hello'>; // 'hello'

Reference

• https://devhints.io/typescript

Small world. Big idea!

• Welcome to visit the knowledge base of SRE and DevOps!
• License under CC BY-NC 4.0
• No personal information is collected
• Made with Material for MkDocs and generative AI tools
• Copyright issue feedback me#imzye.com, replace # with @
• Get latest SRE news and discuss on Discord Channel