前阵子在自己学习React，一直想在项目上试试React+TypeScript结合的模式。但是手头的一直都在使用VUE，现在终于有新项目来临，毫不犹豫的选择用TS+React来构建这个项目！
主要的依赖：
React16.12+
TypeScript3+
tslint5+
react-router5+
react-redux7+
axios0.19+
element-ui1.4+
SCSS4.13+
环境版本要求：
Node >= 8.10
npm >= 5.6
首先安装 React 框架和类型库，有两种方式：
方法1：
npx create-react-app my-app --typescript
方法2：
npx create-react-app my-app --scripts-version=react-scripts-ts
注意：npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。
Create React App它会自动配置React的开发环境，my-app 是你要创建项目的名称。
--scripts-version=react-scripts-ts是react官方脚手架不支持创建ts项目的时候，社区弄出来的一个解决方案。
--typescript是现在官方脚手架支持的，可以理解成官方支持版本就对了，这两个对我们用户来说是没有什么能感知的区别，但一般还是建议尽量使用官方版本。
经过一段时间的等待，React已经成功安装完成。
cd my-app
npm start
即可运行预览！
当前的项目是可以运行，但是呢，对照一下我们上面的规划，还差一些插件。那接下就一步步给安装上。
首先是tslint
npm i tslint
如果遇到npm一直卡住不会动的情况，可以将npm映射改为淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
映射过程中如果遇到Windows_NT 10.0.14393报错，可能是npm被设置代理了。顺序执行一下清除代理设置:
npm config set proxy null（npm config delete proxy）
npm config set https-proxy null
npm config set strict-ssl false
映射成功后，命令行执行
cnpm i tslint
飞快的就安装完成了。
安装完成后输入
tslint -i
运行结束之后，你会发现项目根目录下多了一个 tslint.json 文件，这个就是TSLint的配置文件了，它会根据这个
文件对我们的代码进行检查，生成的tslint.json文件有下面几个字段：
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}
以上就是我们初始化的时候TSLint生成的tslint.json文件初始字段，如果你发现你生成的文件和这里看到的不一样。
可能是TSLint版本升级导致的，你可以参照TSLint配置说明了解他们的用途。
defaultSeverity是提醒级别，如果为error则会报错，如果为warning则会警告，如果设为off则关闭，那TSLint就关闭了。
extends可指定继承指定的预设配置规则。
rulesDirectory可以指定规则配置文件，这里指定相对路径。
jsRules用来配置对 .js 和 .jsx 文件的校验，配置规则的方法和下面的rules一样；
rules是重点了，我们要让TSLint根据怎样的规则来检查代码，都是在这个里面配置 ，我的项目需要配置几个重点配置。
"no-trailing-whitespace": false,//尾部空格检测
这个一定要选择false，要不然每行代码后面都不能有空格，包括换行以后产生的空格。
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],//行内检测
这个里面可以自行配置自身需要的，比如check-whitespace这项就会要求函数名，参数表和函数段开头的大括号之间要有空格。当然也可以设置为false，将这个功能完全禁用。
"no-console": false, //关闭不允许打印
"no-debugger": false,//关闭不允许debugger
这两项都是打开后不便于调试。
"comment-format": [
true,
"check-space"
],//注释行中的空格
如果check-space这一项存在，那么注释行的开头必须要加上一个空格。这个对于使用英文注释的人来说，没有多大影响，但是中文话就没有必要。注释毕竟是区别于代码段的，要使用如何的书写格式应当自己来决定。去掉这一项，或者将整个commet-format的值改为false，就可以将其禁用。
"ordered-imports": false,//关闭import名称排序
打开的话会要求import名称按照字母从小到大排序，对于强迫症是福音。但可惜我没有强迫症。。
我们暂时需要的规则已经配置完，还有其他需要在开发过程中不断的补充。如果你想要查看某条规则的配置及详情，可以参照TSLint规则说明。
下面继续安装
axios：
npm i axios
redux：
npm i redux
npm i redux-devtools
SCSS：
npm i sass-loader node-sass --save-dev
element：
npm i element-react
npm i element-theme-default
使用npm安装element-react容易出现卡在那里不会动，建议使用cnpm安装。
React首次运行element，常会出现 Can't resolve 'react-hot-loader'错误，这种情况请安装react-hot-loader最新版本
npm install react-hot-loader@next
PS：这里可能会有疑问，为什么不安装webpack呢？因为Create React App手脚架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。
但是对于一些熟悉 webpack 的开发者来说，他们可能想对 webpack 配置做一些修改，这个时候应该怎么办呢？
其实可以通过 项目 eject的方式来修改 webpack 的配置。
使用Create React App创建完项目以后，项目在package.json里面提供了这样一个命令：
{
...
"scripts": {
"eject": "react-scripts eject"
},
...
}
npm run eject执行这条命令后会将封装在Create React App项目中的配置全部反编译到当前项目，这样用户就可以完全取得 webpack 文件的控制权，想怎么修改就怎么修改了。
# eject 后项目根目录下会出现 config 文件夹，里面就包含了 webpack 配置
config
├── env.js
├── jest
│ ├── cssTransform.js
│ └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js // 开发环境配置
├── webpack.config.prod.js // 生产环境配置
└── webpackDevServer.config.js
Create React App与其他脚手架不同的另一个地方，就是可以通过升级其中的react-scripts包来升级 CRA 的特性。比如用老版本 Create React App创建了一个项目，这个项目不具备 PWA 功能，但只要项目升级了react-scripts包的版本就可以具备PWA的功能，项目本身的代码不需要做任何修改。
但如果使用了eject命令，就再也享受不到 Create React App升级带来的好处了，因为react-scripts已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。
项目到这里基本的功能已经具备了，接下来还需要一些单独的配以及封装调用，放到下一篇文章里写吧。