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.
- Providing a Type Check
- More Powerful Object-Oriented Programming
- Basic TS Compiler
- TypeScript Standalone Compiler, TSC
- Language Service
- 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