Pengenalan TypeScript untuk Pemula: Kenapa dan Bagaimana Mulai?

TypeScript adalah superset dari JavaScript yang menambahkan static typing dan fitur-fitur modern ke dalam ekosistem JavaScript. Dikembangkan oleh Microsoft dan dirilis pertama kali pada 2012, TypeScript kini menjadi salah satu bahasa pemrograman paling populer di dunia — terutama di kalangan pengembang frontend dan backend Node.js.

Artikel ini akan membahas apa itu TypeScript, mengapa Anda perlu mempelajarinya, dan bagaimana cara memulainya.

1. Kenapa TypeScript?

❌ Masalah dengan JavaScript

JavaScript bersifat dynamically typed — tipe data diperiksa saat runtime, bukan saat kompilasi. Ini bisa menyebabkan bug yang baru ketahuan setelah aplikasi berjalan:

// JavaScript — error baru ketahuan di runtime
function add(a, b) {
  return a + b;
}

add(5, "10"); // "510" — bukan 15!

✅ Solusi TypeScript

TypeScript memeriksa tipe data saat compile time:

// TypeScript — error ketahuan saat compile
function add(a: number, b: number): number {
  return a + b;
}

add(5, "10"); // ❌ Error: Argument of type 'string' is not assignable
              //    to parameter of type 'number'

2. Keunggulan TypeScript

A. Type Checking — Deteksi Error Lebih Awal

TypeScript mendeteksi error tipe saat Anda menulis kode, bukan saat aplikasi berjalan:

interface User {
  id: number;
  name: string;
  email?: string; // optional
}

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

greet({ id: 1, name: "Budi" });       // ✅ OK
greet({ id: 2, name: "Sari", email: "sari@mail.com" }); // ✅ OK
greet({ id: 3 });                      // ❌ Error: 'name' is required

B. Autocompletion & IntelliSense

IDE seperti VS Code memberikan autocompletion yang jauh lebih akurat karena TypeScript tahu tipe setiap variabel:

const users: User[] = [
  { id: 1, name: "Budi", email: "budi@mail.com" }
];

// VS Code akan menyarankan: .id, .name, .email
users.forEach(user => {
  console.log(user.);
  //           ^ autocompletion muncul di sini
});

C. Refactoring yang Lebih Aman

Mengganti nama properti atau fungsi menjadi lebih mudah dan aman:

// Ubah nama properti 'name' menjadi 'fullName'
// TypeScript akan memberi tahu semua kode yang menggunakan properti tersebut
function displayUser(user: User) {
  return `${user.name} (${user.email})`;
}

D. Dokumentasi Hidup

Type definitions berfungsi sebagai dokumentasi yang selalu sinkron dengan kode:

type OrderStatus = "pending" | "processing" | "shipped" | "delivered";

interface Order {
  id: number;
  items: OrderItem[];
  status: OrderStatus; // Hanya bisa 4 nilai ini
  total: number;
}

3. Dasar-Dasar TypeScript

Tipe Dasar

let isDone: boolean = false;
let age: number = 25;
let name: string = "Budi";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 42];

// Union type — bisa lebih dari satu tipe
let id: string | number = "ABC123";
id = 456; // ✅ OK

// Literal type — hanya nilai tertentu
let status: "active" | "inactive" = "active";

// Any — hindari ini sebisa mungkin!
let loosely: any = 4;
loosely = "string"; // ❌ Tidak ada type checking

Interface vs Type

// Interface — bisa di-extend
interface Animal {
  name: string;
  sound(): string;
}

interface Dog extends Animal {
  breed: string;
}

// Type alias — bisa untuk union/intersection
type Cat = Animal & {
  furColor: string;
};

Generics

Generics memungkinkan fungsi/class bekerja dengan berbagai tipe:

// Tanpa generics
function getFirst(arr: any[]): any {
  return arr[0];
}

// Dengan generics
function getFirst<T>(arr: T[]): T | undefined {
  return arr[0];
}

const num = getFirst([1, 2, 3]);    // tipe: number | undefined
const str = getFirst(["a", "b"]);   // tipe: string | undefined

4. Memulai Proyek TypeScript

Instalasi

# Install TypeScript secara global
npm install -g typescript

# Cek versi
tsc --version

Inisialisasi Proyek

mkdir my-ts-project
cd my-ts-project
npm init -y
npm install typescript --save-dev
npx tsc --init

Perintah tsc --init akan membuat file tsconfig.json. Beberapa konfigurasi penting:

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

Struktur Folder

my-ts-project/
├── src/
│   └── index.ts
├── dist/
├── tsconfig.json
└── package.json

Menulis dan Menjalankan Kode

// src/index.ts
function greet(name: string): string {
  return `Halo, ${name}!`;
}

console.log(greet("Dunia"));

# Compile TypeScript ke JavaScript
npx tsc

# Jalankan output JavaScript
node dist/index.js

Mode Watch (Compile Otomatis)

npx tsc --watch

5. TypeScript di Dunia Nyata

React dengan TypeScript

interface ButtonProps {
  label: string;
  variant?: "primary" | "secondary";
  onClick: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({
  label,
  variant = "primary",
  onClick,
  disabled = false
}) => {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  );
};

Node.js dengan TypeScript

import express, { Request, Response } from 'express';

const app = express();

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

app.get('/api/users/:id', (req: Request, res: Response) => {
  const userId = parseInt(req.params.id);
  // TypeScript tahu bahwa userId bertipe number
  res.json({ data: { id: userId, name: "Budi", email: "budi@mail.com" } });
});

6. Mitos Tentang TypeScript

❌ “TypeScript itu bahasa baru, harus belajar dari nol”

TypeScript adalah superset JavaScript. Semua kode JavaScript adalah kode TypeScript yang valid. Anda bisa mulai dengan kode .js biasa lalu mengganti ekstensi ke .ts.

❌ “TypeScript memperlambat development karena harus nulis tipe”

Justru sebaliknya — setelah melewati kurva belajar awal, TypeScript mempercepat development berkat autocompletion dan deteksi error dini.

❌ “TypeScript hanya untuk proyek besar”

TypeScript bermanfaat untuk proyek berapapun ukurannya. Bahkan script kecil pun akan lebih mudah dipelihara dengan type checking.

Kesimpulan

TypeScript bukan sekadar tren — ini adalah investasi jangka panjang yang akan meningkatkan kualitas kode, produktivitas developer, dan kemudahan maintenance. Mulailah dengan proyek kecil, biasakan menulis tipe, dan nikmati manfaatnya.

“TypeScript membuat JavaScript yang menyenangkan menjadi lebih aman.”