Trong TypeScript, bạn có thể sử dụng các thư viện JavaScript thuần từ bên ngoài mà không cần phải chuyển đổi toàn bộ mã sang TypeScript. Tuy nhiên, vì TypeScript yêu cầu thông tin về kiểu dữ liệu, bạn cần cung cấp các định nghĩa kiểu (type definitions) để có thể sử dụng các thư viện JavaScript một cách hiệu quả và tận dụng được những tính năng của TypeScript như kiểm tra kiểu (type-checking). Dưới đây là hướng dẫn chi tiết cách sử dụng các thư viện JavaScript thuần từ bên ngoài trong TypeScript.
Đầu tiên, bạn cần cài đặt thư viện JavaScript mà bạn muốn sử dụng. Điều này có thể được thực hiện bằng cách sử dụng trình quản lý gói như npm hoặc yarn.
npm install some-libraryNếu thư viện JavaScript mà bạn sử dụng không có sẵn các định nghĩa kiểu, bạn có thể sử dụng từ khóa declare để nói với TypeScript rằng một giá trị cụ thể nào đó tồn tại, mặc dù TypeScript không có thông tin về kiểu của nó.
declare với kiểu anyBạn có thể sử dụng kiểu any để tạm thời vô hiệu hóa kiểm tra kiểu cho thư viện đó. Điều này không lý tưởng nhưng là cách nhanh chóng để tích hợp một thư viện JavaScript mà không có định nghĩa kiểu.
declare var someLibrary: any;
someLibrary.someMethod();Khi sử dụng any, bạn sẽ không có tính năng hỗ trợ kiểm tra kiểu hoặc hoàn thành mã (autocomplete) cho thư viện này.
require (nếu thư viện không hỗ trợ ES module)Đối với các thư viện JavaScript cũ, bạn có thể cần sử dụng require để nhập thư viện, nhất là khi thư viện không hỗ trợ ES module.
const someLibrary = require('some-library');
someLibrary.someMethod();Nhiều thư viện JavaScript phổ biến đã có sẵn các định nghĩa kiểu được cộng đồng viết và duy trì trong dự án DefinitelyTyped. Để sử dụng các định nghĩa kiểu này, bạn có thể cài đặt chúng thông qua gói @types.
npm install @types/some-library --save-devSau khi cài đặt, TypeScript sẽ tự động nhận biết các định nghĩa kiểu này và cung cấp tính năng kiểm tra kiểu cũng như hỗ trợ hoàn thành mã. Ví dụ, đối với thư viện lodash, bạn có thể cài đặt định nghĩa kiểu như sau:
npm install lodash
npm install @types/lodash --save-devSau đó, bạn có thể sử dụng thư viện lodash như sau:
import * as _ from 'lodash';
const result = _.chunk(['a', 'b', 'c', 'd'], 2);
console.log(result); // [['a', 'b'], ['c', 'd']]Nếu thư viện JavaScript không có định nghĩa kiểu, bạn có thể tự viết file .d.ts để cung cấp các định nghĩa kiểu cho TypeScript. Bạn có thể tạo một file với phần mở rộng .d.ts và thêm vào các định nghĩa kiểu cho các phương thức và thuộc tính mà bạn sử dụng từ thư viện.
Giả sử bạn đang sử dụng một thư viện có tên myLibrary và nó không có sẵn định nghĩa kiểu. Bạn có thể tạo một file myLibrary.d.ts như sau:
// myLibrary.d.ts
declare module 'myLibrary' {
export function someMethod(param: string): void;
}Sau đó, bạn có thể sử dụng thư viện myLibrary trong mã TypeScript của bạn như sau:
import { someMethod } from 'myLibrary';
someMethod("Hello TypeScript");@ts-ignore Để Bỏ Qua Kiểm Tra KiểuTrong một số trường hợp bạn cần bỏ qua kiểm tra kiểu cho một dòng mã cụ thể, bạn có thể sử dụng chỉ thị @ts-ignore. Tuy nhiên, bạn nên hạn chế sử dụng cách này vì nó làm giảm độ an toàn của mã TypeScript.
// @ts-ignore
someLibrary.someMethod();Kết luận, việc sử dụng các thư viện JavaScript thuần từ bên ngoài trong TypeScript có thể dễ dàng bằng cách cài đặt định nghĩa kiểu hoặc tự viết các định nghĩa đó. Điều này giúp bạn kết hợp linh hoạt giữa TypeScript và các thư viện JavaScript có sẵn, đồng thời tận dụng được tính năng kiểm tra kiểu mạnh mẽ của TypeScript.
