40 Câu Hỏi Phỏng Vấn TypeScript Hàng Đầu và Đáp Án cho năm 2026

TypeScript đã phát triển từ một siêu ngôn ngữ JavaScript mang tính ngách thành một ngôn ngữ cốt lõi cho phát triển web hiện đại. 

Từ kinh nghiệm làm việc với các ứng dụng web, tôi thấy rõ kiểu tĩnh mạnh mẽ và khả năng bảo trì tốt có thể giảm đáng kể lỗi và cải thiện sự phối hợp giữa các nhóm. 

TypeScript mang lại tất cả những điều này, đó là lý do nó trở thành tiêu chuẩn trong ngành cho phát triển hiện đại.

Từ Microsoft (nhà sáng tạo) đến Google, Airbnb và Netflix, nhiều tổ chức dựa vào TypeScript để vận hành các sản phẩm viết bằng các framework như React, Angular và Node.js. 

Trong công việc, tôi thường thấy các tin tuyển dụng liệt kê thành thạo TypeScript như một yêu cầu cốt lõi, không phải kỹ năng tùy chọn.

Từng sử dụng TypeScript, tôi có thể khẳng định rằng hiểu các kiểu, interface và tính năng nâng cao của nó là điều thiết yếu cho bất kỳ nhà phát triển nào chuẩn bị cho phỏng vấn kỹ thuật.

Câu hỏi Phỏng vấn TypeScript Cơ Bản

Giờ hãy xem một số câu hỏi phỏng vấn TypeScript thường gặp và cách chúng liên quan đến độ an toàn và tính rõ ràng của mã.

1. Tại sao dùng TypeScript thay vì JavaScript?

TypeScript bổ sung kiểm tra kiểu tĩnh và lỗi tại thời điểm biên dịch, giúp phát hiện lỗi sớm và khiến codebase dễ dự đoán hơn.

Điều này đảm bảo khả năng bảo trì và mở rộng tốt hơn.

2. TypeScript giải quyết những vấn đề gì?

TypeScript xử lý điểm yếu của JavaScript về an toàn kiểu, khả năng mở rộng và khả năng đọc.

Việc bắt buộc định nghĩa kiểu rõ ràng ngăn các lỗi tinh vi lúc chạy và giúp tái cấu trúc an toàn hơn.

3. Lợi ích chính của kiểu tĩnh trong TypeScript là gì?

Kiểu tĩnh cải thiện độ tin cậy của mã, tính năng tự động hoàn thành và năng suất của nhà phát triển.

Nó giúp phát hiện sớm lỗi kiểu và cho phép IDE cung cấp bộ công cụ phong phú hơn.

4. Chú thích kiểu (type annotations) là gì và tại sao hữu ích?

Chú thích kiểu cho phép lập trình viên khai báo kiểu biến một cách tường minh.

Điều này cải thiện khả năng đọc mã và giảm lỗi lúc chạy.

Ví dụ:

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

Trong đoạn mã trên, trình biên dịch đảm bảo chỉ kiểu đúng mới có thể được gán cho từng biến.

Ví dụ, nếu bạn cố gán một chuỗi cho age, TypeScript sẽ báo lỗi, giúp bắt sai sót sớm.

Việc khai báo kiểu tường minh đặc biệt quan trọng cho tham số hàm, kiểu trả về và hợp đồng API, vì nó truyền đạt kỳ vọng cho các lập trình viên khác.

5. Suy luận kiểu (type inference) trong TypeScript là gì?

TypeScript có thể tự động suy luận kiểu dựa trên giá trị được gán.

Điều này có nghĩa bạn không phải lúc nào cũng cần khai báo kiểu tường minh. TypeScript sẽ tự xác định giúp bạn.

Ví dụ:

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

Trong ví dụ này, TypeScript suy luận rằng count phải là một số dựa trên giá trị khởi tạo, nên việc gán chuỗi sau đó gây lỗi lúc biên dịch. 

Thực hành tốt cho suy luận kiểu gồm:

• Sử dụng kiểu tường minh cho các hàm, lớp và interface được export để cung cấp hợp đồng rõ ràng.
• Cho phép suy luận cho biến cục bộ khi kiểu hiển nhiên.
• Tránh dùng any trừ khi thực sự cần thiết, vì nó bỏ qua các tính năng an toàn của TypeScript.

