logo

TypeScript Cheat Sheet

title: TypeScript date: 2024-05-28 22:12:25 background: bg-[#4476c0] tags: - ts - web categories: - Programming intro: | A TypeScript cheat sheet with the most important concepts, functions, methods, and more. A complete quick reference for beginners. plugins: - copyCode - runCode

Getting Started

Installing the Compiler

npm install typescript --save-dev
npm tsc

Introduction

TypeScript is a superset of JavaScript that adds static typing, interfaces, and compile-time error checking. It compiles down to plain JavaScript.

Basic Types

let age: number = 25;
let name: string = 'Alice';
let isOnline: boolean = true;
let notSure: any = 'Could be anything';
let nothingHere: null = null;
let notDefined: undefined = undefined;
let symbolValue: symbol = Symbol('unique');
let bigIntValue: bigint = 9007199254740991n;

Arrays

let numbers: number[] = [1, 2, 3];
let fruits: Array<string> = ['apple', 'banana'];
let mixed: (string | number)[] = ['one', 2, 'three'];

Tuples

let person: [string, number];
person = ['John', 30]; // ✅
person = [30, 'John']; // ❌ Error

Enums

enum Direction {
	Up = 1,
	Down,
	Left,
	Right
}

let move: Direction = Direction.Up;

enum Status {
	Success = 'SUCCESS',
	Error = 'ERROR'
}

Type Aliases

type ID = string | number;
let userId: ID = 123;

type Callback = () => void;

Interfaces

interface User {
	name: string;
	age: number;
	isAdmin?: boolean; // optional
	readonly id: number; // readonly
}

const user: User = { name: 'Bob', age: 25, id: 1 };

Extending Interfaces

interface Animal {
	name: string;
}

interface Dog extends Animal {
	breed: string;
}

const dog: Dog = { name: 'Fido', breed: 'Labrador' };

Functions

function greet(name: string): string {
	return `Hello, ${name}`;
}

const add = (a: number, b: number): number => a + b;

Optional & Default Parameters

function log(message: string, userId?: string) {
	console.log(message, userId ?? 'Guest');
}

function multiply(a: number, b: number = 2) {
	return a * b;
}

Rest Parameters

function sum(...numbers: number[]): number {
	return numbers.reduce((acc, curr) => acc + curr, 0);
}

Function Overloads

function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: any, b: any): any {
	return a + b;
}

Union & Intersection Types

type Status = 'success' | 'error' | 'loading';

type UserInfo = { name: string };
type AdminInfo = { admin: boolean };

type AdminUser = UserInfo & AdminInfo;

Literal Types

type Alignment = 'left' | 'center' | 'right';
let align: Alignment = 'left';

Generics

function identity<T>(value: T): T {
	return value;
}

let num = identity<number>(42);
let str = identity('Hello');

Generic Constraints

interface Lengthwise {
	length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
	console.log(arg.length);
}

Generic Interfaces

interface GenericIdentityFn<T> {
	(arg: T): T;
}

const myIdentity: GenericIdentityFn<number> = identity;

Classes

class Person {
	name: string;
	constructor(name: string) {
		this.name = name;
	}
	greet() {
		console.log(`Hello, I'm ${this.name}`);
	}
}

const alice = new Person('Alice');
alice.greet();

Access Modifiers

class Car {
	public brand: string;
	private speed: number;
	protected year: number;

	constructor(brand: string, speed: number, year: number) {
		this.brand = brand;
		this.speed = speed;
		this.year = year;
	}
}

Abstract Classes

abstract class Animal {
	abstract makeSound(): void;
	move(): void {
		console.log('Moving...');
	}
}

class Dog extends Animal {
	makeSound() {
		console.log('Woof!');
	}
}

Implements Interface

interface Vehicle {
	start(): void;
}

class Bike implements Vehicle {
	start() {
		console.log('Bike starting...');
	}
}

Type Assertions

let someValue: unknown = 'Hello TypeScript';
let strLength: number = (someValue as string).length;

Nullish Coalescing

let input: string | null = null;
let result = input ?? 'Default';

Optional Chaining

const user = { profile: { name: 'Alice' } };
console.log(user.profile?.name); // Alice
console.log(user.address?.street); // undefined

Namespaces

namespace Utils {
	export function log(msg: string) {
		console.log(msg);
	}
}

Utils.log('Hello');

Modules

// math.ts
export function add(a: number, b: number) {
	return a + b;
}

// app.ts
import { add } from './math';
console.log(add(2, 3));

