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

關注我獲取更多前端資源和經驗分享

感謝大佬們閱讀，希望大家頭髮濃密，睡眠良好，情緒穩定，早日實現財富自由~