TypeScript with React Crash Course

https://medium.com/@richardprasad42/typescript-with-react-crash-course-7a81013a8f64

A First Look at TypeScript

Hãy mở App.tsx, nằm trong thư mục src. Xem qua phần khai báo cho thành phần Ứng dụng, chúng ta thấy có một số văn bản bổ sung được đính kèm vào thành phần:

import React from 'react';
const App: React.FC = (): JSX.Element => {
  return (
    <div className="App">
      Hi
    </div>
  );
}
export default App;

Đây là một loại chú thích. Chú thích nhập xác định loại của bất kỳ biến nhất định nào, với dấu hai chấm ở giữa. Các kiểu cơ bản nhất mà chúng ta nên làm quen ngay là string, number, boolean, undefined, null, void và any. Chúng ta sẽ xem các ví dụ về từng cái này trong suốt hướng dẫn này.

Dòng trên nói rằng Ứng dụng là một hàm mũi tên có kiểu là FC. FC là gì? Nó là viết tắt của “thành phần chức năng” và được định nghĩa bên trong gói React. Bạn cũng sẽ thấy SFC trong mã cũ hơn, viết tắt của “thành phần chức năng không trạng thái”. Với khả năng thêm trạng thái vào bất kỳ thành phần chức năng nào bằng hook useState, không còn hợp lý khi coi tất cả các thành phần chức năng là không trạng thái, do đó, tại sao bây giờ chúng ta có FC. May mắn thay, SFC đồng nghĩa với FC, vì vậy chúng ta có thể sử dụng chúng thay thế cho nhau.

Các hàm cũng có thể trả về mọi thứ và Ứng dụng cũng không ngoại lệ. Ứng dụng trả lại gì? JSX. Hãy đánh dấu rõ ràng hàm này là JSX trả về. Để làm như vậy, chúng ta sẽ thêm dấu hai chấm sau danh sách đối số (hiện đang trống), theo sau là chú thích kiểu. Bước này hoàn toàn không bắt buộc vì TS có thể suy ra kiểu trả về trong nhiều trường hợp, nhưng tốt hơn là bạn nên viết nó một cách rõ ràng ngay bây giờ để giữ ý tưởng về mọi thứ có kiểu hoạt động trong tâm trí của bạn.

Bạn có thể tự hỏi mình, "Làm cách nào để biết loại chú thích nào sẽ sử dụng?" Đó là điều bạn sẽ học được theo thời gian khi bạn nghiên cứu và viết mã. Nhưng đừng lo, React không có quá nhiều kiểu độc đáo và bạn sẽ học chúng ngay lập tức.

Props

Hãy thêm một số đạo cụ vào thành phần của chúng ta. Sửa đổi App.tsx như sau (dự án sẽ không biên dịch được, chúng tôi sẽ khắc phục điều đó trong giây lát):