6. TypeScript xử lý mảng, tuple và enum như thế nào?

TypeScript cho phép áp đặt kiểu chặt chẽ với mảng, tuple và enum để cải thiện sự rõ ràng và ngăn lỗi lúc chạy.

Ví dụ mảng có kiểu:

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

Mảng có kiểu đảm bảo tất cả phần tử trong mảng theo cùng một kiểu.

Ví dụ tuple:

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

Tuple định nghĩa mảng độ dài cố định với kiểu cụ thể cho từng vị trí.

Chúng hữu ích cho dữ liệu có cấu trúc nơi thứ tự và kiểu phần tử quan trọng.

Ví dụ enum:

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

Enum cung cấp các hằng số có tên, cải thiện khả năng đọc và giảm giá trị không hợp lệ.

Chúng đặc biệt hữu ích cho mã trạng thái, vai trò và tùy chọn cấu hình.

7. Khác biệt giữa any, unknown và never là gì?

Bảng sau nêu bật khác biệt chính giữa các kiểu any, unknown và never trong TypeScript.

Ví dụ:

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

Mẹo: ưu tiên unknown hơn any để duy trì an toàn kiểu trong khi vẫn linh hoạt.

8. Khác biệt giữa null và undefined trong TypeScript là gì?

Khác biệt chính giữa null và undefined:

• undefined nghĩa là biến đã được khai báo nhưng chưa gán giá trị.

• null là giá trị tường minh biểu thị không có giá trị.

Chế độ strictNullChecks của TypeScript xử lý chúng như các kiểu riêng biệt, giúp ngăn lỗi liên quan đến null.

Ví dụ:

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

9. Tùy chọn trình biên dịch strict làm gì?

Cờ strict bật tất cả các quy tắc kiểm tra kiểu nghiêm ngặt của TypeScript, như:

• strictNullChecks: Ngăn null và undefined được gán cho biến trừ khi được cho phép tường minh, giúp tránh lỗi tham chiếu null lúc chạy.

• noImplicitAny: Yêu cầu mọi biến phải có kiểu tường minh hoặc được suy luận, ngăn TypeScript mặc định thành any.

• strictFunctionTypes: Áp đặt quy tắc nghiêm ngặt hơn cho khả năng tương thích kiểu hàm, bắt các sai lệch ở tham số và kiểu trả về.

• strictBindCallApply: Đảm bảo các phương thức bind, call và apply được dùng với kiểu đối số đúng cho hàm.

Nó đảm bảo mã an toàn, dễ dự đoán hơn và bắt các lỗi tinh vi từ sớm.

Câu hỏi Phỏng vấn về Hệ Kiểu của TypeScript

Giờ hãy xem một số khái niệm hệ kiểu TypeScript quan trọng thường được thảo luận trong phỏng vấn kỹ thuật.

10. Khác biệt giữa interfaces và type aliases trong TypeScript là gì?

Cả interface và type alias đều mô tả hình dạng của đối tượng, nhưng phục vụ mục đích hơi khác nhau.

Interfaces có thể được mở rộng bằng extends, phù hợp với mô hình đối tượng phân cấp.

Type aliases có thể biểu diễn union, intersection, kiểu nguyên thủy và các kiểu tổng hợp phức tạp.

Ví dụ:

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

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

Dùng interface khi định nghĩa hình dạng đối tượng hoặc hợp đồng cho lớp.

Dùng type alias khi cần kiểu linh hoạt, có thể kết hợp như union hoặc intersection.

11. Union và intersection types trong TypeScript là gì?

Union cho phép một biến giữ nhiều kiểu khả dĩ, còn intersection kết hợp nhiều kiểu thành một.

Ví dụ union:

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

Ví dụ intersection:

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

Union thường dùng trong tham số hàm.

Intersection phổ biến trong cấu thành đối tượng phức tạp.

12. Type narrowing là gì và type guards hoạt động thế nào?

Type narrowing cho phép TypeScript suy luận kiểu cụ thể hơn dựa trên luồng điều khiển.

Ví dụ:

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

Type guard đảm bảo thao tác an toàn lúc chạy bằng cách xác minh kiểu trước khi thực hiện hành động cụ thể.

Bạn có thể dùng:

