40 Pertanyaan dan Jawaban Wawancara TypeScript Teratas untuk 2026

TypeScript telah berkembang dari sebuah superset JavaScript yang khusus menjadi bahasa inti untuk pengembangan web modern. 

Dari pengalaman saya mengerjakan aplikasi web, saya melihat langsung bagaimana pengetikan yang kuat dan kemudahan pemeliharaan dapat secara signifikan mengurangi bug dan meningkatkan kolaborasi lintas tim. 

TypeScript menyediakan semua itu, itulah sebabnya bahasa ini menjadi standar industri untuk pengembangan modern.

Dari Microsoft (penciptanya) hingga Google, Airbnb, dan Netflix, banyak organisasi mengandalkan TypeScript untuk menjalankan produk yang ditulis dengan kerangka kerja seperti React, Angular, dan Node.js. 

Dalam pekerjaan saya, saya sering melihat lowongan pekerjaan yang mencantumkan kemahiran TypeScript sebagai persyaratan inti, bukan sekadar keterampilan opsional.

Setelah menggunakan TypeScript sendiri, dapat dikatakan bahwa memahami tipe, interface, dan fitur lanjutannya sangat penting bagi setiap pengembang yang mempersiapkan diri untuk wawancara teknis.

Pertanyaan Wawancara TypeScript Dasar

Mari kita lihat beberapa pertanyaan wawancara TypeScript yang umum dan bagaimana kaitannya dengan keamanan serta kejelasan kode.

1. Mengapa menggunakan TypeScript dibandingkan JavaScript?

TypeScript menambahkan pengetikan statis dan pemeriksaan kesalahan saat kompilasi, yang membantu pengembang mendeteksi bug lebih awal dan membuat basis kode lebih dapat diprediksi.

Ini memastikan kode lebih mudah dipelihara dan diskalakan.

2. Masalah apa yang diselesaikan TypeScript?

TypeScript mengatasi kelemahan JavaScript dalam hal keamanan tipe, skalabilitas, dan keterbacaan.

Penerapan definisi tipe yang jelas mencegah bug saat runtime yang samar dan membuat refactoring lebih aman.

3. Apa manfaat utama menggunakan pengetikan statis di TypeScript?

Pengetikan statis meningkatkan keandalan kode, pelengkapan otomatis, dan produktivitas pengembang.

Ini membantu mendeteksi kesalahan tipe sejak dini dan memungkinkan IDE menyediakan dukungan alat yang lebih kaya.

4. Apa itu anotasi tipe dan mengapa bermanfaat?

Anotasi tipe memungkinkan pengembang menyatakan tipe variabel secara eksplisit.

Ini meningkatkan keterbacaan kode dan mengurangi kesalahan saat runtime.

Berikut contohnya:

let username: string = "DataCamper";
let age: number = 25;
let isAdmin: boolean = true;

Pada kode di atas, kompiler memastikan hanya tipe yang benar yang dapat diberikan ke setiap variabel.

Misalnya, jika Anda mencoba menetapkan string ke age, TypeScript akan menampilkan error, yang membantu menangkap kesalahan lebih awal.

Pengetikan eksplisit sangat penting untuk parameter fungsi, tipe pengembalian, dan kontrak API, karena menyampaikan ekspektasi kepada pengembang lain.

5. Apa itu inferensi tipe di TypeScript?

TypeScript dapat secara otomatis menginferensikan tipe berdasarkan nilai yang diberikan.

Artinya, Anda tidak selalu perlu menyatakan tipe secara eksplisit. TypeScript yang menentukannya untuk Anda.

Berikut contohnya:

let count = 10;  // inferred as number
count = "hello"; // Error: Type 'string' is not assignable to type 'number'

Dalam contoh ini, TypeScript menyimpulkan bahwa count harus berupa number berdasarkan nilai awalnya, sehingga menetapkan string kemudian akan menyebabkan error saat kompilasi. 

Praktik terbaik untuk inferensi tipe meliputi:

• Gunakan tipe eksplisit untuk fungsi, kelas, dan interface yang diekspor guna menyediakan kontrak yang jelas.
• Biarkan inferensi untuk variabel lokal ketika tipenya sudah jelas.
• Hindari menggunakan any kecuali benar-benar diperlukan, karena itu melewati fitur keamanan TypeScript.

