TypeScript untuk Pemula: Panduan Lengkap
TypeScript adalah superset dari JavaScript yang menambahkan static typing. Dalam tutorial ini, kita akan belajar dasar-dasar TypeScript yang wajib diketahui.
Apa itu TypeScript?
TypeScript = JavaScript + Static Typing
TypeScript di-compile ke JavaScript, jadi kode TypeScript bisa jalan di browser atau Node.js.
Tipe Dasar
String, Number, Boolean
let name: string = "John";
let age: number = 25;
let isActive: boolean = true;Array
let numbers: number[] = [1, 2, 3];
let names: string[] = ["Alice", "Bob"];
let mixed: (string | number)[] = ["text", 123];Tuple
Tuple adalah array dengan tipe dan jumlah elemen yang sudah ditentukan.
let person: [string, number] = ["John", 25];
// person[0] adalah string, person[1] adalah numberEnum
Enum memudahkan kerja dengan kumpulan nilai yang terkait.
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT"
}
let move: Direction = Direction.Up;Interface
Interface mendefinisikan struktur object.
interface User {
id: number;
name: string;
email: string;
age?: number; // Optional property
}
function greet(user: User): string {
return `Hello, ${user.name}!`;
}
const user: User = {
id: 1,
name: "John",
email: "john@example.com"
};
console.log(greet(user));Type Alias
Type alias memberikan nama untuk tipe yang kompleks.
type Point = { x: number; y: number };
type ID = string | number;
type Callback = (data: string) => void;
const point: Point = { x: 10, y: 20 };
const userId: ID = "abc123";Generics
Generics memungkinkan kita membuat komponen yang bekerja dengan berbagai tipe.
function identity<T>(value: T): T {
return value;
}
const num = identity<number>(42);
const str = identity<string>("hello");Generic Interface
interface ApiResponse<T> {
data: T;
status: number;
message: string;
}
const userResponse: ApiResponse<User> = {
data: { id: 1, name: "John", email: "john@example.com" },
status: 200,
message: "Success"
};Type Assertion
Type assertion memberitahu TypeScript bahwa kita tahu tipe yang lebih spesifik.
let value: unknown = "hello";
let strLength: number = (value as string).length;
// atau
let strLength2: number = (<string>value).length;Utility Types
TypeScript menyediakan utility types bawaan.
interface User {
id: number;
name: string;
email: string;
password: string;
}
// Buat tipe baru tanpa password
type UserWithoutPassword = Omit<User, 'password'>;
// Buat tipe baru dengan semua property optional
type PartialUser = Partial<User>;
// Buat tipe baru dengan semua property readonly
type ReadonlyUser = Readonly<User>;Function Types
// Function declaration
function add(a: number, b: number): number {
return a + b;
}
// Function expression
const multiply = (a: number, b: number): number => a * b;
// Callback type
function processValue(value: number, callback: (result: number) => void): void {
callback(value * 2);
}
processValue(5, (result) => console.log(result)); // 10Class & OOP
class Animal {
protected name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number): void {
console.log(`${this.name} moved ${distance}m.`);
}
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
bark(): void {
console.log(`${this.name} barks: woof!`);
}
}
const dog = new Dog("Buddy");
dog.bark(); // Buddy barks: woof!
dog.move(10); // Buddy moved 10m.Union & Intersection Types
// Union type
type ID = string | number;
function printId(id: ID) {
console.log(id);
}
printId("abc123");
printId(12345);
// Intersection type
type Person = { name: string; age: number };
type Employee = { employeeId: number };
type EmployeePerson = Person & Employee;
const emp: EmployeePerson = {
name: "John",
age: 30,
employeeId: 1001
};Type Guards
Type guards membantu narrow down tipe di runtime.
function process(value: string | number) {
if (typeof value === "string") {
// value adalah string di sini
console.log(value.toUpperCase());
} else {
// value adalah number di sini
console.log(value.toFixed(2));
}
}
// Custom type guard
interface Cat {
name: string;
meow: () => void;
}
interface Dog {
name: string;
bark: () => void;
}
function isCat(animal: Cat | Dog): animal is Cat {
return (animal as Cat).meow !== undefined;
}
function makeSound(animal: Cat | Dog) {
if (isCat(animal)) {
animal.meow();
} else {
animal.bark();
}
}Kesimpulan
TypeScript membuat kode JavaScript lebih aman dan mudah dipelihara. Mulai dengan tipe dasar, lalu eksplorasi interface, generics, dan utility types.
Latihan
Buat tipe untuk API response berikut:
- List of users
- Each user has: id, name, email, role (admin/user/guest)
- Pagination info: currentPage, totalPages, totalItems
Selamat belajar! 🚀
Coba Sendiri
Klik Run untuk mengeksekusi contoh di bawah ini langsung di halaman.
JavaScript (in-browser)
const items = ["TypeScript", "JavaScript", "React", "Next.js"];
items.forEach((item, index) => {
console.log(`${index + 1}. Belajar ${item}`);
});
console.warn("Ini pesan peringatan");
console.error("Dan ini pesan error (tapi bukan crash)");
console.info("Selesai!");HTML (in-browser)
<h1 style="color:#5b5ef4">Halo dari CodeRunner!</h1>
<p>HTML di atas dirender di dalam sandboxed iframe.</p>
<button onclick="this.textContent = 'Diklik!'" style="padding:6px 12px;border:1px solid #ccc;border-radius:6px;background:#f4f4f5;cursor:pointer">
Klik saya
</button>Python (via Piston)
def fib(n):
a, b = 0, 1
for _ in range(n):
print(a, end=" ")
a, b = b, a + b
print()
fib(10)TypeScript (via Piston)
type Course = { title: string; lessons: number };
const course: Course = { title: "TypeScript untuk Pemula", lessons: 16 };
console.log(`${course.title}: ${course.lessons} pelajaran`);Playground Interaktif (Monaco)
Untuk snippet yang lebih panjang dan ingin kamu edit langsung, gunakan blok playground-*. Monaco editor di-load lazily — halaman tetap ringan, dan snippet Shiki-nya langsung tampil sebelum editor siap.
type Course = {
title: string;
lessons: number;
tags: string[];
};
const courses: Course[] = [
{ title: "TypeScript untuk Pemula", lessons: 16, tags: ["ts", "frontend"] },
{ title: "Belajar React Hooks", lessons: 12, tags: ["react", "frontend"] },
{ title: "Data Modelling", lessons: 20, tags: ["db", "backend"] },
];
const total = courses.reduce((sum, c) => sum + c.lessons, 0);
console.log(`Total pelajaran: ${total}`);
for (const course of courses) {
console.log(`- ${course.title} (${course.lessons} pelajaran)`);
}def greet(name: str, *, excited: bool = False) -> str:
suffix = "!" if excited else "."
return f"Halo, {name}{suffix}"
names = ["Reza", "Dosen", "Programming"]
for index, name in enumerate(names, start=1):
print(f"{index}. {greet(name, excited=(index == 1))}")Tips: Klik tombol Run di pojok kanan atas setiap blok untuk mengeksekusi kode lewat Piston API. Edit kode langsung di Monaco, lalu klik Reset untuk kembali ke versi awal.
Cek Pemahaman
Jawab kuis di bawah ini untuk menguji pemahamanmu. Jawaban tersimpan di browser, jadi kamu bisa menutup dan membuka halaman tanpa kehilangan progres.
Kuis
Manakah pernyataan paling tepat tentang TypeScript?
Kuis · Multi-select
Tipe data primitif mana saja yang termasuk bawaan TypeScript?