Panduan Lengkap TypeScript untuk Pemula: Dari Dasar hingga Best Practices

Apa itu TypeScript?

TypeScript adalah superset dari JavaScript yang menambahkan static type checking ke dalam bahasa. Dikembangkan oleh Microsoft, TypeScript telah menjadi standar de facto untuk proyek JavaScript skala besar.

Bayangkan TypeScript sebagai JavaScript dengan “safety net”. Anda masih menulis JavaScript, tapi dengan tambahan type annotations yang membantu menangkap bug sebelum kode dijalankan.

Mengapa Belajar TypeScript?

Early Bug Detection: Tangkap error saat development, bukan saat runtime
Better Tooling: Autocomplete dan refactoring yang lebih powerful
Self-Documenting Code: Types berfungsi sebagai dokumentasi
Industry Standard: Digunakan oleh perusahaan besar seperti Google, Microsoft, dan Airbnb
Framework Support: React, Vue, Angular semuanya mendukung TypeScript

Setup TypeScript

Instalasi

# Install TypeScript globally
npm install -g typescript

# Atau install per-project (recommended)
npm install --save-dev typescript

# Inisialisasi tsconfig.json
npx tsc --init

Konfigurasi tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Type Dasar

Primitive Types

TypeScript memiliki tipe primitif yang sama dengan JavaScript, plus beberapa tambahan:

// String
let nama: string = "Alifbima";

// Number
let umur: number = 25;

// Boolean
let aktif: boolean = true;

// Array
let hobi: string[] = ["coding", "gaming", "reading"];
let angka: Array<number> = [1, 2, 3];

// Tuple
let koordinat: [number, number] = [10, 20];

// Enum
enum Status {
  Pending,
  Active,
  Completed
}
let status: Status = Status.Active;

// Any (hindari jika mungkin)
let data: any = "bisa apa saja";

// Unknown (lebih aman dari any)
let input: unknown = getUserInput();

// Void
function log(message: string): void {
  console.log(message);
}

// Never
function throwError(message: string): never {
  throw new Error(message);
}

Type Inference

TypeScript cukup pintar untuk meng-infer type dari value:

// TypeScript tahu ini string
let pesan = "Hello, World!";

// TypeScript tahu ini number[]
let numbers = [1, 2, 3, 4, 5];

// TypeScript tahu return type adalah number
function add(a: number, b: number) {
  return a + b;
}

Interfaces dan Type Aliases

Interface

Interface mendefinisikan bentuk dari sebuah object:

interface User {
  id: number;
  name: string;
  email: string;
  age?: number; // Optional property
  readonly createdAt: Date; // Read-only property
}

function createUser(user: User): User {
  return {
    ...user,
    createdAt: new Date()
  };
}

// Extending interfaces
interface Admin extends User {
  role: string;
  permissions: string[];
}

Type Alias

Type alias bisa mendefinisikan types yang lebih kompleks:

// Union types
type Status = "pending" | "active" | "completed";

// Intersection types
type Employee = User & {
  department: string;
  salary: number;
};

// Function types
type Callback = (data: string) => void;

// Generic type alias
type Response<T> = {
  data: T;
  error: string | null;
  loading: boolean;
};

Interface vs Type: Kapan Menggunakan Masing-masing?

Gunakan Interface	Gunakan Type
Untuk object shapes	Untuk unions
Ketika butuh extends	Untuk tuples
Untuk declaration merging	Untuk mapped types

Generics

Generics memungkinkan Anda menulis code yang reusable dan type-safe:

// Generic function
function identity<T>(arg: T): T {
  return arg;
}

const result1 = identity<string>("hello");
const result2 = identity<number>(42);

// Generic interface
interface Box<T> {
  content: T;
}

const stringBox: Box<string> = { content: "hello" };
const numberBox: Box<number> = { content: 42 };

// Generic constraints
interface Lengthwise {
  length: number;
}

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

logLength("hello"); // OK
logLength([1, 2, 3]); // OK
// logLength(123); // Error: number tidak punya length

Advanced Types

Utility Types

TypeScript menyediakan utility types bawaan yang sangat berguna:

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

// Partial - semua property jadi optional
type PartialUser = Partial<User>;

// Required - semua property jadi required
type RequiredUser = Required<PartialUser>;

// Pick - pilih property tertentu
type UserPreview = Pick<User, "id" | "name">;

// Omit - hilangkan property tertentu
type SafeUser = Omit<User, "password">;

// Record - create object type
type UserRoles = Record<string, string[]>;

// Readonly - semua property jadi readonly
type ImmutableUser = Readonly<User>;

Narrowing

TypeScript bisa mempersempit type berdasarkan kondisi:

function processValue(value: string | number) {
  if (typeof value === "string") {
    // TypeScript tahu ini string
    console.log(value.toUpperCase());
  } else {
    // TypeScript tahu ini number
    console.log(value.toFixed(2));
  }
}

// Type guards
function isUser(obj: unknown): obj is User {
  return (
    typeof obj === "object" &&
    obj !== null &&
    "id" in obj &&
    "name" in obj
  );
}

Best Practices

1. Gunakan Strict Mode

Selalu enable strict mode di tsconfig.json:

{
  "compilerOptions": {
    "strict": true
  }
}

2. Hindari Any

any mengalahkan tujuan TypeScript. Gunakan unknown jika perlu:

// ❌ Buruk
function processData(data: any) {
  data.anything(); // Tidak ada error checking
}

// ✅ Baik
function processData(data: unknown) {
  if (typeof data === "object" && data !== null) {
    // Type-safe processing
  }
}

3. Preferensikan Immutability

// ✅ Gunakan readonly untuk arrays
function processItems(items: readonly string[]) {
  // items.push("new"); // Error!
  return items.map(item => item.toUpperCase());
}

// ✅ Gunakan as const untuk literal types
const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
} as const;

4. Type Your Function Returns

Meskipun TypeScript bisa infer return type, explicit return types membantu dokumentasi:

// ✅ Explicit return type
function fetchUser(id: number): Promise<User> {
  return fetch(`/api/users/${id}`).then(res => res.json());
}

Kesimpulan

TypeScript adalah investasi yang worth it untuk setiap JavaScript developer. Learning curve-nya memang ada, tapi benefits-nya jauh lebih besar:

Fewer runtime errors
Better code quality
Improved developer experience
Easier refactoring

Mulai dengan proyek kecil, enable strict mode dari awal, dan secara bertahap tingkatkan kemampuan TypeScript Anda. Dalam waktu singkat, Anda akan bertanya-tanya bagaimana bisa coding tanpa TypeScript sebelumnya!

Next article: Advanced TypeScript Patterns untuk Production. Stay tuned!