6. Bagaimana TypeScript menangani array, tuple, dan enum?

TypeScript memungkinkan pengembang menerapkan tipe ketat pada array, tuple, dan enum untuk meningkatkan kejelasan dan mencegah kesalahan saat runtime.

Berikut contoh array bertipe:

let scores: number[] = [95, 80, 85];
scores.push(100); // OK
scores.push("A+"); // Error

Array bertipe memastikan semua elemen dalam array mengikuti tipe yang sama.

Berikut contoh tuple:

let user: [string, number] = ["Don", 25];

Tuple mendefinisikan array dengan panjang tetap dan tipe tertentu untuk setiap posisinya.

Ini berguna untuk data terstruktur di mana urutan dan tipe elemen penting.

Berikut contoh enum:

enum Status {
  Active,
  Inactive,
  Pending,
}
let currentStatus: Status = Status.Active;

Enum menyediakan konstanta bernama, meningkatkan keterbacaan dan mengurangi nilai yang tidak valid.

Enum sangat berguna untuk kode status, peran, dan opsi konfigurasi.

7. Apa perbedaan antara tipe any, unknown, dan never?

Tabel berikut menyoroti perbedaan utama antara tipe any, unknown, dan never di TypeScript.

Berikut contohnya:

function fail(): never {
  throw new Error("Something went wrong");
}

Saran: lebih baik memilih unknown daripada any untuk menjaga keamanan tipe sekaligus tetap fleksibel.

8. Apa perbedaan antara null dan undefined di TypeScript?

Perbedaan utama antara null dan undefined adalah:

• undefined berarti sebuah variabel telah dideklarasikan tetapi belum diberi nilai.

• null adalah nilai eksplisit yang berarti tidak ada nilai.

Mode strictNullChecks TypeScript memperlakukan keduanya sebagai tipe yang terpisah, yang mencegah bug terkait null secara tidak sengaja.

Berikut contohnya:

let a: string | null = null;
let b: string | undefined = undefined;

9. Apa yang dilakukan opsi kompiler strict?

Flag strict mengaktifkan semua aturan pemeriksaan tipe ketat TypeScript, seperti:

• strictNullChecks: Mencegah nilai null dan undefined diberikan ke variabel kecuali secara eksplisit diizinkan, membantu menghindari error referensi null saat runtime.

• noImplicitAny: Mengharuskan semua variabel memiliki tipe eksplisit atau terinferensi, mencegah TypeScript menggunakan default any.

• strictFunctionTypes: Menerapkan aturan yang lebih ketat untuk kompatibilitas tipe fungsi, menangkap ketidaksesuaian pada parameter dan tipe pengembalian fungsi.

• strictBindCallApply: Memastikan metode bind, call, dan apply digunakan dengan tipe argumen yang benar untuk fungsi.

Ini memastikan kode lebih aman, lebih dapat diprediksi, dan menangkap bug halus sejak dini.

Pertanyaan Wawancara Sistem Tipe TypeScript

Mari kita lihat beberapa konsep sistem tipe TypeScript kunci yang umum dibahas dalam wawancara teknis.

10. Apa perbedaan antara interface dan type alias di TypeScript?

Baik interface maupun type alias menggambarkan bentuk objek, tetapi keduanya memiliki tujuan yang sedikit berbeda.

Interface dapat diperluas menggunakan extends, sehingga ideal untuk model objek hierarkis.

Type alias dapat merepresentasikan union, intersection, primitif, dan tipe komposit yang lebih kompleks.

Berikut contohnya:

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

type Employee = {
  name: string;
  department: string;
};

Gunakan interface saat mendefinisikan bentuk objek atau kontrak kelas.

Gunakan type alias saat Anda memerlukan tipe yang fleksibel dan dapat dikomposisikan seperti union atau intersection.

11. Apa itu tipe union dan intersection di TypeScript?

Tipe union memungkinkan sebuah variabel memiliki beberapa kemungkinan tipe, sementara tipe intersection menggabungkan beberapa tipe menjadi satu.

Berikut contoh union:

let id: string | number;
id = ‘abc’; // OK
id = 123; // OK

