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
@ts-check
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 typeNumber
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.
Type checking your JavaScript with VS Code - the superpowers you didn't know you had
Initializing...