• typeof: cho kiểu nguyên thủy

• instanceof: cho lớp

• Custom type guards: dùng cú pháp param is Type

Type guard cải thiện an toàn kiểu và giảm lỗi lúc chạy.

13. Literal types và discriminated unions trong TypeScript là gì?

Literal types giới hạn một biến vào một tập giá trị định sẵn.

Ví dụ:

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

Discriminated unions kết hợp literal types với các biến thể đối tượng để so khớp mẫu.

Ví dụ:

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 cho phép rẽ nhánh an toàn theo kiểu đối tượng và đơn giản hóa logic trong ứng dụng phức tạp.

14. keyof, typeof và in trong TypeScript là gì?

Các toán tử này cung cấp khả năng phản chiếu ở cấp kiểu mạnh mẽ.

• Keyof: lấy tên thuộc tính của một kiểu

• typeof: lấy kiểu của một giá trị

• in: dùng trong mapped types

Ví dụ:

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

15. Index signatures trong TypeScript là gì?

Index signatures cho phép đối tượng có khóa động.

Ví dụ:

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

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

Dùng cho từ điển, đối tượng dạng bản đồ, hoặc mẫu cấu hình động.

16. Structural typing trong TypeScript là gì?

Structural typing (duck typing) nghĩa là các kiểu tương thích dựa trên cấu trúc, không dựa trên tên.

Ví dụ:

interface Point { x: number; y: number; }
let p = { x: 10, y: 20, z: 30 };
let q: Point = p; // OK because structural match

Điều này khiến TypeScript linh hoạt và phù hợp với các mẫu JavaScript.

17. Declaration merging trong TypeScript là gì?

Declaration merging xảy ra khi TypeScript kết hợp nhiều khai báo cùng tên.

Ví dụ gộp hai interface:

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

Hữu ích khi mở rộng kiểu của bên thứ ba hoặc bổ sung cho thư viện.

Câu hỏi Phỏng vấn TypeScript Nâng Cao

Dưới đây là các câu hỏi và đáp án TypeScript nâng cao.

18. Generics trong TypeScript là gì và tại sao hữu ích?

Generics cho phép bạn viết hàm và lớp tái sử dụng, an toàn kiểu, hoạt động với nhiều kiểu dữ liệu.

Ví dụ hàm generic:

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

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

Ví dụ lớp 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);

Thực hành tốt bao gồm:

• Dùng tên mô tả như <T>, <K, V> hoặc tên theo miền bài toán.

• Tránh phức tạp không cần thiết.

• Dùng ràng buộc (extends) để giới hạn kiểu chấp nhận.

Generics cải thiện khả năng tái sử dụng mã bằng cách giảm trùng lặp và áp đặt tính nhất quán kiểu.

19. Utility types trong TypeScript là gì và dùng như thế nào?

TypeScript cung cấp các utility type dựng sẵn để thao tác và biến đổi các kiểu hiện có một cách hiệu quả.

Ví dụ:

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

type PartialTodo = Partial<Todo>; // all properties optional
type RequiredTodo = Required<Todo>; // all properties required
type TodoPreview = Pick<Todo, "title" | "completed">; // select specific properties
type TodoWithoutDescription = Omit<Todo, "description">; // exclude properties

Đặc biệt hữu ích khi làm việc với phản hồi API, biểu mẫu hoặc props của component.

Mẹo: tận dụng utility types bất cứ khi nào có thể để đơn giản hóa mã và đảm bảo nhất quán kiểu.

20. Conditional và mapped types trong TypeScript là gì?

Conditional types cho phép định nghĩa logic trong kiểu dựa trên mối quan hệ giữa chúng.

Ví dụ:

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

Mapped types cho phép bạn biến đổi tất cả thuộc tính của một kiểu cùng lúc.

Ví dụ:

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

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

Khác biệt chính là:

• keyof trích xuất tên thuộc tính của một kiểu.
• typeof lấy kiểu của một biến hoặc đối tượng. Kết hợp chúng cho phép thao tác kiểu động và tái cấu trúc an toàn hơn.

21. Từ khóa infer được dùng để làm gì trong TypeScript?

infer cho phép bạn trích xuất (suy luận) một kiểu bên trong conditional type.

Ví dụ:

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

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

Thường dùng trong các tiện ích nâng cao và biến đổi kiểu generic.