Berikut contoh intersection:

type Admin = { name: string };
type Permissions = { canEdit: boolean };
type AdminUser = Admin & Permissions;

Tipe union sering digunakan pada parameter fungsi.

Tipe intersection umum dalam komposisi objek yang kompleks.

12. Apa itu type narrowing, dan bagaimana type guard bekerja?

Type narrowing memungkinkan TypeScript menyimpulkan tipe yang lebih spesifik berdasarkan alur kontrol.

Berikut contohnya:

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed());
  }
}

Type guard memastikan operasi runtime yang aman dengan memverifikasi tipe sebelum melakukan tindakan tertentu.

Anda dapat menggunakan:

• typeof: untuk primitif

• instanceof: untuk kelas

• Custom type guards: menggunakan sintaks param is Type

Type guard meningkatkan keamanan tipe dan mengurangi kesalahan saat runtime.

13. Apa itu literal types dan discriminated unions di TypeScript?

Literal types membatasi variabel pada sekumpulan nilai yang telah ditentukan.

Berikut contohnya:

let direction: "up" | "down" | "left" | "right";

Discriminated unions menggabungkan literal types dengan varian objek untuk pencocokan pola.

Berikut contohnya:

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(shape: Shape): number {
  if (shape.kind === "circle") return Math.PI * shape.radius ** 2;
  return shape.side ** 2;
}

Discriminated unions memungkinkan percabangan yang aman pada tipe objek dan menyederhanakan logika dalam aplikasi kompleks.

14. Apa itu keyof, typeof, dan in di TypeScript?

Operator ini menyediakan refleksi tingkat tipe yang kuat.

• Keyof: mengambil nama properti dari sebuah tipe

• typeof: mengambil tipe dari sebuah nilai

• in: digunakan dalam mapped types

Berikut contohnya:

type Keys = keyof User; // "name" | "age"
const person = { name: "Alice", age: 25 };
type PersonType = typeof person; // { name: string; age: number }

15. Apa itu index signatures di TypeScript?

Index signatures memungkinkan objek dengan kunci dinamis.

Berikut contohnya:

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

const messages: Errors = {
  email: "Invalid email",
  password: "Required"
};

Ini digunakan untuk kamus, objek mirip map, atau pola konfigurasi dinamis.

16. Apa itu structural typing di TypeScript?

Structural typing (duck typing) berarti tipe dinyatakan kompatibel berdasarkan strukturnya, bukan namanya.

Berikut contohnya:

interface Point { x: number; y: number; }
let p = { x: 10, y: 20, z: 30 };
let q: Point = p; // OK karena cocok secara struktural

Ini membuat TypeScript fleksibel dan bekerja baik dengan pola JavaScript.

17. Apa itu declaration merging di TypeScript?

Declaration merging terjadi ketika TypeScript menggabungkan beberapa deklarasi dengan nama yang sama.

Berikut contoh penggabungan dua interface:

interface User { name: string; }
interface User { age: number; }
const u: User = { name: "Rob", age: 30 }; // merged

Ini berguna saat memperluas tipe pihak ketiga atau menambah fungsionalitas pustaka.

Pertanyaan Wawancara TypeScript Lanjutan

Berikut pertanyaan dan jawaban TypeScript tingkat lanjut.

18. Apa itu generics di TypeScript, dan mengapa bermanfaat?

Generics memungkinkan Anda menulis fungsi dan kelas yang dapat digunakan kembali, aman terhadap tipe, dan bekerja dengan berbagai tipe data.

Berikut contoh fungsi generic:

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

let output = identity<string>("DataCamp");
let outputNumber = identity<number>(42);

Berikut contoh kelas generic:

class Box<T> {
  content: T;
  constructor(content: T) {
    this.content = content;
  }
  getContent(): T {
    return this.content;
  }
}

let stringBox = new Box("Hello");
let numberBox = new Box(123);

Praktik terbaik meliputi:

• Gunakan nama deskriptif seperti <T>, <K, V>, atau nama khusus domain.

• Hindari kompleksitas yang tidak perlu.

• Gunakan batasan (extends) untuk membatasi tipe yang dapat diterima.

