Nếu bạn là một người dùng TypeScript, bất kể với vai trò developer hay DevOps-er chắc hẳn bạn rất yêu thích “ngôn ngữ” này bởi tính chặt chẽ trong cú pháp mà nó bổ sung cho javascript.
Bài viết này giới thiệu đến 5 config rất hữu ích, có thể sẽ giúp chất lượng code của bạn càng tốt hơn.
Về file tsconfig.json:
Typescript thường được gọi là “super set” của javascript, hiểu đơn giản là nó tăng thêm những tính năng hữu dụng cho javascript, nổi bật nhất là strict type check.
Điều này là nhờ vào Typescript compiler trước khi biên dịch cú pháp TypeScript thành Javascript đã áp dụng những “Rules” để kiểm tra tính đúng đắn của cú pháp và kiểu dữ liệu . Trong đó, file tsconfig.json là file cấu hình của trình biên dịch Typescript.
Related Post
Ta chỉ cần chạy lệnh tsc --init là một file tsconfig.json sẽ được tạo ra một cách tự động. Cần chú ý rằng nơi mà file này đứng sẽ là root directory, nếu bạn làm việc với những config liên quan tới đường dẫn tương đối sẽ phải lưu ý vấn đề này.
5 config hữu dụng về code quality trong TypeScript:
1. noUnusedLocals:
Config này sẽ báo lỗi trong trường hợp bạn có local variable (tức biến biên trong một function) đã khai báo mà không được dùng ở đâu cả.
Cách bật config:
"compilerOptions": {
"noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
}
2. noUnusedParameters:
Tương tự với config trên, nhưng config này sẽ báo lỗi khi trong function của bạn có chứa tham số mà không dùng đến.
Cách bật config:
"compilerOptions": {
"noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
}3. noImplicitAny:
Xem xét ví dụ sau:
function fn(s) {
console.log(s.substr(3));
}
fn(42);Ở ví dụ trên, tham số s đang được mong đợi có kiểu dữ liệu string, để có thể áp dụng hàm substr(3) lấy ra chuỗi con bên trong nó.
Tuy nhiên người viết đã không khai báo cụ thể kiểu dữ liệu, dẫn đến tham số được ngầm định là any sau đó được truyền vào một number dẫn đến lỗi ở runtime.
Việc dùng any trong TypeScript làm mất hết toàn bộ giá trị mà TypeScript mang lại. Dùng config sau để TypeScript báo lỗi nếu có biến ngầm định kiểu any:
"compilerOptions": {
"noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
}4. noImplicitReturns:
Ví dụ về Implicit returns:
Ở đây bạn có thể thấy khi điều kiện if không thỏa, function sẽ không trả về giá trị cụ thể, và được ngầm định là trả về undefined.
Thử tưởng tượng trong hơn mười ngàn dòng code của bạn bỗng nhiên trả về undefined, bạn sẽ mất rất nhiều thời gian để debug xem logic của bạn đã sai ở chỗ nào.
Trong trường hợp này, cách hay hơn là quăng lỗi, hoặc trả về một giá trị mặc định!
Bật config:
"compilerOptions": {
"noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
}5. noImplicitThis:
this trong javascript là một chủ đề dài và khó. Việc xác định xem this mà bạn đang dùng sẽ trỏ đến giá trị nào thường tốn nhiều tế bào não ? và dễ sai sót.
Config này giúp hạn chế lỗi dùng sai this. Thử nhìn xem ví dụ sau:
class Person {
name: string;
job: string;
constructor(name: string, job: string) {
this.name = name;
this.job = job;
}
getInfo() {
return function () {
return `Name: ${this.name}, Job: ${this.job}`;
};
}
}
const test = new Person('Quyen', "Dev").getInfo();
console.log(test())Ở đây, người viết code nghĩ rằng this sẽ trỏ tới instance của object Person, từ đó ta có thể truy cậ vào property name và job.
Nhưng nhìn kỹ lại thì this không trực tiếp nằm trong scope của getInfo(), do đó hàm này sẽ báo lỗi undefined, và mặc định this ở đây sẽ có kiểu dữ liệu any vì TypeScript không thể xác định được nó đang trỏ tới object nào.
Ta có thể bật noImplicitThis để TypeScript cảnh báo khi this ngầm định là any:
this ngầm định là anyBật config:
"compilerOptions": {
"noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
}
Bonus config:
Khi bạn chạy lệnh tsc, typescript sẽ biên dịch file .ts sang file .js, kể cả khi trong code của bạn vẫn đang báo lỗi. Để bắt typescript chỉ tạo ra file .js khi bạn đã sửa toàn bộ lỗi, ta có thể set noEmitOnError bằng true
"compilerOptions": {
"noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
}
Tóm lại:
- Mọi cấu hình của typesript nằm trong file tsconfig.json
- Khởi tạo file tsconfig.json bằng lệnh
tsc --init - Thư mục chứa file tsconfig.json sẽ là thư mục root
- Biến khai báo mà không dùng được gọi là dead code, có thể dùng những config có sẵn để nhắc nhở loại bỏ các biến này.
Typescript là một compiler mạnh mẽ và có rất nhiều options mà rất ít khi dùng đến. Bài viết này mình đã giới thiệu về 5 config mà mình cho là hữu dụng nhất. Nếu có cơ hội mình sẽ viết thêm bài giới thiệu về config khác trong typescript.
