Strict Mode trong TypeScript

Tạo bởi Hoàng Vũ, chỉnh sửa cuối lúc 30 tháng 1, 2025

Strict Mode (Chế độ kiểm tra chặt chẽ) là một tính năng quan trọng trong TypeScript giúp phát hiện lỗi tiềm ẩn ngay từ lúc biên dịch. Khi bật chế độ này, TypeScript sẽ kiểm tra mã nguồn nghiêm ngặt hơn, giảm thiểu lỗi và giúp mã trở nên an toàn, dễ bảo trì hơn.

1. Bật Strict Mode trong TypeScript

Để bật chế độ kiểm tra chặt chẽ, bạn cần cấu hình trong tập tin tsconfig.json.

Mở tsconfig.json và thêm hoặc chỉnh sửa dòng sau:

{
  "compilerOptions": {
    "strict": true
  }
}

Lệnh này sẽ bật tất cả các tùy chọn kiểm tra chặt chẽ có sẵn trong TypeScript.

2. Các tùy chọn trong Strict Mode

Nếu bạn muốn tùy chỉnh riêng lẻ các kiểm tra chặt chẽ thay vì bật toàn bộ strict: true, bạn có thể cấu hình từng tùy chọn một.

2.1. strictNullChecks – Kiểm tra nullundefined

Mặc định, TypeScript không báo lỗi khi gán null hoặc undefined cho biến có kiểu khác. Nếu bật strictNullChecks, TypeScript sẽ không cho phép điều này.

Ví dụ:

"strictNullChecks": true
let name: string;
name = null; // ❌ Lỗi: Type 'null' is not assignable to type 'string'.

Khi strictNullChecks được bật, bạn phải xử lý null đúng cách:

let name: string | null;
name = null; // ✅ Hợp lệ vì kiểu dữ liệu đã cho phép null

2.2. noImplicitAny – Cấm kiểu any ngầm định

Khi noImplicitAny được bật, TypeScript sẽ yêu cầu bạn khai báo kiểu dữ liệu rõ ràng thay vì để TypeScript tự động gán kiểu any.

Ví dụ:

"noImplicitAny": true
function sum(a, b) {
  return a + b; // ❌ Lỗi: Tham số 'a' và 'b' có kiểu ngầm định là 'any'.
}

Cách khắc phục:

function sum(a: number, b: number): number {
  return a + b; // ✅ Không lỗi vì đã khai báo kiểu dữ liệu
}

2.3. strictFunctionTypes – Kiểm tra chặt chẽ kiểu hàm

Khi bật strictFunctionTypes, TypeScript sẽ kiểm tra kiểu dữ liệu của hàm kỹ càng hơn, đặc biệt là khi truyền đối số vào callback.

Ví dụ:

"strictFunctionTypes": true
type Func = (name: string) => void;

const sayHello: Func = (name) => {
  console.log("Hello " + name);
};

const incorrectFunc: Func = (id) => {
  console.log("User ID: " + id); // ❌ Lỗi: 'id' phải có kiểu 'string'.
};

2.4. strictPropertyInitialization – Kiểm tra khởi tạo thuộc tính trong class

Nếu bật strictPropertyInitialization, TypeScript sẽ báo lỗi nếu một thuộc tính trong class không được khởi tạo trong constructor.

Ví dụ:

"strictPropertyInitialization": true
class User {
  name: string; // ❌ Lỗi: Thuộc tính 'name' chưa được khởi tạo
  constructor() {}
}

Cách khắc phục:

class User {
  name: string;
  constructor(name: string) {
    this.name = name; // ✅ Hợp lệ vì đã khởi tạo trong constructor
  }
}

Hoặc sử dụng dấu ! để TypeScript bỏ qua kiểm tra này:

class User {
  name!: string; // ✅ Không lỗi nhưng cần đảm bảo giá trị được gán trước khi sử dụng
}

2.5. noImplicitThis – Cấm this ngầm định kiểu any

Nếu bật noImplicitThis, TypeScript sẽ cảnh báo khi this không có kiểu cụ thể.

Ví dụ:

"noImplicitThis": true
class Person {
  name = "John";
  sayHello() {
    console.log("Hello, " + this.name); // ✅ Không lỗi
  }
}
const greet = new Person().sayHello;
greet(); // ❌ Lỗi: 'this' không xác định kiểu.

Cách khắc phục:

class Person {
  name = "John";
  sayHello = () => {
    console.log("Hello, " + this.name);
  };
}

3. Lợi ích của Strict Mode

  • Giúp phát hiện lỗi sớm: Tránh lỗi do null, undefined, hoặc thiếu kiểu dữ liệu.
  • Tăng cường an toàn kiểu dữ liệu: Mã TypeScript trở nên dễ bảo trì hơn.
  • Giúp code rõ ràng hơn: Yêu cầu khai báo kiểu tường minh giúp tránh nhầm lẫn.

4. Kết luận

Strict Mode là một tính năng mạnh mẽ giúp TypeScript kiểm tra chặt chẽ mã nguồn. Bật strict: true hoặc từng tùy chọn riêng lẻ (strictNullChecks, noImplicitAny,...) sẽ giúp phát hiện lỗi tiềm ẩn và đảm bảo chất lượng mã tốt hơn.

Website Logo

Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.

Bình luận

Website Logo

Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.

Liên hệ công việc qua email dưới đây.

lhvuctu@gmail.com

Chúng Tôi Trên

Bạn đang muốn học về lập trình website?

Bạn cần nâng cao kiến thức chuyên nghiệp hơn để nâng cao cơ hội nghề nghiệp? Liên hệ