Generics meningkatkan ketergunaan ulang kode dengan mengurangi duplikasi dan menerapkan konsistensi tipe.

19. Apa itu utility types di TypeScript, dan bagaimana cara menggunakannya?

TypeScript menyediakan utility types bawaan untuk memanipulasi dan mentransformasikan tipe yang ada secara efisien.

Berikut contohnya:

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

type PartialTodo = Partial<Todo>; // semua properti opsional
type RequiredTodo = Required<Todo>; // semua properti wajib
type TodoPreview = Pick<Todo, "title" | "completed">; // pilih properti tertentu
type TodoWithoutDescription = Omit<Todo, "description">; // kecualikan properti

Ini sangat berguna saat bekerja dengan respons API, formulir, atau props komponen.

Saran: manfaatkan utility types bila memungkinkan untuk menyederhanakan kode dan menerapkan konsistensi tipe.

20. Apa itu conditional dan mapped types di TypeScript?

Conditional types memungkinkan Anda mendefinisikan logika di dalam tipe berdasarkan hubungan di antaranya.

Berikut contohnya:

type IsString<T> = T extends string ? "yes" : "no";
type Result1 = IsString<string>; // "yes"
type Result2 = IsString<number>; // "no"

Mapped types memungkinkan Anda mentransformasikan semua properti dari sebuah tipe sekaligus.

Berikut contohnya:

type ReadonlyTodo = {
  readonly [K in keyof Todo]: Todo[K];
};

type OptionalTodo = {
  [K in keyof Todo]?: Todo[K];
};

Perbedaan kuncinya adalah:

• keyof mengekstrak nama properti dari sebuah tipe.
• typeof mengambil tipe dari variabel atau objek. Menggabungkannya memungkinkan manipulasi tipe dinamis dan refactoring yang lebih aman.

21. Apa kegunaan keyword infer di TypeScript?

infer memungkinkan Anda mengekstrak (menginferensikan) sebuah tipe di dalam conditional type.

Berikut contohnya:

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

type R = ReturnType<() => number>; // number

Sering digunakan dalam utilitas tingkat lanjut dan transformasi tipe generic.

22. Apa itu template literal types?

Template literal types membentuk tipe string menggunakan interpolasi.

Berikut contohnya:

type Event = ${string}Changed;
let e: Event = "nameChanged"; // OK

Ini berguna untuk:

• Penamaan event
• Pola kelas CSS
• Pola rute API

23. Apa itu satisfies dan as const dalam TypeScript?

satisfies memastikan sebuah nilai memenuhi sebuah tipe namun tetap mempertahankan tipe literalnya sendiri. 

Contoh:

const config = {
  mode: "dark",
  version: 1
} satisfies { mode: string; version: number };

as const membuat semua properti hanya-baca dan literal. 

Contoh:

const directions = ["up", "down"] as const;
// type is readonly ["up", "down"]

Baik satisfies maupun as const berguna dalam React, objek konfigurasi, dan discriminated unions.

Pertanyaan Wawancara TypeScript tentang Fungsi dan Objek

Pada bagian ini, kita akan membahas pertanyaan wawancara TypeScript terkait fungsi dan objek.

24. Bagaimana cara kerja function overloading di TypeScript?

Function overloading memungkinkan Anda mendefinisikan beberapa tanda tangan fungsi untuk tipe atau pola argumen yang berbeda.

Berikut contohnya:

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

let sumNumbers = add(5, 10); // 15
let sumStrings = add("Hello, ", "World"); // "Hello, World"

Praktik terbaik meliputi:

• Deklarasikan semua overload yang mungkin sebelum implementasi.
• Gunakan type guard untuk menangani banyak tipe dengan aman.

25. Apa itu parameter opsional dan rest di TypeScript?

Parameter opsional dan rest membuat fungsi lebih fleksibel dan ekspresif.

Berikut contohnya:

function greet(name: string, age?: number) {
  console.log(Hello ${name}, age: ${age ?? "unknown"});
}

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

Aturan kunci untuk menggunakan parameter opsional dan rest adalah:

• Gunakan ? untuk parameter opsional.

• Gunakan ... untuk parameter rest (argumen variadik).

Ini sering diuji dalam wawancara untuk menilai seberapa baik Anda menangani input fungsi yang dinamis.