Export Default

// logger.ts
export default class Logger {
	log(msg: string) {
		console.log(msg);
	}
}

// main.ts
import Logger from './logger';
const logger = new Logger();
logger.log('Info');

Promises & Async/Await

async function fetchData(): Promise<string> {
	return 'Data loaded';
}

fetchData().then(console.log);

Typing Async Functions

interface User {
	id: number;
	name: string;
}

async function getUser(id: number): Promise<User> {
	// Simulate fetch
	return { id, name: 'User' };
}

Readonly & Record

interface Config {
	readonly apiKey: string;
}

type Point = Record<'x' | 'y', number>;
const origin: Point = { x: 0, y: 0 };

Advanced Features

Type Guards

function isString(value: any): value is string {
	return typeof value === 'string';
}

function process(value: string | number) {
	if (isString(value)) {
		console.log(value.toUpperCase());
	} else {
		console.log(value.toFixed(2));
	}
}

Index Signatures

interface Dictionary {
	[key: string]: string;
}

const dict: Dictionary = { hello: 'world' };

Mapped Types

type Flags = { [K in 'option1' | 'option2']: boolean };
const flags: Flags = { option1: true, option2: false };

Conditional Types

type NonNullable<T> = T extends null | undefined ? never : T;
type SafeString = NonNullable<string | null>; // string

Unknown vs Any

let value: unknown;
value = 5; // OK
// console.log(value.length); // Error

let anyValue: any;
anyValue = 5;
console.log(anyValue.length); // No error, but risky

Never Type

function throwError(msg: string): never {
	throw new Error(msg);
}

Decorators (Experimental)

function sealed(target: any) {
	Object.seal(target);
	Object.seal(target.prototype);
}

@sealed
class SealedClass {}

Utility Types

interface Todo {
	title: string;
	description: string;
	completed: boolean;
}

// Partial
type PartialTodo = Partial<Todo>;

// Required
type RequiredTodo = Required<PartialTodo>;

// Pick
type TodoPreview = Pick<Todo, 'title' | 'completed'>;

// Omit
type TodoWithoutDesc = Omit<Todo, 'description'>;

