Cách sử dụng TypeScript trong các ứng dụng React
JavaScript là một ngôn ngữ lập trình được đánh máy yếu. Bởi vì điều này, nó rất khoan dung và các lỗi lập trình có thể không được chú ý trong quá trình phát triển. TypeScript, một thư viện kiểm tra kiểu JavaScript, giải quyết vấn đề này bằng cách thực thi các kiểu trên giá trị. Bài viết này sẽ hướng dẫn bạn cách tạo một dự án React với TypeScript.
Mục Lục
Tạo một dự án React với TypeScript
Lệnh create-react-app cho phép bạn tạo các dự án Typecript bằng cách sử dụng –mẫu quyền mua.
Để tạo một dự án React mới với TypeScript, hãy chạy lệnh sau:
npx create-react-app app-name
Lệnh này tạo một dự án React và TypeScript mới từ đầu. Bạn cũng có thể thêm TypeScript vào một ứng dụng React hiện có.
Để làm như vậy, hãy điều hướng đến dự án mà bạn muốn thêm TypeScript và chạy mã sau:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Sau đó, hoán đổi phần mở rộng tệp .js với .tsx cho các tệp bạn muốn chuyển đổi sang TypeScript. Khi bạn làm điều này, bạn sẽ nhận được “React đề cập đến một toàn cầu UMD, nhưng tệp hiện tại là một mô-đun. ” lỗi. Bạn có thể giải quyết vấn đề này bằng cách nhập React vào mọi tệp typecript như sau:
import React from "react"
Là một giải pháp đơn giản hơn, hãy tạo tsconfig.json và đặt jsx thành react-jsx.
{
"compilerOptions": {
"jsx": "react-jsx",
"target": "es6",
"module": "esnext",
},
}
Bạn có thể tìm thấy tất cả các cài đặt cấu hình từ tài liệu TypeScript.
Tạo một thành phần hàm phản ứng trong TypeScript
Bạn xác định một thành phần hàm React theo cách giống như một hàm JavaScript.
Dưới đây là một ví dụ về một thành phần chức năng được gọi là Lời chào.
export default function Greetings() {
return (
<div>Hello world</div>
)
}
Thành phần này trả về một chuỗi “Hello world” và TypeScript suy ra kiểu trả về của nó. Tuy nhiên, bạn có thể chú thích kiểu trả về của nó:
export default function Greetings(): JSX.Element {
return (
<div>Hello world</div>
)
}
TypeScript sẽ xuất hiện một lỗi nếu thành phần Greetings trả về một giá trị không phải là JSX.element.
Sử dụng React Props với TypeScript
React cho phép bạn tạo các thành phần có thể tái sử dụng thông qua các đạo cụ. Ví dụ: thành phần Greetings có thể nhận được một tên hỗ trợ để giá trị trả về được tùy chỉnh dựa trên nó.
Dưới đây là thành phần đã chỉnh sửa với tên như một chỗ dựa. Lưu ý khai báo kiểu nội tuyến.
function Greetings({name}: {name: string}) {
return (
<div>Hello {name}</div>
)
}
Nếu bạn chuyển tên “Jane”, thành phần sẽ trả về thông báo “Xin chào Jane”.
Thay vì viết khai báo kiểu trong hàm, bạn có thể định nghĩa nó bên ngoài như sau:
type GreetingsProps = {
name: string;
};
Sau đó, chuyển kiểu đã xác định cho thành phần như sau:
function Greetings({name}: GreetingsProps) {
return (
<div>Hello {name}</div>
)
}
Sử dụng từ khóa giao diện nếu bạn đang xuất loại này và muốn mở rộng nó:
export interface GreetingsProps {
name: string;
};
Lưu ý sự khác biệt cú pháp giữa loại và giao diện – giao diện không có dấu bằng.
Bạn có thể mở rộng giao diện bằng mã sau:
import { GreetingsProps } from './Greetings'
interface WelcomeProps extends GreetingsProps {
time: "string"
}
Sau đó, bạn có thể sử dụng giao diện mở rộng trong một thành phần khác.
function Welcome({name, time}: WelcomeProps) {
return (
<div>
Good {time}, {name}!
</div>
)
}
Sử dụng “?” biểu tượng với giao diện đạo cụ của bạn để xác định đạo cụ tùy chọn. Dưới đây là một ví dụ về giao diện có tên hỗ trợ tùy chọn.
interface GreetingsProps {
name?: string;
};
Nếu bạn không chuyển một chỗ dựa tên, TypeScript sẽ không gây ra bất kỳ lỗi nào.
Sử dụng trạng thái React với TypeScript
Trong JavaScript thuần túy, bạn xác định hook useState () như sau:
const [customerName, setCustomerName] = useState("");
Trong ví dụ này, TypeScript có thể dễ dàng suy ra kiểu của firstName là một chuỗi vì giá trị mặc định là một chuỗi.
Tuy nhiên, đôi khi bạn không thể khởi tạo trạng thái thành một giá trị xác định. Trong những trường hợp này, bạn phải cung cấp một kiểu giá trị trạng thái.
Dưới đây là một số ví dụ về cách xác định các kiểu trong hook useState ().
const [customerName, setCustomerName] = useState<string>("");
const [age, setAge] = useState<number>(0);
const [isSubscribed, setIsSubscribed] = useState<boolean>(false);
Bạn cũng có thể sử dụng một giao diện trong hook useState (). Ví dụ, bạn có thể viết lại ví dụ trên để sử dụng một giao diện hiển thị bên dưới.
interface ICustomer {
customerName: string ;
age: number ;
isSubscribed: boolean ;
}
Sử dụng giao diện tùy chỉnh trong hook như sau:
const [customer, setCustomer] = useState<ICustomer>({
customerName: "Jane",
age: 10,
isSubscribed: false
});
Sử dụng sự kiện với TypeScript
Sự kiện rất cần thiết vì chúng cho phép người dùng tương tác với một trang web. Trong TypeScript, bạn có thể nhập sự kiện hoặc trình xử lý sự kiện.
Để chứng minh, hãy xem xét thành phần Đăng nhập sau bằng cách sử dụng các sự kiện onClick () và onChange ().
import { useState } from 'react';
export default function Login() {
const [email, setEmail] = useState('');const handleChange = (event) => {
setEmail(event.target.value);
};
const handleClick = (event) => {
console.log('Submitted!');
};
return (
<div>
<input type="email" value={email} onChange={handleChange} />
<button onClick={() => handleClick}>Submit</button>
</div>
);
}
Đây là cách bạn xử lý các sự kiện trong JavaScript thuần túy. Tuy nhiên, TypeScript yêu cầu bạn xác định kiểu tham số sự kiện trong các hàm xử lý sự kiện. May mắn thay, React cung cấp một số loại sự kiện.
Ví dụ: sử dụng kiểu changeEvent cho trình xử lý sự kiện handleChange ().
import { ChangeEvent, useState } from 'react';
const handleChange = (event:ChangeEvent<HTMLInputElement>) => {
setEmail(event.target.value);
};
Kiểu changeEvent được sử dụng để thay đổi giá trị của các phần tử input, select và textarea. Đây là kiểu chung có nghĩa là bạn phải chuyển vào phần tử DOM có giá trị thay đổi. Trong ví dụ này, bạn đã chuyển phần tử đầu vào.
Ví dụ trên minh họa cách nhập sự kiện. Đoạn mã dưới đây cho biết cách bạn có thể nhập trình xử lý sự kiện.
import { ChangeEventHandler, useState } from 'react';const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
setEmail(event.target.value);
};
Đối với sự kiện handleClick (), hãy sử dụng MouseEvent ().
import { useState, MouseEvent } from 'react';
const handleClick = (event: MouseEvent) => {
console.log('Submitted!');
};
Một lần nữa, bạn có thể đính kèm loại vào chính trình xử lý sự kiện.
import { useState, MouseEventHandler } from 'react';
const handleClick: MouseEventHandler = (event) => {
console.log('Submitted!');
};
Đối với các loại sự kiện khác, hãy xem bảng gian lận React TypeScript.
Nếu bạn đang tạo các biểu mẫu lớn, tốt hơn nên sử dụng thư viện biểu mẫu như Formik, vì nó được xây dựng bằng TypeScript.
Tại sao bạn nên sử dụng TypeScript?
Bạn có thể hướng dẫn một dự án React mới sử dụng TypeScript hoặc chuyển đổi một dự án hiện có. Bạn cũng có thể sử dụng TypeScript với các thành phần chức năng React, trạng thái và các sự kiện React.
Việc gõ các thành phần React đôi khi có thể cảm thấy giống như viết mã soạn sẵn không cần thiết. Tuy nhiên, càng sử dụng nhiều, bạn sẽ càng đánh giá cao khả năng bắt lỗi của nó trước khi bạn triển khai mã của mình.