26. Apa perbedaan antara readonly dan const di TypeScript?

const berlaku untuk variabel, sedangkan readonly berlaku untuk properti objek.

Berikut contohnya:

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

const user: User = { id: 1, name: "Bob" };
// user.id = 2; // Error: Cannot assign to 'id'

const { id, name } = user;
console.log(User ${name} has ID ${id});

Beberapa praktik terbaik untuk menggunakan readonly dan const adalah:

• Gunakan readonly untuk objek yang tidak boleh diubah, seperti data yang dikembalikan dari API.
• Gunakan const untuk variabel yang tidak boleh diubah referensinya.
• Gabungkan destructuring dengan anotasi tipe untuk kode yang lebih rapi dan mudah dipahami.

27. Apa itu varians tipe fungsi (covariance dan contravariance)?

Varians tipe fungsi menjelaskan bagaimana TypeScript memutuskan apakah satu tipe fungsi dapat dengan aman menggantikan yang lain, berdasarkan tipe parameter dan tipe pengembaliannya.

Tipe pengembalian: Kovarian

Sebuah fungsi boleh mengembalikan tipe yang lebih spesifik daripada yang diharapkan pemanggil. Contoh:

type Animal = { name: string };
type Dog = Animal & { bark: () => void };

let f: () => Animal;
let g: () => Dog = () => ({ name: "Rex", bark() {} });

f = g; // OK: Dog adalah subtipe dari Animal

Tipe parameter: Kontravarian

Sebuah fungsi boleh menerima tipe parameter yang lebih umum daripada yang diharapkan. Contoh:

type Dog = { name: string; bark: () => void };
type Animal = { name: string };

type HandleDog = (dog: Dog) => void;
type HandleAnimal = (animal: Animal) => void;

let handleDog: HandleDog = d => console.log(d.bark());
let handleAnimal: HandleAnimal = a => console.log(a.name);

// Fungsi yang menerima Animal lebih umum,
// sehingga dapat menggantikan yang menerima Dog
handleDog = handleAnimal; // OK

28. Apa itu this types di TypeScript?

this types memungkinkan metode mengembalikan tipe yang sama dengan kelasnya, berguna untuk API yang fluent:

class Builder {
  setName(name: string): this {
    // ...
    return this;
  }
}
new Builder().setName("Test"); // chaining berfungsi

Pertanyaan Wawancara OOP di TypeScript

Pertanyaan berikut membahas konsep OOP TypeScript kunci yang sering didiskusikan dalam wawancara teknis.

29. Bagaimana TypeScript mendukung pemrograman berorientasi objek (OOP)?

TypeScript mendukung prinsip OOP seperti class, pewarisan, dan access modifier.

Class mendefinisikan cetak biru yang dapat digunakan ulang untuk objek, dan pewarisan memungkinkan satu class memperluas class lain untuk berbagi properti dan perilaku.

Berikut contohnya:

class Animal {
  constructor(public name: string) {}

