GMO-Z.com Vietnam Lab Center Technology Blog

Khởi tạo ứng dụng React với Typescript

T.P.H -

Với những bạn tiếp xúc với Javascript (JS) nói chung cũng như React nói riêng, có thể thấy bản thân ngôn ngữ JS cực kì sexy và khá là quyến rũ. Tuy nhiên, chính vì quá "mở" nên việc code JS có rất nhiều lỗi tiềm tàng về cú pháp cũng như việc bắt lỗi. Sự ra đời của Typescript (TS) là một luồng gió mới giúp định hình lại JS với một cách viết có rule chặt chẽ, gọn gàng và hạn chế được những lỗi đó, có thể nói TS chính là tương lai của JS trên front-end.

Đối với các ứng dụng React thuần tuý, bạn cũng có thể sử dụng một số thư viện hỗ trợ về việc định nghĩa type như PropTypes và kiểm tra type như Flow. Tuy nhiên lần này mình sẽ giới thiệu cho các bạn cách áp dụng TS vào các ứng dụng React và React Native (RN).

Để hiểu thêm về Typescript, các bạn có thể tham khảo các bài viết đã có sẵn trên blog của vietnamlab.vn.

I. Ứng dụng React Web

Bản thân Facebook và Microsoft đã cung cấp sẵn CLI Tool kèm sẵn một template để khởi tạo nhanh một ứng dụng React + TS được config sẵn. Điều này rất hữu ích với một developer mới tiếp xúc.

1. Khởi tạo

$ npm install -g create-react-app
$ create-react-app [app-name] --scripts-version=react-scripts-ts

Lưu ý: Phần app-name viết liền không dấu, không dùng kí tự đặc biệt, và sẽ là tên folder sau khi tạo xong.

Sau khi khởi tạo xong ta sẽ có dạng thư mục cấu trúc như sau:

[app-name]/
├─ .gitignore
├─ images.d.ts
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ package.json
├─ tsconfig.json
├─ tsconfig.prod.json
├─ tsconfig.test.json
└─ tslint.json

Khi làm việc với TS, chúng ta sẽ cần quan tâm tới các file config:

  • tsconfig.json: bao gồm các thiết lập cụ thể của TypeScript đối với project; bạn hoàn toàn có thể tách ra thành từng môi trường phù hợp cho với việc dev, test và deploy ứng dụng.
    • tsconfig.test.json: Thiết lập riêng cho môi trường test.
    • tsconfig.prod.json: Thiết lập riêng cho môi trường production.
  • tslint.json: bao gồm các thiết lập của TSLint, giúp bạn check lỗi syntax, logic một cách hiệu quả.

2. Thiết lập

Vì thiết lập mặc định của TSLint khá là khắt khe và chặt chẽ, vì thế Microsoft khuyên người dùng nên thay đổi thiết lập ở trong file tslint.json sang thành như sau:

{
  "extends": [],
  "defaultSeverity": "warning",
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts"
    ]
  }
}

Tuy nhiên, bạn hoàn toàn có thể thoải mái tinh chỉnh TSLint sao cho phù hợp với tính chất của dự án hiện tại, bạn có thể tìm hiểu thêm cách thiết lập các options của TSLint tại đây.

II. Ứng dụng React Native

Việc thiết lập cho ứng dụng React Native có phần phức tạp hơn một chút.

1. Khởi tạo

Đầu tiên, bạn cần khởi tạo project bằng react-native-cli, cụ thể tại đây, phần "Building Projects with Native Code"

$ npm install -g react-native-cli
$ react-native init [app-name]

Lưu ý: Phần app-name viết liền không dấu, không dùng kí tự đặc biệt, và sẽ là tên folder sau khi tạo xong.

2. Thêm Typescript

$ yarn add --dev typescript
$ yarn add --dev react-native-typescript-transformer
$ yarn tsc --init --pretty --jsx react
$ touch rn-cli.config.js
$ yarn add --dev @types/react @types/react-native

Đối với các bạn không dùng yarn mà dùng npm thì có thể thay:

  • yarn → npm
  • yarn add → npm install

3. Thiết lập

Trong file tsconfig.json chưa các thiết lập của TS đã khá ổn, tuy nhiên bạn cần bỏ comment dòng bên dưới:

{
  ...
  // "allowSyntheticDefaultImports": true,  /* ... */
  ...
}

Phần này sẽ cho phép bạn import những modules mà ko cần thiết có một export mặc định (export default ...), tránh các cảnh báo về type checking không cần thiết vì RN sử dụng import kiểu này khá nhiều.

Cuối cùng, để compile một số thành phần đặc biệt của RN, bạn cần thiết lập sử dụng react-native-typescript-transformer trong file rn-cli.config.js:

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

Kết luận

Sau khi hoàn thành các bước trên, bạn có thể chạy ứng dụng React của mình một cách ổn định với TS và tận hưởng những tính năng mà TS mang lại. Một số kết luận sau khi mình thiết lập TS cho dự án cá nhân:

  • Khởi tạo dễ dàng, thiết lập chi tiết cũng đơn giản thông qua hướng dẫn ở trang chủ của Typescript.
  • Việc học TS ban đầu tuy chưa quen vì chặt chẽ hơn cách code "sexy" của JS nhưng đem lại hiệu quả rõ rệt về hạn chế các lỗi tiềm tàng.
  • TS tuy rất mạnh về type checking nhưng đòi hỏi các lib khi import vào cũng phải định nghĩa type bằng TS (hoặc được viết/chuyển đổi bằng TS) thì TSLint mới hiểu để kiểm tra.
  • Xu hướng chung các lib nổi tiếng đều đã khai báo type hoặc chuyển dịch sang sử dụng TS. Nếu không, bạn hoàn toàn có thể tự định nghĩa nếu cần thiết.

Tham khảo