22. Template literal types là gì?

Template literal types xây dựng kiểu chuỗi bằng phép nội suy.

Ví dụ:

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

Hữu ích cho:

• Đặt tên sự kiện
• Mẫu lớp CSS
• Mẫu tuyến API

23. satisfies và as const trong TypeScript là gì?

satisfies đảm bảo một giá trị thỏa một kiểu nhưng giữ nguyên literal type của chính nó. 

Ví dụ:

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

as const biến tất cả thuộc tính thành chỉ đọc và literal. 

Ví dụ:

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

Cả satisfies và as const đều hữu ích trong React, đối tượng cấu hình và discriminated unions.

Câu hỏi Phỏng vấn về Hàm và Đối Tượng trong TypeScript

Phần này khám phá các câu hỏi phỏng vấn TypeScript liên quan đến hàm và đối tượng.

24. Nạp chồng hàm (function overloading) hoạt động thế nào trong TypeScript?

Nạp chồng hàm cho phép bạn định nghĩa nhiều chữ ký hàm cho các kiểu hoặc mẫu đối số khác nhau.

Ví dụ:

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"

Thực hành tốt gồm:

• Khai báo tất cả chữ ký nạp chồng trước phần triển khai.
• Dùng type guard để xử lý an toàn nhiều kiểu.

25. Tham số tùy chọn và rest trong TypeScript là gì?

Tham số tùy chọn và rest khiến hàm linh hoạt và diễn đạt hơn.

Ví dụ:

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);
}

Quy tắc chính khi dùng tham số tùy chọn và rest:

• Dùng ? cho tham số tùy chọn.

• Dùng ... cho tham số rest (đối số biến thiên).

Chúng thường được hỏi để đánh giá cách bạn xử lý đầu vào hàm động.

26. Khác biệt giữa readonly và const trong TypeScript là gì?

const áp dụng cho biến, trong khi readonly áp dụng cho thuộc tính của đối tượng.

Ví dụ:

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});

Một số thực hành tốt khi dùng readonly và const:

• Dùng readonly cho đối tượng không nên thay đổi, như dữ liệu trả về từ API.
• Dùng const cho biến không nên gán lại.
• Kết hợp destructuring với chú thích kiểu để mã gọn gàng, tự mô tả.

27. Phương sai kiểu hàm (covariance và contravariance) là gì?

Phương sai kiểu hàm mô tả cách TypeScript quyết định một kiểu hàm có thể thay thế an toàn cho kiểu khác dựa trên kiểu tham số và kiểu trả về.

Kiểu trả về: Đồng biến (Covariant)

Hàm được phép trả về kiểu cụ thể hơn so với kỳ vọng của bên gọi. Ví dụ:

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

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

f = g; // OK: Dog is a subtype of Animal

Kiểu tham số: Phản biến (Contravariant)

Hàm được phép nhận kiểu tham số tổng quát hơn so với kỳ vọng. Ví dụ:

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);

// A function that accepts an Animal is more general,
// so it can stand in for one that accepts a Dog
handleDog = handleAnimal; // OK

28. this types trong TypeScript là gì?

this types cho phép phương thức trả về cùng kiểu với lớp, hữu ích cho API kiểu xâu chuỗi:

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

Câu hỏi Phỏng vấn OOP trong TypeScript

Các câu hỏi sau đề cập đến những khái niệm OOP quan trọng trong TypeScript thường được thảo luận trong phỏng vấn kỹ thuật.

29. TypeScript hỗ trợ lập trình hướng đối tượng (OOP) như thế nào?

TypeScript hỗ trợ các nguyên tắc OOP như lớp, kế thừa và bộ sửa truy cập.

Lớp định nghĩa bản thiết kế có thể tái sử dụng cho đối tượng, và kế thừa cho phép một lớp mở rộng lớp khác để chia sẻ thuộc tính và hành vi.

Ví dụ:

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.

Các bộ sửa truy cập gồm:

• public: truy cập ở mọi nơi
• protected: truy cập trong lớp và lớp con
• private: chỉ truy cập trong lớp khai báo

Mẹo: dùng bộ sửa truy cập để đảm bảo đóng gói, ngăn sửa đổi ngoài ý muốn đến trạng thái hoặc logic nội bộ của lớp.