// ReturnType
function f() {
	return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;

// Parameters
type Params = Parameters<(a: number, b: string) => void>;

Keyof and Typeof

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

type PersonKeys = keyof Person; // "name" | "age"

const person = { name: 'Alice', age: 30 };
type PersonType = typeof person; // { name: string; age: number }

Infer Keyword

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

Conditionals and Loops

if Statement

const max: number = 100;
if (max > 50) {
	console.log('Large');
}

Ternary Operator

const isEven: boolean = 10 % 2 === 0 ? true : false;

Switch Statement

const color: string = 'red';
switch (color) {
	case 'red':
		console.log('Stop');
		break;
	default:
		console.log('Go');
}

For Loop

for (let i: number = 0; i < 5; i++) {
	console.log(i);
}

While Loop

let count: number = 0;
while (count < 5) {
	console.log(count++);
}

For...of Loop

const arr: number[] = [1, 2, 3];
for (const num of arr) {
	console.log(num);
}

For...in Loop

const obj = { a: 1, b: 2 };
for (const key in obj) {
	console.log(key);
}

Arrays and Iterables

Array Methods

const nums: number[] = [1, 2, 3];

// Map
const doubled: number[] = nums.map(n => n * 2);

// Filter
const evens: number[] = nums.filter(n => n % 2 === 0);

// Reduce
const sum: number = nums.reduce((acc, curr) => acc + curr, 0);

Readonly Arrays

const readOnlyNums: ReadonlyArray<number> = [1, 2, 3];
// readOnlyNums.push(4); // Error

Sets

const set: Set<number> = new Set([1, 2, 3]);
set.add(4);
set.delete(1);

Maps

const map: Map<string, number> = new Map();
map.set('one', 1);
map.get('one'); // 1

Objects

Object Types

const car: { type: string; mileage?: number } = {
	type: 'Toyota'
};

Indexable Types

interface StringArray {
	[index: number]: string;
}

const myArray: StringArray = ['Bob', 'Fred'];

Excess Property Checks

interface Square {
	color: string;
	width: number;
}

// const redSquare = { color: "red", width: 100, height: 100 }; // Error if strict

Modules and Namespaces

Namespace with Internal Modules

namespace Geometry {
	export interface Point {
		x: number;
		y: number;
	}
	export function distance(p1: Point, p2: Point): number {
		return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
	}
}

Module Resolution

// tsconfig.json { "compilerOptions": { "moduleResolution": "node" } }

Error Handling

Try Catch

try {
	throw new Error('Oops');
} catch (e: unknown) {
	if (e instanceof Error) {
		console.log(e.message);
	}
}

Custom Errors

class CustomError extends Error {
	constructor(message: string) {
		super(message);
	}
}

TypeScript with JavaScript Features

Destructuring

const [first, second]: [number, number] = [1, 2];
const { name: userName, age }: { name: string; age: number } = { name: 'Alice', age: 30 };

Spread Operator

const arr1: number[] = [1, 2];
const arr2: number[] = [...arr1, 3, 4];

Template Literals

const greeting: string = `Hello, ${name}`;

Arrow Functions

const square = (x: number): number => x * x;
💻 编程语言

TypeScript

TypeScript Cheat Sheet - 快速参考指南，收录常用语法、命令与实践。

📂 分类 · 编程语言🧭 Markdown 速查🏷️ 2 个标签
#ts#typed
向下滚动查看内容
返回全部 Cheat Sheets

Getting Started

Installing the Compiler
SHELL
滚动查看更多
npm install typescript --save-dev
npm tsc
Introduction

TypeScript is a superset of JavaScript that adds static typing, interfaces, and compile-time error checking. It compiles down to plain JavaScript.

Basic Types
TYPESCRIPT
滚动查看更多
let age: number = 25;
let name: string = 'Alice';
let isOnline: boolean = true;
let notSure: any = 'Could be anything';
let nothingHere: null = null;
let notDefined: undefined = undefined;
let symbolValue: symbol = Symbol('unique');
let bigIntValue: bigint = 9007199254740991n;
Arrays
TYPESCRIPT
滚动查看更多
let numbers: number[] = [1, 2, 3];
let fruits: Array<string> = ['apple', 'banana'];
let mixed: (string | number)[] = ['one', 2, 'three'];
Tuples
TYPESCRIPT
滚动查看更多
let person: [string, number];
person = ['John', 30]; // ✅
person = [30, 'John']; // ❌ Error
Enums
TYPESCRIPT
滚动查看更多
enum Direction {
	Up = 1,
	Down,
	Left,
	Right
}

let move: Direction = Direction.Up;

enum Status {
	Success = 'SUCCESS',
	Error = 'ERROR'
}
Type Aliases
TYPESCRIPT
滚动查看更多
type ID = string | number;
let userId: ID = 123;

type Callback = () => void;
Interfaces
TYPESCRIPT
滚动查看更多
interface User {
	name: string;
	age: number;
	isAdmin?: boolean; // optional
	readonly id: number; // readonly
}

const user: User = { name: 'Bob', age: 25, id: 1 };
Extending Interfaces
TYPESCRIPT
滚动查看更多
interface Animal {
	name: string;
}

interface Dog extends Animal {
	breed: string;
}

const dog: Dog = { name: 'Fido', breed: 'Labrador' };
Functions
TYPESCRIPT
滚动查看更多
function greet(name: string): string {
	return `Hello, ${name}`;
}

const add = (a: number, b: number): number => a + b;
Optional & Default Parameters
TYPESCRIPT
滚动查看更多
function log(message: string, userId?: string) {
	console.log(message, userId ?? 'Guest');
}

function multiply(a: number, b: number = 2) {
	return a * b;
}
Rest Parameters
TYPESCRIPT
滚动查看更多
function sum(...numbers: number[]): number {
	return numbers.reduce((acc, curr) => acc + curr, 0);
}
Function Overloads
TYPESCRIPT
滚动查看更多
function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: any, b: any): any {
	return a + b;
}
Union & Intersection Types
TYPESCRIPT
滚动查看更多
type Status = 'success' | 'error' | 'loading';

type UserInfo = { name: string };
type AdminInfo = { admin: boolean };

type AdminUser = UserInfo & AdminInfo;
Literal Types
TYPESCRIPT
滚动查看更多
type Alignment = 'left' | 'center' | 'right';
let align: Alignment = 'left';
Generics
TYPESCRIPT
滚动查看更多
function identity<T>(value: T): T {
	return value;
}

let num = identity<number>(42);
let str = identity('Hello');
Generic Constraints
TYPESCRIPT
滚动查看更多
interface Lengthwise {
	length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
	console.log(arg.length);
}
Generic Interfaces
TYPESCRIPT
滚动查看更多
interface GenericIdentityFn<T> {
	(arg: T): T;
}

