1、全局安装ts
npm i -g typescript
2、创建tsconfig.json
tsc --init
修改tsconfig.json,开启jsx和allowJs配置,
3、安装开发环境依赖
npm install --save-dev typescript @types/react @types/react-dom ts-loader
4、修改webpack.config.js
...
module.exports = {
context: ...,
entry: ...,
output: ...,
// 添加resolve
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
loaders: [
// 增加新的loader
{
test: /\.tsx?$/,
loaders: ['babel-loader', 'ts-loader']
},
...
]
},
plugins: ...
};
ps: 关于.tsx文件
- 如果.ts文件中包含jsx,则需要将.ts文件改成.tsx文件
- 需要引用.tsx文件时,不用加扩展名,import xxx from ‘./xxx’;,而引用.jsx文件,是需要加扩展名的
- .tsx文件中,React和ReactDOM不支持default import,需要进行修改
// 原来
import React from 'react';
import ReactDOM from 'react-dom';
// 修改成
import * as React from 'react';
import * as ReactDOM from 'react-dom';
解决报错
1、VSCode工具报“Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning.”错误原因
(对装饰者的实验支持是未来发布中可能会发生变化的特征。设置“实验装饰器”选项以移除此警告。)
也就是在 tsconfig.json 中添加 “experimentalDecorators”: true,
"compilerOptions": {
"experimentalDecorators": true,
···
}
2、tsx文件 报 Uncaught ReferenceError: React is not defined
// 原来
import React from 'react';
import ReactDOM from 'react-dom';
// 修改成
import * as React from 'react';
import * as ReactDOM from 'react-dom';