  move(distance: number) {
    console.log(${this.name} moved ${distance}m.);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

const dog = new Dog("Buddy");
dog.bark();       // Woof!
dog.move(10);     // Buddy moved 10m.

Access modifier meliputi:

• public: dapat diakses dari mana saja
• protected: dapat diakses dalam class dan subclass-nya
• private: hanya dapat diakses dalam class yang mendeklarasikannya

Saran: gunakan access modifier untuk memastikan enkapsulasi, yang mencegah modifikasi yang tidak diinginkan pada logika atau status internal class.

30. Apa perbedaan antara abstract class dan interface di TypeScript?

Baik abstract class maupun interface mendefinisikan kontrak untuk objek atau class, tetapi keduanya memiliki tujuan yang berbeda.

Abstract class dapat menyertakan implementasi bersama dan metode abstrak.

Interface hanya mendeskripsikan struktur, bukan implementasi.

Berikut contohnya:

abstract class Shape {
  abstract getArea(): number; // harus diimplementasikan
}

class Circle extends Shape {
  constructor(public radius: number) {
    super();
  }

  getArea(): number {
    return Math.PI * this.radius ** 2;
  }
}

Praktik terbaik meliputi:

• Gunakan abstract class saat Anda memerlukan logika bersama di antara class terkait.
• Gunakan interface untuk kontrak tipe yang fleksibel dan desain kode yang terlepas (decoupled).

31. Apa perbedaan antara modifier private, protected, dan public?

Berikut perbandingan access modifier TypeScript dan apa yang mereka kendalikan:

Menggunakan access modifier yang tepat mendorong enkapsulasi, yang memastikan bahwa status dan logika internal tidak dapat diakses atau diubah secara tak terduga.

32. Apa perbedaan antara implements dan extends?

extends mewarisi perilaku dan properti, sedangkan implements menegakkan kontrak tetapi tidak menyediakan implementasi

Berikut contohnya:

interface Logger { log(msg: string): void; }

class Base { foo() {} }

class MyClass extends Base implements Logger {
  log(msg: string) {}
}

33. Bagaimana cara kerja mixin di TypeScript?

Mixin memungkinkan beberapa komponen class yang dapat digunakan ulang.

Berikut contohnya:

type Constructor<T = {}> = new (...args: any[]) => T;

function Timestamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}

class User {}
const TimestampedUser = Timestamped(User);

Berguna saat Anda membutuhkan pola pewarisan ganda.

Pertanyaan Wawancara TypeScript Praktis

Pertanyaan ini berfokus pada penerapan TypeScript di dunia nyata yang sering muncul dalam wawancara.

34. Bagaimana Anda akan memigrasikan proyek JavaScript ke TypeScript?

Migrasi basis kode JavaScript lama ke TypeScript sebaiknya dilakukan secara bertahap untuk meminimalkan risiko dan gangguan.

Pendekatan yang direkomendasikan adalah:

1. Ubah nama file .js menjadi .ts.

2. Aktifkan allowJs dan checkJs di tsconfig.json.

3. Secara bertahap tambahkan tipe, mulai dari fungsi atau modul inti.

4. Gunakan any sementara waktu, lalu gantikan dengan tipe yang tepat seiring penyempurnaan basis kode.

Contoh tsconfig.json untuk migrasi bertahap:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "strict": true
  }
}

Migrasi bertahap memastikan stabilitas dan memungkinkan tim mendapatkan manfaat pemeriksaan tipe sejak dini tanpa penulisan ulang besar-besaran.

35. Bagaimana cara menggunakan TypeScript dengan React?

Menggunakan TypeScript di React meningkatkan keamanan tipe untuk props dan state, yang membantu mencegah kesalahan saat runtime.

Berikut contohnya:

interface Props {
  title: string;
}

const Header: React.FC<Props> = ({ title }) => <h1>{title}</h1>;

Mendefinisikan tipe prop membantu TypeScript menangkap props yang hilang atau salah ketik saat kompilasi, yang meningkatkan keandalan dan produktivitas pengembang.

36. Bagaimana cara menggunakan TypeScript dengan Node.js?

TypeScript meningkatkan aplikasi Node.js dengan menambahkan keamanan tipe untuk rute API, konfigurasi, dan middleware.

Berikut contohnya:

import express, { Request, Response } from "express";
const app = express();

app.get("/", (req: Request, res: Response) => res.send("Hello TypeScript"));

Memberi tipe pada Request dan Response memastikan penggunaan parameter yang benar dan mencegah kesalahan umum saat runtime.

TypeScript membuat API Node.js lebih mudah dipelihara dan di-refactor dengan aman.

37. Bagaimana Anda menangani pustaka JavaScript pihak ketiga yang tidak memiliki definisi TypeScript?

Beberapa pustaka tidak menyertakan tipe bawaan. Dalam kasus ini, Anda memiliki dua opsi utama:

Opsi 1: Instal tipe yang dikelola komunitas

npm install --save-dev @types/library-name

Opsi 2: Buat file deklarasi khusus

// custom.d.ts
declare module "legacy-library" {
  export function init(): void;
}

Tips meliputi:

• Selalu periksa @types sebelum menulis deklarasi khusus.

• Tambahkan tipe secara bertahap untuk pustaka kompleks guna memastikan kompatibilitas.

Pemberian tipe yang tepat pada pustaka pihak ketiga meningkatkan kepercayaan dan mengurangi bug saat runtime.

