React项目 加入 TS

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';

关注我获取更多前端资源和经验分享

感谢大佬们阅读，希望大家头发浓密，睡眠良好，情绪稳定，早日实现财富自由~