Sử dụng TypeScript với React
TypeScript thật tuyệt vời. React cũng vậy. Hãy sử dụng cả hai cùng nhau! Sử dụng TypeScript cho phép ta nhận được những lợi ích của IntelliSense, cũng như khả năng suy luận thêm về mã của ta . Ngoài ra, việc sử dụng TypeScript là ít ma sát, vì các file có thể được nâng cấp dần dần mà không gây ra sự cố trong suốt phần còn lại của dự án của bạn.
Hãy bắt đầu bằng cách tạo một dự án React mới và tích hợp TypeScript. Chạy các lệnh sau để bắt đầu dự án:
# Make a new directory
$ mkdir react-typescript
# Change to this directory within the terminal
$ cd react-typescript
# Initialise a new npm project with defaults
$ npm init -y
# Install React dependencies
$ npm install react react-dom
# Make index.html and App.tsx in src folder
$ mkdir src
$ cd src
$ touch index.html
$ touch App.tsx
# Open the directory in your favorite editor
$ code .
Sau đó, ta có thể tạo index.html với như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>React + TypeScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="main"></div>
<script src="./App.tsx"></script>
</body>
</html>
Ta sẽ sử dụng Parcel làm trình gói của bạn , nhưng bạn có thể chọn sử dụng webpack hoặc một trình gói khác nếu muốn. Hoặc, kiểm tra phần này nếu bạn muốn sử dụng Tạo ứng dụng React. Hãy thêm Parcel vào dự án của ta :
# Install Parcel to our DevDependencies
$ npm i parcel-bundler -D
# Install TypeScript
$ npm i typescript -D
# Install types for React and ReactDOM
$ npm i -D @types/react @types/react-dom
Ta có thể cập nhật package.json với một nhiệm vụ mới sẽ khởi động server phát triển của ta :
{
"name": "react-typescript",
"version": "1.0.0",
"description": "An example of how to use React and TypeScript with Parcel",
"scripts": {
"dev": "parcel src/index.html"
},
"keywords": [],
"author": "Paul Halliday",
"license": "MIT"
}
Bây giờ ta có thể điền file Counter.tsx bằng một bộ đếm đơn giản:
import * as React from 'react';
export default class Counter extends React.Component {
state = {
count: 0
};
increment = () => {
this.setState({
count: (this.state.count + 1)
});
};
decrement = () => {
this.setState({
count: (this.state.count - 1)
});
};
render () {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
}
Sau đó, bên trong App.tsx , ta có thể tải Bộ đếm:
import * as React from 'react';
import { render } from 'react-dom';
import Counter from './Counter';
render(<Counter />, document.getElementById('main'));
Dự án của ta có thể được chạy với $ npm run dev và được truy cập tại http://localhost:1234 .
Tạo ứng dụng React và TypeScript
Nếu bạn muốn sử dụng Tạo Phản ứng App để bắt đầu dự án của bạn, bạn sẽ được hài lòng khi biết rằng CRA bây giờ hỗ trợ đánh máy ra khỏi hộp .
Chỉ cần sử dụng cờ --typescript khi gọi lệnh create-react-app --typescript create-react-app :
$ create-react-app my-new-app --typescript
Các thành phần chức năng
Các thành phần không trạng thái hoặc chức năng có thể được định nghĩa trong TypeScript như sau:
import * as React from 'react';
const Count: React.FunctionComponent<{
count: number;
}> = (props) => {
return <h1>{props.count}</h1>;
};
export default Count;
Ta đang sử dụng React.FunctionComponent và xác định cấu trúc đối tượng của các đạo cụ dự kiến của ta . Trong trường hợp này, ta hy vọng sẽ được thông qua trong một count hỗ trợ duy nhất có tên và ta đang xác định nó trong dòng. Ta cũng có thể xác định điều này theo những cách khác, bằng cách tạo một giao diện như Props :
interface Props {
count: number;
}
const Count: React.FunctionComponent<Props> = (props) => {
return <h1>{props.count}</h1>;
};
Các thành phần lớp
Các thành phần lớp có thể được định nghĩa tương tự trong TypeScript như sau:
import * as React from 'react';
import Count from './Count';
interface Props {}
interface State {
count: number;
};
export default class Counter extends React.Component<Props, State> {
state: State = {
count: 0
};
increment = () => {
this.setState({
count: (this.state.count + 1)
});
};
decrement = () => {
this.setState({
count: (this.state.count - 1)
});
};
render () {
return (
<div>
<Count count={this.state.count} />
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
}
Đạo cụ mặc định
Ta cũng có thể xác định các defaultProps trong các tình huống mà ta có thể cần đặt các props mặc định. Ta có thể cập nhật ví dụ Count của bạn để hiển thị điều này:
import * as React from 'react';
interface Props {
count?: number;
}
export default class Count extends React.Component<Props> {
static defaultProps: Props = {
count: 10
};
render () {
return <h1>{this.props.count}</h1>;
}
}
Ta cũng cần dừng chuyển this.state.count vào thành phần Counter , vì điều này sẽ overrides lên phần hỗ trợ mặc định của ta :
render () {
return (
<div>
<Count />
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
)
}
Đến đây bạn sẽ có một dự án được cài đặt để sử dụng TypeScript và React, cũng như các công cụ để tạo các thành phần dựa trên chức năng và lớp của bạn !
Các tin liên quan
