Giới thiệu về cách sử dụng TypeScript trong React

TypeScript - một tập hợp siêu JavaScript, chắc chắn có một số lợi ích đáng kinh ngạc - nhập tĩnh, các lớp, giao diện và intellisense nâng cao có thể đưa ra các đề xuất mạnh mẽ hơn để tự động hoàn thành và xử lý các lỗi tiềm ẩn trước khi biên dịch. Điều đó có nghĩa là trình soạn thảo mã của bạn sẽ không chỉ đưa ra các đề xuất thông minh hơn để tự động hoàn thành mà còn hiển thị cho bạn các lỗi ngay lúc đó, thay vì phải tìm ra thứ gì đó không hoạt động chính xác khi bạn chuyển sang trình duyệt của mình.

Có một số điều cần lưu ý khi bắt đầu với TypeScript trong React:

1. Bắt đầu với create-react-app và TypeScript:

Nếu bạn đang bắt đầu một dự án MỚI bằng cách sử dụng create-react-app:

npx create-react-app [your app's name] --template typescript

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

Bây giờ chúng tôi đang sử dụng TypeScript trong phản ứng, bạn sẽ sử dụng phần mở rộng tệp .tsx thay vì .js tiêu chuẩn cho JavaScript.

Những thứ khác bạn sẽ thấy là tsconfig.json có một số mặc định được đặt cho cấu hình TypeScript và react-app-env.d.ts, tham chiếu đến các loại cho Rea-scripts và trợ giúp những thứ như cho phép SVG hàng nhập khẩu.

3. Thành phần và Nhập khẩu:

Vì cách mọi thứ được nhập tĩnh trong TS, chúng ta cần phải thực hiện thêm một số việc khi thiết lập các thành phần của mình. Bạn sẽ cần nhập thêm một số thứ ở đầu mỗi thành phần (* hoặc bạn có thể sử dụng React. <> Trong đó <> là loại hoặc sự kiện mà bạn muốn nhập).

Một số thứ phổ biến mà tôi thấy mình đang nhập ngoài một số móc phản ứng thông thường như useState và useEffect, là ChangeEvent và FC (thành phần chức năng) - tính năng tự động hoàn thành với TS là NICE khi nhập mọi thứ!

import React, { useState, ChangeEvent, FC } from "react";

Điều cuối cùng chúng ta sẽ tập trung vào hôm nay là các định nghĩa kiểu đơn giản. Một trong những chức năng chính của TypeScript là kiến ​​thức được lập thành văn bản về những loại chúng tôi đang sử dụng và nơi thay đổi chúng, đồng thời tự động phát hiện sớm để ngăn chặn lỗi và lỗi.

Có một số cách để khai báo một kiểu. Một trong số đó là sử dụng giao diện:

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

Hãy lưu ý một số định nghĩa về loại:

1. 'Ứng dụng: FC' định nghĩa Ứng dụng của chúng tôi như một thành phần chức năng.
2. 'useState <string> ()' khai báo đoạn trạng thái đó dưới dạng một chuỗi. Bạn cũng có thể làm điều này bằng cách cung cấp cho useState một chuỗi trống: useState ('')
3. 'event: ChangeEvent <HTMLInputElement>' khai báo loại sự kiện nào được chấp nhận vào hàm onSearchInput.

Chúc mừng, tôi sẽ quay lại sớm với nhiều hơn nữa!