Pertanyaan Wawancara Konfigurasi dan Perkakas TypeScript

Bagian ini membahas topik penting seputar konfigurasi dan perkakas TypeScript yang sering dibahas dalam wawancara teknis.

38. Apa itu tsconfig.json, dan mengapa penting?

Berkas tsconfig.json adalah konfigurasi pusat untuk setiap proyek TypeScript. 

Berkas ini menentukan perilaku kompiler, menyertakan berkas, dan mengaktifkan fitur.

Berikut contohnya:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Pengaturan kunci meliputi:

• target: versi JavaScript untuk output

• module: sistem modul (CommonJS, ESNext, dll.)

• strict: mengaktifkan semua opsi pemeriksaan tipe ketat

• outDir: folder output untuk kode terkompilasi

• esModuleInterop: memungkinkan impor modul CommonJS

Pastikan Anda mengaktifkan mode strict untuk menangkap potensi bug sejak dini dan meningkatkan kemudahan pemeliharaan.

39. Bagaimana Anda mengonfigurasi TypeScript dengan alat build seperti Webpack, Vite, atau Babel?

TypeScript terintegrasi mulus dengan sistem build modern.

Penyiapan umum meliputi:

• Webpack: ts-loader untuk kompilasi langsung

• Vite: vite-plugin-ts untuk build yang cepat

• Babel: @babel/preset-typescript untuk lingkungan yang banyak JavaScript

Contoh konfigurasi Vite:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  build: {
    target: "es2020"
  }
});

Selaraskan pengaturan kompiler dan bundler, aktifkan build inkremental, dan gunakan source map untuk debugging yang lebih mudah.

40. Bagaimana Anda mengonfigurasi ESLint dengan TypeScript untuk kualitas kode yang lebih baik?

ESLint membantu menjaga standar penulisan kode yang konsisten dan menangkap kesalahan sejak dini.

Instal paket yang diperlukan:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Contoh konfigurasi ESLint:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}

Tips meliputi:

• Hindari menonaktifkan aturan secara global.
• Sesuaikan aturan per proyek untuk menyeimbangkan keamanan tipe dan fleksibilitas.
• Gunakan ESLint bersama Prettier untuk basis kode yang konsisten dan rapi.

Tips Sukses dalam Wawancara TypeScript Anda

Sebelum wawancara, Anda sebaiknya fokus menguasai keterampilan teknis dan keterampilan komunikasi Anda.

Berikut beberapa cara untuk melakukannya:

Pendekatan belajar:

• Tinjau dokumentasi resmi tentang tipe tingkat lanjut, generics, dan utility types.
• Fokus pada kasus penggunaan nyata alih-alih menghafal.
• Latih membaca dan memahami error tipe, karena pesan kompiler TypeScript sering menjadi bagian dari penilaian teknis.

Proyek latihan:

• Bangun aplikasi kecil namun lengkap untuk menunjukkan keterampilan praktis:
• Daftar To-Do React dengan props dan state yang diketik.
• Express REST API dengan objek request dan response yang diketik.
• Pustaka utilitas menggunakan generics dan mapped types.

Jebakan umum:

• Terlalu sering menggunakan any, yang merusak keamanan tipe TypeScript.
• Mengabaikan mode strict, yang mengarah pada bug saat runtime.
• Membingungkan null dan undefined dalam definisi tipe.
• Lupa memasang atau mengonfigurasi definisi tipe untuk pustaka pihak ketiga.

Tips komunikasi:

• Selama wawancara, jelaskan dengan jelas alasan Anda dalam mengambil keputusan tipe.
• Uraikan trade-off antar pendekatan (misalnya: interface vs type alias atau abstract class vs interface).
• Tunjukkan bagaimana TypeScript meningkatkan kemudahan pemeliharaan dan skalabilitas dalam proyek.

Kesimpulan

TypeScript terus mendominasi pengembangan web modern karena menerapkan tipe data yang jelas dan konsisten yang membantu mencegah bug dan meningkatkan skalabilitas untuk proyek besar.

Untuk terus belajar, jelajahi katalog lengkap kursus kami untuk terus memperluas pengetahuan Anda di berbagai teknologi.