TypeScript Cheat Sheet

# Install TypeScript
npm install -g typescript
 
# Install untuk project
npm install --save-dev typescript
 
# Install dengan pnpm
pnpm add

# Bikin tsconfig.json
tsc --init
 
# Compile TypeScript
tsc
 
# Watch mode
tsc --watch
 
# Compile specific file
tsc file.ts

{
 "compilerOptions": {
  "target": "ES2020",
  "module": "ESNext",
  "lib": ["ES2020", "DOM"],
  "outDir": "./dist",
  "rootDir": "./src",

// String
let name: string = "Budi";
let greeting: string = `Hello, ${name}`;
 
// Number
let age: number = 25

// Array dengan tipe tertentu
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] =

// Object type
let user: { name: string; age: number } = {
 name: "Budi",
 age: 25
};
 
// Optional properties
let person

// Any (hindari sebisa mungkin!)
let anything: any = "hello";
anything = 42;
anything = true;
 
// Unknown (lebih aman dari any)
let userInput: unknown =

// Simple type alias
type ID = string | number;
type Username = string;
 
// Object type alias
type User = {
 id: ID;
 name:

// Basic interface
interface Product {
 id: number;
 name: string;
 price: number;
}
 
// Optional & readonly
interface User

// Type alias bisa union
type Pet = Dog | Cat;
 
// Interface bisa di-merge (declaration merging)
interface Window {
 title: string;
}
 
interface Window {
 version: number;

// Function declaration
function add(a: number, b: number): number {
 return a + b;
}
 
// Function expression

// Overload signatures
function getValue(id: number): string;
function getValue(name: string): number;
 
// Implementation signature
function getValue(

interface User {
 name: string;
 greet(this: User): void;
}
 
const user: User = {
 name: "Budi",
 greet(

// Basic generic
function identity<T>(arg: T): T {
 return arg;
}
 
let result1 = identity<string>(

// Generic interface
interface Box<T> {
 value: T;
}
 
let stringBox: Box<string> = { value: "hello" };
let numberBox: Box

class Stack<T> {
 private items: T[] = [];
 
 push(item: T): void {
  this.items.push(item);
 }

// Extends constraint
function merge<T extends object, U extends object>(obj1: T, obj2: U): T & U {
 return { 

// Union type
let id: string | number;
id = "abc123"; // OK
id = 123;    // OK
 
// Function dengan union parameter
function printId(id

// Intersection type (&)
interface Person {
 name: string;
 age: number;
}
 
interface Employee {
 employeeId: number;
 department: string;
}

// Tagged union
interface Circle {
 kind: "circle";
 radius: number;
}
 
interface Square {
 kind: "square";
 sideLength: number;

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

// Basic mapped type
type Optional<T> = {
 [K in keyof T]?: T[K];
};
 
// Readonly mapper
type ReadonlyType<T> 

// Basic conditional type
type IsString<T> = T extends string ? true : false;
 
type A = IsString<string>; // true
type B

// String literal types
type EventName = "click" | "scroll" | "mousemove";
type HandlerName = `on${Capitalize<EventName>}`;
// "onClick" | "onScroll" | "onMousemove"
 
// More complex
type PropEventSource

class Person {
 // Properties
 name: string;
 age: number;
 
 // Constructor
 constructor(name: string, age: number) {
  this.name =

class BankAccount {
 public accountNumber: string;   // Bisa diakses dari mana aja
 private balance: number;      // Cuma di dalam class
 protected owner: string;      // Di dalam class & subclass

// Shorthand untuk properties di constructor
class User {
 constructor(
  public name: string,
  private age: number,
  readonly id: string
 ) {}
}
 
// Sama aja kayak:

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

class MathUtils {
 static PI = 3.14159;
 
 static calculateCircleArea(radius: number): number {
  return this.PI * radius ** 2;
 }

// Enable decorators di tsconfig.json
// "experimentalDecorators": true
 
function sealed(constructor: Function) {
 Object.seal(constructor);
 Object.seal(constructor.prototype);
}
 
@sealed
class BugReport

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 const original = descriptor.value;
 
 descriptor.value = function(...

function readonly(target: any, propertyKey: string) {
 Object.defineProperty(target, propertyKey, {
  writable: false
 });
}
 
class Person {
 @readonly
 name: string =

// Named exports
export const PI = 3.14159;
export function add(a: number, b: number): number {
 return a + b;

// Named imports
import { PI, add, User } from "./math";
 
// Import dengan rename
import { secret as apiKey } from "./config";
 
// Import all
import * as MathUtils from "./math";
 

function printValue(value: string | number): void {
 if (typeof value === "string") {
  console.log(value.toUpperCase());
 } else {
  console.log

class Dog {
 bark() { console.log("Woof!"); }
}
 
class Cat {
 meow() { console.log("Meow!"); }
}
 
function makeSound(animal: Dog

interface Bird {
 fly(): void;
}
 
interface Fish {
 swim(): void;
}
 
function move(animal: Bird | Fish)

function isString(value: any): value is string {
 return typeof value === "string";
}
 
function process(value: string | number)

// TypeScript 5.0
function createArray<const T>(items: readonly T[]): readonly T[] {
 return items;
}
 
const arr = createArray([1, 2, 

// TypeScript 4.9+
type RGB = [number, number, number];
 
const color = { r: 255, g: 0, b: 0 } satisfies RGB;
// Type checking tanpa mengubah inferred type

// TypeScript 5.0
enum Status {
 Active = "ACTIVE",
 Inactive = "INACTIVE"
}
 
// Better type checking & performance

// Explicit typing (good)
const name: string = "Budi";
const age: number = 25;
 
// Type inference (also good)
const name = "Budi"; // TypeScript tahu ini string
const age =

// Bad
function process(data: any): any {
 return data;
}
 
// Good - use generics
function process<T>(data: T): T

// tsconfig.json
{
 "compilerOptions": {
  "strict": true,
  // atau individually:
  "noImplicitAny": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictBindCallApply": true