const myIdentity: GenericIdentityFn<number> = identity;
Classes
TYPESCRIPT
滚动查看更多
class Person {
	name: string;
	constructor(name: string) {
		this.name = name;
	}
	greet() {
		console.log(`Hello, I'm ${this.name}`);
	}
}

const alice = new Person('Alice');
alice.greet();
Access Modifiers
TYPESCRIPT
滚动查看更多
class Car {
	public brand: string;
	private speed: number;
	protected year: number;

	constructor(brand: string, speed: number, year: number) {
		this.brand = brand;
		this.speed = speed;
		this.year = year;
	}
}
Abstract Classes
TYPESCRIPT
滚动查看更多
abstract class Animal {
	abstract makeSound(): void;
	move(): void {
		console.log('Moving...');
	}
}

class Dog extends Animal {
	makeSound() {
		console.log('Woof!');
	}
}
Implements Interface
TYPESCRIPT
滚动查看更多
interface Vehicle {
	start(): void;
}

class Bike implements Vehicle {
	start() {
		console.log('Bike starting...');
	}
}
Type Assertions
TYPESCRIPT
滚动查看更多
let someValue: unknown = 'Hello TypeScript';
let strLength: number = (someValue as string).length;
Nullish Coalescing
TYPESCRIPT
滚动查看更多
let input: string | null = null;
let result = input ?? 'Default';
Optional Chaining
TYPESCRIPT
滚动查看更多
const user = { profile: { name: 'Alice' } };
console.log(user.profile?.name); // Alice
console.log(user.address?.street); // undefined
Namespaces
TYPESCRIPT
滚动查看更多
namespace Utils {
	export function log(msg: string) {
		console.log(msg);
	}
}

Utils.log('Hello');
Modules
TYPESCRIPT
滚动查看更多
// math.ts
export function add(a: number, b: number) {
	return a + b;
}

// app.ts
import { add } from './math';
console.log(add(2, 3));
Export Default
TYPESCRIPT
滚动查看更多
// logger.ts
export default class Logger {
	log(msg: string) {
		console.log(msg);
	}
}

// main.ts
import Logger from './logger';
const logger = new Logger();
logger.log('Info');
Promises & Async/Await
TYPESCRIPT
滚动查看更多
async function fetchData(): Promise<string> {
	return 'Data loaded';
}

fetchData().then(console.log);
Typing Async Functions
TYPESCRIPT
滚动查看更多
interface User {
	id: number;
	name: string;
}

async function getUser(id: number): Promise<User> {
	// Simulate fetch
	return { id, name: 'User' };
}
Readonly & Record
TYPESCRIPT
滚动查看更多
interface Config {
	readonly apiKey: string;
}

type Point = Record<'x' | 'y', number>;
const origin: Point = { x: 0, y: 0 };

Advanced Features

Type Guards
TYPESCRIPT
滚动查看更多
function isString(value: any): value is string {
	return typeof value === 'string';
}

function process(value: string | number) {
	if (isString(value)) {
		console.log(value.toUpperCase());
	} else {
		console.log(value.toFixed(2));
	}
}
Index Signatures
TYPESCRIPT
滚动查看更多
interface Dictionary {
	[key: string]: string;
}

const dict: Dictionary = { hello: 'world' };
Mapped Types
TYPESCRIPT
滚动查看更多
type Flags = { [K in 'option1' | 'option2']: boolean };
const flags: Flags = { option1: true, option2: false };
Conditional Types
TYPESCRIPT
滚动查看更多
type NonNullable<T> = T extends null | undefined ? never : T;
type SafeString = NonNullable<string | null>; // string
Unknown vs Any
TYPESCRIPT
滚动查看更多
let value: unknown;
value = 5; // OK
// console.log(value.length); // Error

let anyValue: any;
anyValue = 5;
console.log(anyValue.length); // No error, but risky
Never Type
TYPESCRIPT
滚动查看更多
function throwError(msg: string): never {
	throw new Error(msg);
}
Decorators (Experimental)
TYPESCRIPT
滚动查看更多
function sealed(target: any) {
	Object.seal(target);
	Object.seal(target.prototype);
}

@sealed
class SealedClass {}
Utility Types
TYPESCRIPT
滚动查看更多
interface Todo {
	title: string;
	description: string;
	completed: boolean;
}

// Partial
type PartialTodo = Partial<Todo>;

// Required
type RequiredTodo = Required<PartialTodo>;

// Pick
type TodoPreview = Pick<Todo, 'title' | 'completed'>;

// Omit
type TodoWithoutDesc = Omit<Todo, 'description'>;

// ReturnType
function f() {
	return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;

// Parameters
type Params = Parameters<(a: number, b: string) => void>;
Keyof and Typeof
TYPESCRIPT
滚动查看更多
interface Person {
	name: string;
	age: number;
}

type PersonKeys = keyof Person; // "name" | "age"

const person = { name: 'Alice', age: 30 };
type PersonType = typeof person; // { name: string; age: number }
Infer Keyword
TYPESCRIPT
滚动查看更多
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

Conditionals and Loops

if Statement
TYPESCRIPT
滚动查看更多
const max: number = 100;
if (max > 50) {
	console.log('Large');
}
Ternary Operator
TYPESCRIPT
滚动查看更多
const isEven: boolean = 10 % 2 === 0 ? true : false;
Switch Statement
TYPESCRIPT
滚动查看更多
const color: string = 'red';
switch (color) {
	case 'red':
		console.log('Stop');
		break;
	default:
		console.log('Go');
}
For Loop
TYPESCRIPT
滚动查看更多
for (let i: number = 0; i < 5; i++) {
	console.log(i);
}
While Loop
TYPESCRIPT
滚动查看更多
let count: number = 0;
while (count < 5) {
	console.log(count++);
}
For...of Loop
TYPESCRIPT
滚动查看更多
const arr: number[] = [1, 2, 3];
for (const num of arr) {
	console.log(num);
}
For...in Loop
TYPESCRIPT
滚动查看更多
const obj = { a: 1, b: 2 };
for (const key in obj) {
	console.log(key);
}

Arrays and Iterables

Array Methods
TYPESCRIPT
滚动查看更多
const nums: number[] = [1, 2, 3];

// Map
const doubled: number[] = nums.map(n => n * 2);

// Filter
const evens: number[] = nums.filter(n => n % 2 === 0);

// Reduce
const sum: number = nums.reduce((acc, curr) => acc + curr, 0);
Readonly Arrays
TYPESCRIPT
滚动查看更多
const readOnlyNums: ReadonlyArray<number> = [1, 2, 3];
// readOnlyNums.push(4); // Error
Sets
TYPESCRIPT
滚动查看更多
const set: Set<number> = new Set([1, 2, 3]);
set.add(4);
set.delete(1);
Maps
TYPESCRIPT
滚动查看更多
const map: Map<string, number> = new Map();
map.set('one', 1);
map.get('one'); // 1

Objects

Object Types
TYPESCRIPT
滚动查看更多
const car: { type: string; mileage?: number } = {
	type: 'Toyota'
};
Indexable Types
TYPESCRIPT
滚动查看更多
interface StringArray {
	[index: number]: string;
}

const myArray: StringArray = ['Bob', 'Fred'];
Excess Property Checks
TYPESCRIPT
滚动查看更多
interface Square {
	color: string;
	width: number;
}

// const redSquare = { color: "red", width: 100, height: 100 }; // Error if strict

Modules and Namespaces

Namespace with Internal Modules
TYPESCRIPT
滚动查看更多
namespace Geometry {
	export interface Point {
		x: number;
		y: number;
	}
	export function distance(p1: Point, p2: Point): number {
		return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
	}
}
Module Resolution

// tsconfig.json { "compilerOptions": { "moduleResolution": "node" } }

Error Handling

Try Catch
TYPESCRIPT
滚动查看更多
try {
	throw new Error('Oops');
} catch (e: unknown) {
	if (e instanceof Error) {
		console.log(e.message);
	}
}
Custom Errors
TYPESCRIPT
滚动查看更多
class CustomError extends Error {
	constructor(message: string) {
		super(message);
	}
}

TypeScript with JavaScript Features

Destructuring
TYPESCRIPT
滚动查看更多
const [first, second]: [number, number] = [1, 2];
const { name: userName, age }: { name: string; age: number } = { name: 'Alice', age: 30 };
Spread Operator
TYPESCRIPT
滚动查看更多
const arr1: number[] = [1, 2];
const arr2: number[] = [...arr1, 3, 4];
Template Literals
TYPESCRIPT
滚动查看更多
const greeting: string = `Hello, ${name}`;
Arrow Functions
TYPESCRIPT
滚动查看更多
const square = (x: number): number => x * x;

相关 Cheat Sheets

Python

pythonscripting

JavaScript

jsweb

Java

javajvm

Go

golang

Rust

rustsystems