25 Pertanyaan Interview TypeScript dan Jawabannya + Kode

Berikut pertanyaan TypeScript yang paling sering ditanyakan pewawancara, dengan jawaban singkat yang sebaiknya bisa kamu berikan dan contoh kecilnya. Pertanyaannya dikelompokkan berdasarkan level; posisi junior biasanya berhenti setelah kelompok pertama, sedangkan posisi senior mengharapkanmu bisa menulis tipe di kelompok terakhir di luar kepala.

Pertanyaan Tingkat Pemula

1. Apa itu TypeScript?

TypeScript adalah JavaScript dengan tipe statis, buatan Microsoft. Kamu memberi anotasi tipe pada nilai, compiler memeriksanya, lalu menghapus tipe-tipe itu dan menghasilkan JavaScript biasa yang berjalan di mana pun JavaScript bisa berjalan.

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

console.log(add(2, 3)); // 5

// @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'number'.
const wrong = add("2", 3);
console.log(wrong); // 23: the call was forced through, and JavaScript concatenated

Tanpa komentar @ts-expect-error, pemanggilan kedua adalah error kompilasi, jadi bug itu tidak akan pernah sampai ke production.

2. Apakah TypeScript memeriksa tipe saat runtime?

Tidak. Tipe dihapus saat kompilasi; output-nya sama sekali tidak menyisakan jejak tipe. Kode di atas mencetak 23 karena saat runtime tidak ada yang tahu bahwa a seharusnya angka. Untuk memeriksa data dari luar program (JSON, input pengguna, response API), kamu menulis pemeriksaan sungguhan, seperti type guard atau validator schema.

3. Apa saja tipe dasarnya?

string, number (satu tipe untuk bilangan bulat dan desimal; tidak ada int), boolean, bigint, symbol, null dan undefined, ditambah array (number[]), tuple ([string, number]), tipe object, any, unknown, never, dan void. Pakai nama dengan huruf kecil: String dan Number adalah tipe object pembungkus.

4. Apa perbedaan any dan unknown?

Keduanya menerima nilai apa pun. any juga mematikan pemeriksaan, jadi operasi apa pun lolos kompilasi. unknown tidak mengizinkan apa pun sampai kamu melakukan narrowing, sehingga ia menjadi tipe yang aman untuk nilai yang belum kamu periksa.

let a: any = "hello";
a.toFixed; // allowed: any turns checking off

let u: unknown = "hello";
// @ts-expect-error 'u' is of type 'unknown'.
u.toUpperCase();

if (typeof u === "string") {
  console.log(u.toUpperCase()); // HELLO: narrowed to string
}

5. Apa itu inferensi tipe?

Compiler menentukan sendiri tipe yang tidak kamu tulis: let count = 0 adalah number, const mode = "dark" adalah tipe literal "dark", dan tipe kembalian fungsi diambil dari pernyataan return-nya. Aturan umumnya adalah memberi anotasi pada parameter fungsi dan tipe kembalian yang publik, lalu membiarkan inferensi menangani variabel lokal.

6. Apa perbedaan interface dan type?

Keduanya menjelaskan bentuk object, dan class bisa implements keduanya. interface bisa dibuka ulang dan digabung (declaration merging) dan bisa extends interface lain. Alias type bisa memberi nama pada apa saja: union, tuple, tipe primitif, mapped type, dan conditional type.

interface User { name: string }
interface User { age: number }       // merged: User has name and age

type Id = string | number;           // only a type alias can be a union
type Pair = [string, number];        // or a tuple
type Admin = User & { role: "admin" };

Konvensi yang umum adalah interface untuk bentuk object dan type untuk yang lainnya. Perbandingan lengkapnya ada di halaman interface vs type.

7. Apa itu union type dan intersection type?

Union A | B adalah nilai yang berupa salah satu dari tipe-tipe itu; kamu hanya bisa memakai member yang dimiliki semuanya sampai kamu melakukan narrowing. Intersection A & B adalah nilai yang sekaligus keduanya, dengan semua member dari masing-masing tipe.

