Rate this post

React và TypeScript là sự kết hợp mạnh mẽ giúp các nhà phát triển xây dựng ứng dụng web với mã nguồn rõ ràng, dễ bảo trì và ít lỗi hơn. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo các component React sử dụng TypeScript, từ việc cài đặt môi trường cho đến cách viết các component với kiểu dữ liệu an toàn.

Tóm tắt nội dung

Tại sao sử dụng TypeScript với React?

Lợi ích của TypeScript

Kiểm tra kiểu dữ liệu tĩnh: Giúp phát hiện lỗi ngay trong quá trình phát triển.
Tự động hoàn thành và gợi ý mã: Tăng tốc độ phát triển và giảm lỗi cú pháp.
Tài liệu rõ ràng: TypeScript giúp tạo tài liệu tốt hơn thông qua kiểu dữ liệu rõ ràng.

Cài đặt Môi Trường

Tạo Ứng Dụng React với TypeScript

Cách dễ nhất để bắt đầu là sử dụng Create React App với template TypeScript:

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

Cài Đặt TypeScript trong Dự Án Hiện Tại

Nếu bạn đã có một dự án React, bạn có thể thêm TypeScript bằng cách cài đặt các gói sau:

npm install typescript @types/node @types/react @types/react-dom @types/jest

Sau đó, tạo tệp tsconfig.json để cấu hình TypeScript:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

Viết Component React với TypeScript

Functional Component

Functional components là cách phổ biến nhất để viết component trong React. Dưới đây là ví dụ về cách viết functional component 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>
      <p>You are {age} years old.</p>
    </div>
  );
};

export default Greeting;

Class Component

Nếu bạn cần sử dụng state hoặc lifecycle methods, bạn có thể sử dụng class component. Dưới đây là ví dụ về cách viết class component với TypeScript:

import React, { Component } from 'react';

interface Props {
  initialCount: number;
}

interface State {
  count: number;
}

class Counter extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Sử Dụng Hooks với TypeScript

useState

Bạn có thể sử dụng hooks với TypeScript để quản lý state trong functional components. Ví dụ:

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

useEffect

Hook useEffect cũng được sử dụng phổ biến và có thể dễ dàng kết hợp với TypeScript:

import React, { useState, useEffect } from 'react';

const DataFetcher: React.FC = () => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
};

export default DataFetcher;

Sử Dụng Context với TypeScript

Context API của React cũng hỗ trợ tốt khi sử dụng với TypeScript:

Tạo Context

import React, { createContext, useContext, useState } from 'react';

interface UserContextType {
  user: string;
  setUser: (user: string) => void;
}

const UserContext = createContext<UserContextType | undefined>(undefined);

const UserProvider: React.FC = ({ children }) => {
  const [user, setUser] = useState<string>('Guest');
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

const useUser = () => {
  const context = useContext(UserContext);
  if (context === undefined) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};

export { UserProvider, useUser };

Sử Dụng Context

import React from 'react';
import { UserProvider, useUser } from './UserContext';

const UserProfile: React.FC = () => {
  const { user, setUser } = useUser();

  return (
    <div>
      <p>User: {user}</p>
      <button onClick={() => setUser('John Doe')}>Change User</button>
    </div>
  );
};

const App: React.FC = () => (
  <UserProvider>
    <UserProfile />
  </UserProvider>
);

export default App;

Sử Dụng TypeScript với React Router

Cài Đặt React Router

npm install react-router-dom @types/react-router-dom

Cấu Hình React Router

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home: React.FC = () => <h2>Home</h2>;
const About: React.FC = () => <h2>About</h2>;

const App: React.FC = () => (
  <Router>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

export default App;

Những Lưu Ý Quan Trọng Khi Sử Dụng TypeScript với React

Kiểu Hóa Props và State

Đảm bảo rằng bạn luôn kiểu hóa props và state trong component để tận dụng tối đa lợi ích của TypeScript.

Sử Dụng TypeScript cho Hooks

Khi sử dụng hooks như useState và useEffect, hãy chắc chắn rằng bạn đã xác định rõ kiểu dữ liệu.

Kiểm Tra Type

Sử dụng TypeScript để kiểm tra kiểu dữ liệu của các API, context, và các thành phần khác để đảm bảo tính toàn vẹn của dữ liệu.

Sử Dụng Các Công Cụ Hỗ Trợ

Sử dụng các công cụ như ESLint và Prettier để duy trì codebase sạch sẽ và nhất quán. TypeScript hỗ trợ tốt với các công cụ này và giúp phát hiện lỗi sớm.

Kết Luận

Kết hợp React với TypeScript mang lại nhiều lợi ích cho việc phát triển ứng dụng web hiện đại, từ việc kiểm tra kiểu dữ liệu tĩnh đến việc cải thiện tự động hoàn thành mã và gợi ý. Bằng cách áp dụng các hướng dẫn và thực tiễn tốt nhất được đề cập trong bài viết này, bạn có thể tạo ra các ứng dụng React mạnh mẽ, dễ bảo trì và ít lỗi hơn.

Tham Khảo

ReactJS

ReactJs component sử dụng TypeScript