Hướng dẫn tích hợp TypeScript với React từng bước

Tích hợp TypeScript với React giúp nâng cao trải nghiệm phát triển bằng cách cung cấp kiểm tra kiểu tĩnh và hỗ trợ công cụ tốt hơn. Hướng dẫn này hướng dẫn quy trình thiết lập TypeScript trong dự án React từ đầu.

Điều kiện tiên quyết

Đảm bảo rằng Node.js và npm (Node Package Manager) được cài đặt trên hệ thống. Các công cụ này là cần thiết để quản lý các phụ thuộc và tập lệnh của dự án.

Tạo một dự án React mới với TypeScript

Cách dễ nhất để bắt đầu một dự án React mới với TypeScript là sử dụng mẫu Create React App with TypeScript. Thực hiện theo các bước sau:

1. Tạo một dự án mới: Sử dụng Create React App để tạo một dự án React mới có hỗ trợ TypeScript.

npx create-react-app my-app --template typescript

Lệnh này thiết lập một dự án React mới có tên my-app với cấu hình TypeScript ngay lập tức.

Hiểu về cấu hình TypeScript

Dự án được tạo bao gồm tệp tsconfig.json, chứa các tùy chọn trình biên dịch TypeScript và cài đặt dự án. Sau đây là cấu hình mẫu:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

Viết các thành phần TypeScript

Các thành phần React có thể được viết bằng TypeScript để đảm bảo an toàn kiểu. Sau đây là ví dụ về một thành phần chức năng với TypeScript:

import React from 'react';

interface Props {
  name: string;
  age?: number;
}

const Greeting: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>You are {age} years old.</p>}
    </div>
  );
}

export default Greeting;

Trong ví dụ này, giao diện Props định nghĩa các kiểu cho props của thành phần. Kiểu React.FC được sử dụng cho các thành phần chức năng có các thành phần con và kiểm tra kiểu.

Chạy dự án

Sau khi thiết lập TypeScript và viết các thành phần, dự án có thể được chạy bằng cách sử dụng tập lệnh npm sau:

npm start

Lệnh này khởi động máy chủ phát triển và mở ứng dụng React trong trình duyệt web mặc định.

Mẹo bổ sung

• Định nghĩa kiểu: Đối với các thư viện của bên thứ ba, hãy cài đặt định nghĩa kiểu bằng npm. Ví dụ: npm install @types/react @types/react-dom --save-dev cung cấp các kiểu cho React và ReactDOM.
• Sử dụng TypeScript với Redux: Khi sử dụng Redux với TypeScript, hãy đảm bảo nhập các hành động, bộ giảm và lưu trữ để đảm bảo tính an toàn về kiểu và tự động hoàn thành tốt hơn.

Phần kết luận

Tích hợp TypeScript với React giúp tăng cường phát triển bằng cách cung cấp tính an toàn cho kiểu và khả năng bảo trì mã tốt hơn. Bằng cách làm theo các bước được nêu trong hướng dẫn này, một dự án React với TypeScript có thể được thiết lập hiệu quả, cho phép các nhà phát triển tận dụng các tính năng của TypeScript để xây dựng các ứng dụng mạnh mẽ và có thể mở rộng.