type Id = string | number;                 // either
type Timestamped = { createdAt: Date };
type Post = { title: string } & Timestamped; // both: title and createdAt

8. Apa perbedaan void dan never?

void adalah tipe kembalian fungsi yang selesai secara normal tanpa nilai yang berguna. never adalah tipe dari sesuatu yang tidak mungkin terjadi: fungsi yang selalu melempar error atau berulang selamanya, atau union yang semua kasusnya sudah dibuang. never bisa di-assign ke setiap tipe, dan tidak ada nilai yang bisa di-assign ke never.

function log(msg: string): void { console.log(msg); }
function fail(msg: string): never { throw new Error(msg); }
type Impossible = string & number; // never

Pertanyaan Tingkat Menengah

9. Apa itu type narrowing?

Narrowing adalah compiler yang mengikuti pemeriksaanmu dan mempersempit tipe di dalam setiap cabang. Ia memahami typeof, instanceof, in, pemeriksaan kesamaan, truthiness, dan type guard buatan sendiri.

class ApiError extends Error {
  constructor(public status: number) {
    super(`HTTP ${status}`);
  }
}

type Input = string | number | { id: number } | ApiError;

function describe(x: Input): string {
  if (typeof x === "string") return `string of length ${x.length}`;
  if (typeof x === "number") return `number ${x.toFixed(1)}`;
  if (x instanceof ApiError) return `error with status ${x.status}`;
  return `object with id ${x.id}`; // only { id: number } is left
}

console.log(describe("hi"));             // string of length 2
console.log(describe(3));                // number 3.0
console.log(describe(new ApiError(404))); // error with status 404
console.log(describe({ id: 7 }));        // object with id 7

10. Apa itu user-defined type guard?

Fungsi yang tipe kembaliannya value is T. Kalau fungsi itu mengembalikan true, variabel milik pemanggil dipersempit menjadi T. Compiler memercayai fungsi tersebut, jadi body-nya harus benar-benar memeriksa nilainya.

interface Cat { meow(): void }

function isCat(value: unknown): value is Cat {
    return (
        typeof value === "object" &&
        value !== null &&
        "meow" in value &&
        typeof value.meow === "function"
    );
}

Assertion function, function assertCat(v: unknown): asserts v is Cat, melakukan narrowing dengan melempar error, bukan dengan mengembalikan false.

11. Apa itu generic?

Parameter tipe yang membuat satu fungsi, class, atau tipe bisa bekerja dengan banyak tipe sambil tetap menjaga hubungan antara input dan output. T disimpulkan dari argumen, dan extends membatasi tipe apa saja yang boleh dipakai.

function first<T>(items: T[]): T | undefined {
  return items[0];
}

const n = first([10, 20]);   // T is number, n is number | undefined
const s = first(["a", "b"]); // T is string

function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
  return items.map((item) => item[key]);
}

const users = [{ name: "Ada", age: 36 }, { name: "Lin", age: 29 }];
console.log(n, s, pluck(users, "name"), pluck(users, "age")); // 10 a [ 'Ada', 'Lin' ] [ 36, 29 ]

pluck(users, "email") akan menjadi error kompilasi, karena "email" bukan keyof dari tipe user tersebut.

12. Apa fungsi keyof dan typeof di dalam tipe?

keyof T adalah union dari nama-nama properti T. Di posisi tipe, typeof x menghasilkan tipe sebuah variabel. Jika digabung, keyof typeof obj mengubah key sebuah object menjadi union.

const colors = { red: "#f00", green: "#0f0" };
type Colors = typeof colors;        // { red: string; green: string }
type ColorName = keyof typeof colors; // "red" | "green"

13. Apa itu utility type? Sebutkan beberapa.

Tipe generic bawaan yang mengubah tipe lain. Yang paling sering ditanyakan:

Daftar lengkapnya ada di halaman utility type.

14. Apa itu discriminated union?

Union dari tipe-tipe object yang punya properti "tag" literal yang sama. Memeriksa tag-nya mempersempit nilai menjadi salah satu member, dan pemeriksaan never di cabang default membuat compiler melaporkan kasus apa pun yang terlupa.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rect"; width: number; height: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "rect":
      return shape.width * shape.height;
    default: {
      const unreachable: never = shape;
      return unreachable;
    }
  }
}

console.log(area({ kind: "rect", width: 3, height: 4 }));    // 12
console.log(area({ kind: "circle", radius: 1 }).toFixed(2)); // 3.14

15. Apa perbedaan as dan satisfies?

value as T adalah type assertion: ia menyuruh compiler memperlakukan nilai sebagai T dan melewati sebagian besar pemeriksaan. value satisfies T memeriksa nilai terhadap T tetapi tetap mempertahankan tipe milik nilai itu sendiri yang lebih presisi.

type Theme = { primary: string; secondary: string };

const a = { primary: "#07f" } as Theme;        // compiles: the missing key is not reported
const b = { primary: "#07f" } satisfies Theme; // error TS2741: Property 'secondary' is missing
const c = {} as { name: string };              // compiles; c.name is undefined at run time

Setelah object-nya lengkap, satisfies juga mempertahankan tipe hasil inferensinya sendiri: walaupun diperiksa terhadap Record<string, string>, variabelnya tetap tahu persis key apa saja yang dimilikinya, sedangkan anotasi akan melebarkannya menjadi key string apa pun.

16. Apa fungsi operator ! setelah variabel?

Itu adalah non-null assertion: el! membuang null dan undefined dari tipenya. Operator ini tidak menghasilkan pemeriksaan apa pun, jadi kalau nilainya ternyata null, program akan crash di tempat nilai itu dipakai. Lebih baik pakai ?., ??, atau if yang eksplisit.

17. Apa perbedaan private dan #private?

private hanya ditegakkan oleh compiler; di output JavaScript, propertinya adalah properti biasa. #field adalah private field JavaScript, yang ditegakkan oleh runtime.

class Account {
  private pin = "1234"; // TypeScript-only privacy
  #balance = 100;       // JavaScript private field

  get balance() {
    return this.#balance;
  }
}

const acc = new Account();
// acc.pin is error TS2341; bracket access is an allowed escape hatch,
// and at run time pin is an ordinary property:
console.log(acc["pin"]);       // 1234
console.log(Object.keys(acc)); // [ 'pin' ]
console.log(acc.balance);      // 100

protected bekerja seperti private, tetapi juga mengizinkan akses dari subclass, dan readonly melarang assign ulang setelah object dibuat.

18. Apa perbedaan abstract class dan interface?

Interface hanyalah tipe: ia menjelaskan bentuk dan hilang dari output. Abstract class adalah class sungguhan yang tidak bisa dibuat instance-nya; ia bisa berisi method yang sudah diimplementasikan, field, dan constructor, di samping member abstract yang wajib diimplementasikan oleh subclass. Sebuah class bisa meng-implement banyak interface, tetapi hanya bisa meng-extend satu class.

abstract class Repository<T> {
    protected items: T[] = [];
    abstract validate(item: T): boolean; // subclasses must implement
    add(item: T): void {                 // shared implementation
        if (this.validate(item)) this.items.push(item);
    }
}

19. Apa itu function overloading di TypeScript?

Beberapa call signature yang diikuti satu implementasi yang signature-nya kompatibel dengan semuanya. Pemanggil hanya melihat overload-nya, jadi setiap pemanggilan mendapat tipe kembalian yang tepat.

function parse(value: string): number;
function parse(value: string[]): number[];
function parse(value: string | string[]): number | number[] {
    return Array.isArray(value) ? value.map(Number) : Number(value);
}

const one = parse("4");          // number
const many = parse(["1", "2"]);  // number[]

Kalau tipe kembalian tidak bergantung pada tipe argumen, satu signature dengan parameter berupa union lebih sederhana.

