Sử dụng Create React App v2 và TypeScript
Create React App v2 đã giới thiệu hỗ trợ TypeScript chính thức, cho phép user JavaScript sử dụng TypeScript với React front-end framework. TypeScript là một công cụ mạnh mẽ giúp viết mã an toàn hơn, tự tài liệu hóa, cho phép các nhà phát triển bắt lỗi nhanh hơn.Đối với bài viết này, bạn sẽ đi qua các bước tạo ứng dụng React với TypeScript bằng Create React App.
Khởi động một TypeScript Tạo ứng dụng React
Đầu tiên, hãy sử dụng create-react-app --typescript create-react-app với cờ --typescript .
- npx create-react-app my-typescript-app --typescript
Hãy xem những gói nào mà cờ --typescript mang lại cho ta và nó tạo ra những thay đổi gì.
Các bổ sung TypeScript
Cờ --typescript sẽ thêm gói TypeScript chính.
Ta cũng nhận được thông báo này: We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.
tsconfig.json là cách ta cấu hình các dự án TypeScript, tương tự như cách package.json dành cho các dự án JS.
tsconfig.json mặc định sẽ trông giống như sau:
{ "compilerOptions": { "target": "es5", "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve" }, "include": ["src"] } Kiểm tra file App.tsx
Hãy chuyển sang file Ứng dụng chính thường là thành phần React chính của ta :
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.tsx</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } } export default App; Như bạn sẽ thấy, điều này thực sự giống với JavaScript App.js Ta có cơ sở giống như các dự án JavaScript của bạn , nhưng ta có thể rắc TypeScript lên trên.
Tiếp theo, hãy tạo một thành phần TypeScript và xem ta có thể đạt được những lợi ích gì.
Tạo một thành phần TypeScript
Ta sẽ bắt đầu bằng cách tạo một thành phần chức năng bình thường trong cùng một file App.tsx :
function MyMessage({ message }) { return <div>i shall speak! my message is: {message}</div>; } Đây là một thành phần đơn giản, nơi ta lấy message ra khỏi props . Bây giờ ta hãy thêm một số TypeScript để cho hàm này biết rằng tham số thông message của nó phải là một string .
Nếu bạn đã quen thuộc với TypeScript, bạn có thể nghĩ rằng bạn muốn thêm phần sau vào message: message: string . Những gì ta phải làm trong tình huống này là xác định các loại cho tất cả các props như một đối tượng. Có một số cách ta có thể làm điều này:
Các loại nội tuyến:
function MyMessage({ message }: { message: string }) { return <div>i shall speak! my message is: {message}</div>; } Đối tượng đạo cụ:
function MyMessage(props: { message: string }) { return <div>i shall speak! my message is: {props.message}</div>; } Đối tượng loại riêng biệt:
interface MyMessageProps { message: string; } function MyMessage({ message }: MyMessageProps) { return <div>i shall speak! my message is: {props.message}</div>; } Có nhiều cách để sử dụng TypeScript trong các dự án của ta . Bạn có thể tạo interface và di chuyển interface đó vào một file riêng biệt để các loại của bạn có thể sống ở nơi khác. Điều này có vẻ giống như rất nhiều bài viết, vì vậy hãy xem những gì ta thu được từ việc viết nhiều hơn một chút.
Ta đã nói với thành phần này nó chỉ chấp nhận một string làm tham số thông message . Bây giờ hãy thử sử dụng nó bên trong thành phần App của ta .
Sử dụng các thành phần TypeScript
Hãy sử dụng thành phần MyMessage này.
Khi ta sử dụng thành phần này, ta có thể thấy VS Code hiển thị chữ ký của thành phần ngay khi ta nhập. Ta không cần phải quay lại thành phần (đặc biệt nếu nó nằm trong một file khác) để xem đầu vào của nó nên là gì.
Đó không phải là cách dễ đọc nhất, vì vậy hãy bắt đầu sử dụng từng chỗ dựa riêng lẻ.
Xem các loại đề xuất
Ngay sau khi ta bắt đầu nhập message , ta có thể thấy chỗ dựa đó phải là gì:
Thấy lỗi loại
Nếu ta thêm một số dưới dạng thông báo, TypeScript sẽ báo lỗi và giúp ta bắt những lỗi đánh máy này.
React thậm chí sẽ không biên dịch nếu có lỗi kiểu như sau:
Kết luận
Điều này chỉ làm xước bề mặt của những gì TypeScript cung cấp cho ta . Bạn có thể tạo các loại cho tất cả các thành phần và đạo cụ của bạn và với VS Code, bạn có thể đọc chúng. Bạn cũng sẽ bắt lỗi nhanh hơn vì TypeScript thậm chí sẽ không cho phép dự án biên dịch với lỗi loại.
Các tin liên quan
