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';关注我获取更多前端资源和经验分享
感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~