30. Khác biệt giữa abstract classes và interfaces trong TypeScript là gì?

Cả abstract class và interface đều định nghĩa hợp đồng cho đối tượng hoặc lớp, nhưng phục vụ mục đích khác nhau.

Abstract class có thể bao gồm triển khai dùng chung và phương thức trừu tượng.

Interface chỉ mô tả cấu trúc, không có triển khai.

Ví dụ:

abstract class Shape {
  abstract getArea(): number; // must be implemented
}

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

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

Thực hành tốt gồm:

• Dùng abstract class khi cần logic dùng chung giữa các lớp liên quan.
• Dùng interface cho hợp đồng kiểu linh hoạt và thiết kế mã tách rời.

31. Khác biệt giữa private, protected và public là gì?

Dưới đây là so sánh các bộ sửa truy cập của TypeScript và những gì chúng kiểm soát:

Dùng đúng bộ sửa truy cập thúc đẩy đóng gói, đảm bảo trạng thái và logic nội bộ không bị truy cập hoặc thay đổi ngoài ý muốn.

32. Khác biệt giữa implements và extends là gì?

extends kế thừa hành vi và thuộc tính, còn implements áp đặt một hợp đồng nhưng không cung cấp triển khai

Ví dụ:

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

class Base { foo() {} }

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

33. Mixins hoạt động thế nào trong TypeScript?

Mixins cho phép nhiều thành phần lớp có thể tái sử dụng.

Ví dụ:

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);

Hữu ích khi bạn cần mẫu kế thừa bội.

Câu hỏi Phỏng vấn TypeScript Thực Tiễn

Những câu hỏi này tập trung vào ứng dụng TypeScript trong thực tế thường xuất hiện trong phỏng vấn.

34. Bạn sẽ di trú một dự án JavaScript sang TypeScript như thế nào?

Di trú codebase JavaScript cũ sang TypeScript nên làm tuần tự để giảm rủi ro và gián đoạn.

Cách tiếp cận khuyến nghị:

1. Đổi tên tệp .js thành .ts.

2. Bật allowJs và checkJs trong tsconfig.json.

3. Bổ sung kiểu dần dần, bắt đầu với các hàm hoặc mô-đun cốt lõi.

4. Tạm thời dùng any, rồi thay bằng kiểu phù hợp khi tinh chỉnh codebase.

Ví dụ tsconfig.json cho di trú dần:

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

Di trú dần đảm bảo ổn định và cho phép nhóm hưởng lợi từ kiểm tra kiểu sớm mà không cần viết lại lớn.

35. Bạn dùng TypeScript với React như thế nào?

Dùng TypeScript trong React cải thiện an toàn kiểu cho props và state, giúp ngăn lỗi lúc chạy.

Ví dụ:

interface Props {
  title: string;
}

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

Định nghĩa kiểu props giúp TypeScript bắt thiếu props hoặc props sai kiểu lúc biên dịch, cải thiện độ tin cậy và năng suất.

36. Bạn dùng TypeScript với Node.js như thế nào?

TypeScript tăng cường ứng dụng Node.js bằng cách bổ sung an toàn kiểu cho tuyến API, cấu hình và middleware.

Ví dụ:

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

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

Gõ kiểu cho Request và Response đảm bảo dùng tham số đúng và ngăn lỗi phổ biến lúc chạy.

TypeScript giúp API Node.js dễ bảo trì và tái cấu trúc an toàn.

37. Bạn xử lý thư viện JavaScript bên thứ ba thiếu định nghĩa TypeScript như thế nào?

Một số thư viện không bao gồm kiểu dựng sẵn. Khi đó, bạn có hai lựa chọn chính:

Tùy chọn 1: Cài đặt kiểu do cộng đồng duy trì

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

Tùy chọn 2: Tạo tệp khai báo tùy chỉnh

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

Mẹo bao gồm:

• Luôn kiểm tra @types trước khi viết khai báo tùy chỉnh.

• Bổ sung kiểu dần dần cho thư viện phức tạp để đảm bảo tương thích.

Gõ kiểu đúng cho thư viện bên thứ ba tăng sự tự tin và giảm lỗi lúc chạy.

Câu hỏi Phỏng vấn về Cấu Hình và Công Cụ TypeScript

