Công nghệ

Thêm kiểm tra type trong Javascript với VS Code

2263

Bài viết được sự cho phép của tác giả Lưu Bình An

VS Code có một công cụ không thể tuyệt vời hơn cho các bạn viết JS một cách an toàn ko sợ sai type. Túm gọn chỉ bằng một comment thần thánh

4 lý do để VS Code là Text Editor ưa thích của mọi lập trình viên

8 extension cần thiết dành cho VS Code

Ví dụ, bạn muốn nghiêm cấm việc thay đổi type của một biến đã gán sẵn giá trị trước đó

var foo = 3;
foo = false;

Tất cả những gì bạn cần làm

// @ts-check
var foo = 3;
foo = false; // indicates error

VS Code sẽ thông báo cho bạn một lỗi rất dễ thương như thế này

Type false is not assignable to type Number

Một vài ví dụ sử dụng để bạn tham khảo

Kiểm tra params của hàm

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

add(1,2,3);

Code trên vẫn ko sai nhé, mặc dù chúng ta không hề khai báo param thứ 3. Thêm // @ts-check để thông báo khi vô tình truyền nhiều hơn số param cần thiết

Expected 0-2 arguments but got 3

// @ts-check
function add(a, b) {
  return a + b;
}

add(1,2,3); // complains about the `3`

Kiểm tra Object

// @ts-check
let gameObject = {
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  getArea() {
    return this.width * this.height
  }
}

gameObject.z;

Cái này nó sẽ không bắt lỗi, chúng ta vẫn được quyền thêm z sau khi đã khai báo

Vậy sao? Dùng JsDoc

// @ts-check

/** @type {{x: number, y: number, width: number, height: number, getArea: Function }} */
let gameObject = {
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  getArea() {
    return this.width * this.height
  }
}

gameObject.z;

Biến không bắt buộc

Chúng ta có một hàm mà giá trị param truyền vào không bắt buộc lúc nào cùng có

function doSomething(config) {
  if (config && config.shouldRun) {
    // run
  }
}

doSomething();
doSomething({ shouldRun: true })

Chỗ này chúng ta cũng cần sự hỗ trợ của JsDoc như trường hợp trên

// @ts-check

/**
 * @param {{ shouldRun: boolean }} [config] - Somebody's name.
 */
function doSomething(config) {
  if (config && config.shouldRun) {
    // run
  }
}

doSomething({ canRun: false}); // this now indicates an error
doSomething({ shouldRun: true })

Với cách thiết đặt như vậy, chúng ta sẽ nhận được cảnh báo khi truyền vào một object mà không có giá trị shouldRun

Ngoại lệ

Nếu có trường hợp ngoại lệ nào đó bạn muốn bỏ qua việc kiểm tra tính chuẩn mực của type, dùng thần chú //@ts-ignore hoặc //@ts-nocheck

//@ts-ignore
doSomething({ canRun: false});

Sau nhiều năm chinh chiến, mình ngộ ra rằng TypeScript cũng tốt, nhưng nó không dành cho tất cả mọi người, tất cả dự án. Những cái kiểm tra nhỏ nhỏ như vậy đôi khi lại mang khác biệt đủ lớn khi bạn viết code.

Bài viết gốc được đăng tải tại VuiLapTrinh

Có thể bạn quan tâm:

Xem thêm các việc làm JavaScript hấp dẫn tại TopDev