介绍
React 不附带开箱即用的类型检查系统。在开发复杂或庞大的企业级应用程序时，您可能希望编写更好的代码，以便轻松进行单元测试、类型检查和调试。TypeScript 是 JavaScript 的编译超集，可以做到这一点。
在本指南中，您将快速了解如何将 TypeScript 与 React 结合使用，并学习如何在 React 组件内强制类型检查。
使用 TypeScript 类型检查创建组件
首先创建主要的App组件。
class App extends React.Component<{}, AppState> {
//...
}
在此示例中，您将从端点获取用户列表并将其显示在前端。要对用户实体进行类型检查，请在User.interface.tsx文件中创建一个名为User 的接口。
export default interface User {
id: number;
name: string;
avatar: string;
}
接下来，创建一个AppState接口来对App组件中的状态进行类型检查。
在tsconfig文件中添加“allowSyntheticDefaultImports”：true行以使用类似于常规 jsx 的导入语句。
import React from "react";
import UserInterface from "User.interface.tsx";
interface AppState {
users: UserInterface[];
}
class App extends React.Component<{}, AppState> {
constructor(props: any) {
super(props);
this.state = {
users: [],
};
}
render() {
// ...
}
}
要在网页上呈现单个用户，请创建一个用户组件。
import React, { Component } from "react";
import UserInterface from "../User.interface.tsx";
const User = ({ id, name, avatar }: UserInterface) => (
<div className="user-container" data-id={id}>
<img src={avatar} className="user-avatar" />
<span className="user-name">{name}</span>
</div>
);
export default User;
获取数据并分配状态
在componentDidMount生命周期方法中，使用浏览器的 Fetch API 从后端服务器获取用户列表。如下所示，将用户的实体 URL 传递给fetch方法，一旦 JSON 响应可供使用，就将用户设置为状态。
class App extends React.Component<{}, AppState> {
constructor(props: any) {
super(props);
this.state = {
users: [],
};
}
componentDidMount() {
const URL = `some-user-endpoint-for-fetching-users`; // in a real world example this would be a valid URL
fetch(URL)
.then((res) => res.json())
.then((data) =>
this.setState({
users: data.users,
})
);
}
render() {
// ...
}
}
使用 Map 迭代用户的状态
map方法可用于迭代数组。要利用类型检查，请使用 UserInterface对用户数组中的每个子项进行类型检查。
// ...
import User from "./components/User";
class App extends React.Component<{}, AppState> {
constructor(props: any) {
super(props);
this.state = {
users: [],
};
}
componentDidMount() {
const URL = `some-user-endpoint-for-fetching-users`;
fetch(URL)
.then((res) => res.json())
.then((data) =>
this.setState({
users: data.users,
})
);
}
render() {
return (
<div className="users">
{this.state.users.map((user: UserInterface) => (
<User {...user} />
))}
</div>
);
}
}
以下是分配道具的简写版本。
<User {...user} />
上述语法推断如下。
<User id={user.id} name={user.name} avatar={user.avatar} />
遍历组件的子项
遍历组件的子组件与任何其他数组相同。在这种情况下，也使用map方法。要对子组件进行类型检查，请使用React.ReactElement类型，以及子组件 props 的类型。在本例中，它是UserInterface。
import React from "react";
import UserInterface from "User.interface.tsx";
interface AppProps {
children: React.ReactElement<UserInterface>[];
}
class App extends React.Component<AppProps, {}> {
render() {
return this.props.children.map(
(child: React.ReactElement<UserInterface>) => (
<div>{child.props.name}</div>
)
);
}
}
结论
TypeScript 是一款出色的实用程序，可用于创建经过类型检查的代码库。这将有助于调试进一步的问题，并在应用程序开发生命周期中节省大量解决运行时错误的时间。要迭代数组，请使用 map 、 forEach 、 reduce 、 filter等方法；每种方法都有不同的用途。要从外部源获取数据，您也可以使用 Axios。
这就是本指南的全部内容。继续学习。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