Pertanyaan Tingkat Mahir

20. Apa itu structural typing?

TypeScript membandingkan tipe berdasarkan bentuknya, bukan namanya. Nilai apa pun yang punya properti yang diwajibkan akan diterima, walaupun tidak pernah dideklarasikan dengan tipe tersebut.

interface Point {
  x: number;
  y: number;
}

function show(p: Point): string {
  return `(${p.x}, ${p.y})`;
}

const pixel = { x: 3, y: 4, color: "red" }; // never declared as a Point
console.log(show(pixel)); // (3, 4): it has the right shape, so it is a Point

class Vector {
  constructor(public x: number, public y: number) {}
}
console.log(show(new Vector(1, 2))); // (1, 2)

Properti tambahan color tidak masalah di sini karena pixel adalah variabel. Mengirim object literal secara langsung, show({ x: 3, y: 4, color: "red" }), menghasilkan error excess property, pemeriksaan yang hanya berlaku untuk literal yang baru ditulis. Kalau dua tipe dengan bentuk yang sama tidak boleh tercampur (UserId dan OrderId yang sama-sama string), pakai branded type: type UserId = string & { readonly __brand: "UserId" }.

21. Bagaimana kamu mengimplementasikan Readonly dan Partial sendiri?

Dengan mapped type: iterasi keyof T dan tambahkan modifier pada setiap properti.

type MyReadonly<T> = { readonly [K in keyof T]: T[K] };
type MyPartial<T> = { [K in keyof T]?: T[K] };
type Mutable<T> = { -readonly [K in keyof T]: T[K] }; // "-" removes a modifier

type User = { name: string; age: number };
type Draft = MyPartial<User>; // { name?: string; age?: number }

22. Apa itu conditional type dan infer?

T extends U ? X : Y memilih sebuah tipe berdasarkan kondisi. Di dalam kondisi itu, infer mendeklarasikan variabel tipe yang menangkap sebagian dari tipe yang cocok. Conditional type terdistribusi pada union.

type MyReturnType<F> = F extends (...args: any[]) => infer R ? R : never;
type ElementOf<T> = T extends (infer E)[] ? E : T;

type A = MyReturnType<() => Promise<number>>; // Promise<number>
type B = ElementOf<string[]>;                 // string
type C = ElementOf<number | boolean[]>;       // number | boolean (distributed)

Pola-pola lainnya ada di halaman conditional type.

23. Apa itu file .d.ts, dan apa fungsi declare?

Declaration file hanya berisi tipe untuk kode yang ada di tempat lain, seperti library JavaScript atau API browser. declare menyatakan bahwa sebuah nilai ada tanpa membuatnya: declare const VERSION: string; dikompilasi menjadi tidak ada apa-apa. Tipe library ikut dibundel dengan package-nya atau berasal dari package @types/{name}, dan tsc membuat file .d.ts untuk kodemu sendiri dengan declaration: true.

24. Apa fungsi strict, dan opsi tsconfig mana yang paling penting?

"strict": true mengaktifkan noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables, dan strictBuiltinIteratorReturn. Di TypeScript 7, opsi ini aktif secara default. Opsi lain yang sering ditanyakan pewawancara:

25. Apa itu TypeScript 7?

Compiler TypeScript yang ditulis ulang dengan Go sebagai program native, dirilis sebagai versi 7 dari package npm typescript. Perintahnya tetap tsc dan bahasanya sama, tetapi jauh lebih cepat daripada compiler 6.x yang berbasis JavaScript: tim TypeScript melaporkan percepatan 8x sampai 12x pada full build pada umumnya, berkat kode native dan multithreading dengan shared memory. Versi ini juga menegakkan penghapusan fitur yang sudah ditandai usang di 6.0; misalnya baseUrl, outFile, moduleResolution: "node10", module: "amd", dan alwaysStrict: false sekarang menjadi error (TS5102, TS5108) yang menyuruhmu menghapusnya.