React 和 TypeScript 入门
介绍
本指南概述并介绍了使用各种方法使用 TypeScript 构建 React 应用程序。
本指南假设您熟悉如何使用npm工具创建简单的 TypeScript 项目以及安装 npm 软件包。您还应该熟悉 React 开发和支持生态系统，因为它们将在本指南中引用。
例如，要为每个示例创建一个新文件夹，您可以安装 Node.js并运行以下命令：
# ensure node is installed
node -v
npm -v
# create a new folder
mkdir my-typescript-app
# change directory
cd my-typescript-app
# initialize an empty package.json file
npm init
npm init命令创建一个新的package.json文件来存储通过 npm 安装的项目依赖项。
本指南中使用的另一个常用命令是npx命令，它是执行 npm 包的简便方法，无需在每个项目中安装它。
开始使用 Create React App (CRA)
开始使用 TypeScript 和 React 的最快方法是使用 Facebook 自己的Create React App (CRA) 网站生成器。这将生成一个功能齐全的 React 应用，其中内置了许多常用功能，例如 Babel、Webpack、Jest 和热重载开发服务器。
首先，使用create-react-app npm 包生成一个新的 TypeScript 项目my-typescript-app：
# Generate a new React Typescript project
npx create-react-app my-typescript-app --typescript
# wait for installation to be done!
cd my-typescript-app
这将创建一个新文件夹my-typescript-app，它将是你的新项目。npm 安装所需的依赖项可能需要几分钟时间。
现在，你可以通过简单地将.js/.jsx文件重命名为.ts/.tsx来开始使用开箱即用的 TypeScript ：
# Rename js to ts
mv src/index.js src/index.ts
# Start development server and watch for changes
npm start
当您修改项目文件时，应用程序将进行热重载，立即反映新的更改。有关如何在现有 React 项目中添加 TypeScript 的信息，请参阅 CRA添加 TypeScript指南。
类型检查测试
目前尚未解决的一个问题是确保您的测试经过类型检查。CRA 将运行基于 TypeScript 的测试，但不会显示任何 TypeScript 编译器错误，从而导致您的开发编辑器与 CRA 测试任务的输出不匹配。这也意味着测试中的 TypeScript 错误不会破坏持续集成构建。
为了确保测试类型检查，您可以添加额外的 npm 脚本：
{
"scripts": {
"test:tsc": "tsc -p tsconfig.test.json -w"
}
}
这将直接在“监视”模式下运行 TypeScript 编译器。-p参数引用您将在项目根目录中创建的新配置tsconfig.test.json ：
{
"extends": "./tsconfig.json",
"include": [
"src/**/*.ts",
"src/**/*.test.ts",
"src/**/*.test.tsx",
],
}
我们正在扩展默认的tsconfig.json并明确包含 CRA 构建项目时默认排除的测试文件。
现在您可以在测试时运行这个新的 npm 脚本：
npm run test:tsc
如果您的终端或命令提示符支持拆分输出，则可以更轻松地执行两个命令。
在您的测试中添加类型检查支持可完成为 CRA 设置的 TypeScript，并允许使用功能齐全的 TypeScript 体验来开发 React 应用程序。
从头开始
虽然 CRA 提供了使用常见 React 工具来使用 React 和 TypeScript 的开箱即用体验，但有时还是需要从头开始。如果 CRA 可以被视为“一体化”工具箱，那么您可以认为这种方法就像从锤子和钉子开始，简单但有效。本指南中的其他方法在此基础上通过添加从头开始提供的额外工具、抽象和细节来构建。
要创建支持 React 的新 TypeScript 项目，首先通过npm安装所有必需的依赖项：
npm install react react-dom typescript @types/react @types/react-dom --save
安装软件包后，您需要配置一个新的 TypeScript tsconfig.json文件，以专门支持 JSX 和 React：
{
"compilerOptions": {
// No module system, concatenated file
"module": "none",
// Set React as the JSX factory
"jsx": "react",
// Resolve modules using Node-resolution algorithm
"moduleResolution": "node",
// Target ES6 for more modern browsers
"target": "es6",
// Include typings from built-in lib declarations
"lib": ["es2015", "dom", "dom.iterable"],
// Include module source maps for debugging
"sourceMap": true,
// Output to single concatenated file
"outFile": "dist/bundle.js"
},
"include": ["src"]
}
这将设置一个基本的项目配置来支持 React 和 React DOM。src 中的任何 TS 或 TSX 文件都将被编译。
这里需要强调的是，它不使用模块系统或模块加载器。这会将文件的输出连接成一个，因此不支持导入或导出语法。相反，您必须使用三斜杠指令来引用其他 TypeScript 文件，并且必须在 HTML 页面中包含全局依赖项。
添加新的src/index.tsx文件：
/// <reference path="App.tsx" />
ReactDOM.render(<App />, document.getElementById("root"));
这将使用src/App.tsx中的<App />组件设置我们的 React 应用程序的渲染：
const App = () => <div>Hello React App from scratch</div>;
我们现在可以添加一些新的npm脚本来构建和监视package.json文件中的 TypeScript ：
{
"scripts": {
"build": "tsc -p .",
"watch": "tsc -p . -w"
}
}
运行以下命令来构建您的应用程序：
npm run build
这将生成包含连接代码的dist/bundle.js文件。
要查看我们的应用程序，我们需要在项目根目录中创建一个index.html文件，并引用 React 和 React DOM 作为浏览器包，然后引用我们编译的包：
<!DOCTYPE html>
<html>
<head>
<title>React and TypeScript</title>
</head>
<body>
<div id="root"></div>
<!-- Dependencies -->
<script src="https://unpkg.com/react@16.8.2/umd/react.development.js" type="text/javascript"></script>
<script src="https://unpkg.com/react-dom@16.8.2/umd/react-dom.development.js" type="text/javascript"></script>
<!-- Compiled TypeScript -->
<script src="dist/bundle.js" type="text/javascript"></script>
</body>
</html>
我们创建React 将在其中呈现的根元素，并添加对已编译包和其他 CDN 包资源的<script>引用。
您现在可以使用serve npm 包预览该应用程序：
npx serve
导航到终端中显示的 URL 以查看基本应用程序。
使用三斜杠引用适用于小型 TypeScript 项目，但通常对于 Web 应用程序，需要捆绑各种资产，如 CSS、图像和第三方包。这时您可能需要引入模块捆绑器和优化工具。
使用 Webpack 进行打包
Webpack是一款流行的模块打包和优化器。它可以加载多种不同类型的代码，了解它们的依赖关系，并一次性创建引用所有内容的包。
在我们从头创建的同一项目中，添加 webpack 和一个特殊的 TypeScript 模块加载器：ts-loader。
npm install webpack-cli webpack ts-loader --save-dev
此示例将使用ts-loader的简单用法，但<font style="vertical
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~