React 和 TypeScript 入门

2019-02-21 08:00:00 · 飞浪

介绍本指南概述并介绍了使用各种方法使用TypeScript构建React应用程序。本指南假设您熟悉如何使用npm工具创建简单的TypeScript项目以及安装npm软件包。您还应该熟

介绍

本指南概述并介绍了使用各种方法使用 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

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

React 和 TypeScript 入门

杭州电子商务研究院

6年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

{ "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"] }

<!DOCTYPE html> <html> <head> <title>React and TypeScript</title> </head> <body> <div id="root"></div>  <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>  <script src="dist/bundle.js" type="text/javascript"></script> </body> </html>