1.create-react-app作为脚手架
如果利用create-react-app进行开发的话，那么使用create-react-app appName –typescript那么便可以初始化一个typescript+react的开发环境。
一般的，推荐在搭配tslint来规范代码格式，可以使用如下命令进行安装：
1
| yarn add tslint tslint-react tslint-config-prettier --dev
|
在安装好依赖之后，接下来进行配置tslint，在项目的根目录下面新建tslint.json文件。如果是vscode的话，那么安装下tslint扩展。tslint.json文件如下所示（视项目实际情况进行配置即可）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {
"extends": [
"tslint:recommended",
"tslint-react",
"tslint-config-prettier"
],
"rules": {
"no-console": true
},
"linterOptions": {
"exclude": [
"node_modules/**/*.js",
"config/**/*.js"
]
}
}
|
配置完后，可以测试一下tslint配置是否生效，在某个非exclude的js文件中console下，如果有报错标注则说明tslint配置生效了。
2.手动配置
接下来手动配置一个项目使其支持typescript以及react：
1.新建一个项目文件夹，使用npm init进行初始化，在项目根目录中新建一个src文件夹和dist文件夹。
2.添加基础依赖，yarn add typescript –dev，在项目根目录中增加tsconfig.json配置文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {
"compilerOptions": {
"target": "es5",
"module": "es6",
"moduleResolution": "node",
"lib": ["es6", "dom"],
"sourceMap": true,
"jsx": "react",
"strict": true,
"noImplicitReturns": true,
"rootDir": "src",
"outDir": "dist",
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
|
3.添加tslint作为代码格式检查工具: yarn add tslint –dev，在项目根目录中添加一个tslint.json配置文件，示例如下所示：
1
2
3
4
5
6
7
8
9
| {
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"rules": {
"ordered-imports": false
},
"linterOptions": {
"exclude": ["node_modules/**/*.ts"]
}
}
|
由于我们的tslint配置文件还用上了第三方依赖，所以安装它：
1
| yarn add tslint-react tslint-config-prettier --dev
|
4.添加react依赖以及对应的types依赖文件:
1
2
| yarn add react react-dom;
yarn add @types/react @types/react-dom --dev;
|
5.在项目根目录中的dist文件夹中添加index.html文件，内容如下所示：
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>手把手配置基础脚手架</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
|
在项目根目录中的src文件夹创建一个index.tsx文件，如下所示：
1
2
3
4
5
6
7
8
| import * as React from "react";
import * as ReactDOM from "react-dom"
const App: React.SFC = () => {
return <h1>learn</h1>
}
ReactDOM.render(<App />, document.getElementById("root") as HTMLElement);
|
6.使用webpack作为代码打包工具：首先安装依赖文件
1
2
3
| yarn add webpack webpack-cli --dev
yarn add webpack-dev-server --dev
yarn add ts-loader --dev
|
在项目根目录中配置webpack.config.js文件，实例如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| const path = require('path');
module.exports = {
entry: "./src/index.tsx",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
}
};
|
7.添加npm脚本，如下所示：
1
2
3
4
| "scripts": {
"start": "webpack-dev-server --env development",
"build": "webpack --env production"
}
|
8.接下来使用npm run start即可以看到运行效果。