Trong quá trình xây dựng React app, bạn không thể tự viết code cho tất cả các chức năng, bạn có thể cài thêm các ứng dụng bên thứ ba (third party library). Khi đó, bạn sẽ biết được rằng nếu bạn sử dụng TypeScript trong ReactJs app của bạn, rất nhiều thư viện không có typing riêng.

Bạn có thể sẽ gặp thông báo lỗi này:

Could not find a declaration file for module ‘third-party-library-name’. ‘third-party-library-name.js’ implicitly has an ‘any’ type. Try npm install @types/third-party-library-name if it exists or add a new declaration (.d.ts) file containing declare module 'third-party-library-name

Đừng lo lắng!

Trước hết, bạn sẽ chỉ nhìn thấy thông báo này khi trong file tsconfig của bạn đang để noImplicitAny mặc định là true . Bạn có thể set thành false, tuy nhiên, cá nhân tôi thấy quy tắc đó hữu ích trong quá trình phát triển app. Ngoài ra, bài viết này giả định bạn đang sử dụng TypeScript 2.x.

Tiếp theo, như gợi ý của thông báo trên, hãy thử cài @types/third-party-library-name bằng npm hoặc yarn. Tuy nhiên, nhiều thư viện sẽ không có typing riêng. Những bước sau đây có thể giúp bạn giải quyết vấn đề trên:

  1. Sửa typeRoots property trong file tsconfig và nên giữ cả nodemodules/@types:
{
  "compilerOptions": {
      ...
      "typeRoots": [ "./types", "./node_modules/@types"]
   }
}

Điều này có nghĩa là app của bạn sẽ kiểm tra ở thư mục types trước sau đó mới đến node_modules/@types. Lưu ý rằng thư mục types đặt ở thư mục gốc của project.

  1. Thêm thư mục gốc đó vào thuộc tính loại trừ trong file tsconfig, vì vậy nó sẽ không được biên dịch:
{
   "compilerOptions": {},
   "exclude": ["node_modules", "typings", ...]
}

  1. Tạo thư mục có tên trùng với tên của ứng dụng bên thứ ba trong thư mục types:

    types/third-party-library-name

  2. Tạo file index.d.ts trong thư mục trên:

    types/third-party-library-name/index.d.ts

  3. Thêm định nghĩa type của bạn hoặc nếu bạn chỉ cần tạo type nhanh chóng, bạn có thể thêm như sau:

declare module 'third-party-library-name';

Ngoài ra, nếu bạn chỉ muốn khắc phục lỗi, không muốn viết ra định nghĩa custom type đầy đủ và thích khai báo ngắn hơn, bạn cũng có thể bỏ qua các hướng dẫn trên và chỉ cần tạo một file ở thư mục gốc của project có tên global.d.ts và liệt kê tất cả các khai báo declare module 'x' của bạn trong file đó.

Nếu bạn muốn viết một file type hoàn chỉnh, tham khảo bài viết này.