使用TypeScript开发React应用(一)

本次分享如何使用React连接TypeScript开发应用。到最后，我们会得到一个如下的知识掌握

一个使用React和TypeScript的项目
使用TSLint进行linting
用Jest和Enzyme测试
使用Redux进行状态管理

我们将使用create-react-app工具快速初始化一个React项目。

我们假设您已经在使用npm的Node.js。您可能还想了解React的基础知识。这里就暂不做介绍了，前面的文章有对应的介绍，可以翻一番我前面的分享

安装create-react-app

我们将使用create-react-app，因为它为React项目设置了一些有用的工具和规范默认值。这只是一个命令行实用程序来构建新的React项目。

npm install -g create-react-app

初始化创建项目

我们将创建一个名为ts-react-app的新项目：

create-react-app ts-react-app --scripts-version=react-scripts-ts

react-scripts-ts是一组调整，用于采用标准的create-react-app项目管道并将TypeScript引入混合。

此时，您的项目布局应如下所示：

├── README.md
├── images.d.ts
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   └── registerServiceWorker.ts
├── tsconfig.json
├── tsconfig.prod.json
├── tsconfig.test.json
└── tslint.json

注意点

tsconfig.json包含我们项目的特定于TypeScript的选项。
- 我们还有一个tsconfig.prod.json和一个tsconfig.test.json，以防我们想要对我们的生产版本或我们的测试版本进行任何调整。
tslint.json存储我们的linter，TSLint将使用的设置。
package.json包含我们的依赖项，以及我们想要运行的命令的一些快捷方式，用于测试，预览和部署我们的应用程序。
public包含静态资产，例如我们计划部署到的HTML页面或图像。除index.html之外，您可以删除此文件夹中的任何文件。
src包含我们的TypeScript和CSS代码。 index.tsx是我们文件的入口点，是必需的。
images.d.ts将告诉TypeScript可以导入某些类型的图像文件，create-react-app支持这些文件。

设置源代码管理

我们的测试工具Jest期望存在某种形式的源代码控制（例如Git或Mercurial）。为了正确运行，我们需要初始化一个git存储库。

cd ts-react-app
git init
git add .
git commit -m "Initial commit."

重写默认值

react-scripts-ts设置的TSLint配置有点过于热心。让我们解决这个问题。

{
-  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "extends": [],
+  "defaultSeverity": "warning",
   "linterOptions": {
     "exclude": [
       "config/**/*.js",
       "node_modules/**/*.ts"
     ]
   }
 }

配置TSLint超出了此篇文章要分享的范围，但您可以随意尝试适合您的操作。

运行项目

运行项目就像运行一样简单

npm run start

这将运行我们的package.json中指定的启动脚本，并将在我们保存文件时生成重新加载页面的服务器。通常，服务器在http://localhost:3000运行，但应自动为您打开。这允许我们快速预览更改，从而收紧迭代循环。

测试项目

测试也只是一个命令：

npm run test

此命令针对扩展名以.test.ts或.spec.ts结尾的所有文件运行Jest，这是一个非常有用的测试实用程序。与npm run start命令一样，Jest会在检测到更改后立即自动运行。如果您愿意，可以并排运行npm run start和npm run test，以便您可以预览更改并同时测试它们。