Phần này đề cập đến các chủ đề cấu hình và công cụ TypeScript thiết yếu thường được thảo luận trong phỏng vấn kỹ thuật.

38. tsconfig.json là gì và tại sao quan trọng?

Tệp tsconfig.json là cấu hình trung tâm cho bất kỳ dự án TypeScript nào. 

Nó xác định hành vi trình biên dịch, tệp được bao gồm và bật các tính năng.

Ví dụ:

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

Thiết lập quan trọng gồm:

• target: phiên bản JavaScript đầu ra

• module: hệ thống module (CommonJS, ESNext, v.v.)

• strict: bật tất cả tùy chọn kiểm tra kiểu nghiêm ngặt

• outDir: thư mục đầu ra cho mã đã biên dịch

• esModuleInterop: cho phép import module CommonJS

Hãy bật chế độ strict để bắt lỗi tiềm ẩn sớm và cải thiện khả năng bảo trì.

39. Bạn cấu hình TypeScript với các công cụ build như Webpack, Vite hoặc Babel thế nào?

TypeScript tích hợp mượt mà với các hệ thống build hiện đại.

Các thiết lập phổ biến bao gồm:

• Webpack: ts-loader để biên dịch tức thì

• Vite: vite-plugin-ts cho build nhanh

• Babel: @babel/preset-typescript cho môi trường thiên về JS

Ví dụ cấu hình 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"
  }
});

Căn chỉnh thiết lập trình biên dịch và bundler, bật build tăng dần và dùng source map để gỡ lỗi dễ hơn.

40. Bạn cấu hình ESLint với TypeScript để nâng cao chất lượng mã như thế nào?

ESLint giúp duy trì tiêu chuẩn mã nhất quán và bắt lỗi sớm.

Cài đặt các gói cần thiết:

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

Ví dụ cấu hình 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"
  }
}

Mẹo:

• Tránh vô hiệu hóa quy tắc trên toàn cục.
• Tinh chỉnh quy tắc theo dự án để cân bằng an toàn kiểu và linh hoạt.
• Dùng ESLint với Prettier để có codebase nhất quán và sạch sẽ.

Mẹo Để Vượt Qua Phỏng Vấn TypeScript

Trước buổi phỏng vấn, bạn nên tập trung rèn cả kỹ năng kỹ thuật và kỹ năng giao tiếp.

Dưới đây là một số cách bạn có thể làm điều đó:

Cách học:

• Xem lại tài liệu chính thức về các kiểu nâng cao, generics và utility types.
• Tập trung vào tình huống thực tế thay vì học vẹt.
• Luyện đọc và hiểu lỗi kiểu, vì thông báo trình biên dịch TypeScript thường là một phần của bài đánh giá kỹ thuật.

Dự án thực hành:

• Xây dựng các ứng dụng nhỏ nhưng hoàn chỉnh để thể hiện kỹ năng thực tế:
• Danh sách việc cần làm (To-Do) với React, gõ kiểu cho props và state.
• Express REST API với đối tượng yêu cầu và phản hồi có kiểu.
• Thư viện tiện ích dùng generics và mapped types.

Lỗi thường gặp:

• Lạm dụng any, làm suy yếu an toàn kiểu của TypeScript.
• Bỏ qua chế độ strict, dẫn đến lỗi lúc chạy.
• Nhầm lẫn giữa null và undefined trong định nghĩa kiểu.
• Quên cài đặt hoặc cấu hình định nghĩa kiểu cho thư viện bên thứ ba.

Mẹo giao tiếp:

• Trong phỏng vấn, hãy giải thích rõ lý do đằng sau quyết định về kiểu của bạn.
• Mô tả đánh đổi giữa các cách tiếp cận (ví dụ: interface so với type alias hoặc abstract class so với interface).
• Cho thấy TypeScript cải thiện khả năng bảo trì và mở rộng trong dự án như thế nào.

Kết luận

TypeScript tiếp tục thống trị phát triển web hiện đại vì nó áp đặt các kiểu dữ liệu rõ ràng, nhất quán, giúp ngăn lỗi và cải thiện khả năng mở rộng cho các dự án lớn.

Để học tiếp, hãy khám phá toàn bộ danh mục khóa học của chúng tôi để tiếp tục mở rộng kiến thức qua nhiều công nghệ.