Khóa học này được viết hoàn toàn bằng JavaScript nhưng bạn cũng có thể sử dụng TypeScript với React Three Fiber.

TypeScript là một phần mở rộng của JavaScript thêm kiểu dữ liệu vào ngôn ngữ này. Đây là một cách tuyệt vời để phát hiện lỗi sớm và cải thiện trải nghiệm phát triển với tính năng hoàn thành tự động và tài liệu hóa.

Việc sử dụng hay không sử dụng TypeScript hoàn toàn phụ thuộc vào bạn. Để giúp bạn quyết định, đây là một số câu hỏi bạn nên suy nghĩ:

• Loại dự án bạn đang xây dựng: Bạn đang phác thảo một trải nghiệm 3D hay xây dựng với ý định triển khai? Nó là một dự án nhỏ hay lớn? Có dự định duy trì lâu dài không?
• Đội ngũ của bạn: Bạn đang làm việc một mình hay với người khác? Giống như phần chú thích, kiểud là một cách tuyệt vời để làm cho code của bạn dễ hiểu hơn với người khác.

Không có câu trả lời đúng hoặc sai, quyết định tốt nhất cho dự án của bạn là tùy thuộc vào bạn. Vì thư viện được viết bằng TypeScript, bạn có thể hưởng lợi từ nó ngay cả khi bạn đang sử dụng JavaScript.

Chúng ta sẽ cùng nhau xem cách dễ dàng chuyển đổi dự án khởi đầu của chúng ta sang TypeScript và cách sử dụng nó với React Three Fiber.

Nhưng bài học này không phải là một hướng dẫn về TypeScript, nếu bạn chưa có kinh nghiệm và muốn tìm hiểu thêm, bạn nên bắt đầu từ đây.

Cài đặt

Trong bài học cài đặt, chúng ta đã tạo một dự án mới từ đầu bằng Vite. Nếu bạn đang bắt đầu một dự án mới, bạn có thể làm theo các bước tương tự và chọn biến thể TypeScript cho dự án của bạn thay vì JavaScript. (Đừng quên quay lại đây sau khi khám phá cách sử dụng nó 🤭)

Hãy xem cách chuyển đổi một dự án hiện có sang TypeScript.

Dự án bắt đầu giống như kết quả cuối cùng của bài học cài đặt, nhưng các bước thực hiện giống nhau cho bất kỳ dự án nào.

Cài đặt TypeScript

Trước tiên, chúng ta cần cài đặt TypeScript vào dự án của mình. Chúng ta có thể thực hiện điều đó bằng lệnh sau:

Copy
yarn add -D typescript

-D sẽ cài đặt TypeScript như một dev dependency. (Vì nó không cần thiết cho bản dựng sản phẩm cuối cùng)

TypeScript thêm một bước mới vào quá trình xây dựng của chúng ta. Chúng ta cần biên dịch các tệp TypeScript thành JavaScript trước khi chạy dự án. Để làm điều đó, chúng ta cần cập nhật script build trong package.json như sau:

Copy
"build": "tsc && vite build"

Lệnh tsc sẽ biên dịch các tệp TypeScript của chúng ta thành JavaScript và lệnh vite build sẽ xây dựng dự án như bình thường.

Phần mở rộng của các tệp sẽ trở thành .tsx thay vì .jsx và .ts thay vì .js. Vẫn trong tệp package.json, chúng ta có thể điều chỉnh script lint để phù hợp:

Copy
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

Cấu hình TypeScript

Chúng ta cần tạo một tệp tsconfig.json tại gốc của dự án để cấu hình TypeScript:

Copy
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Và một tsconfig.node.json:

Copy
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Đây là các tùy chọn mặc định cho một dự án React sử dụng Vite. Bạn có thể tìm thêm thông tin về chúng trong trang tài liệu tùy chọn của trình biên dịch.

Cấu hình ESLint

Chúng ta cần cập nhật tệp .eslintrc.cjs để tính đến TypeScript:

Copy
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended",
  ],
  parser: "@typescript-eslint/parser",
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

Nó yêu cầu hai gói mới:

Copy
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser