摘要：面對越來越火的，我們公司今年也逐漸開始擁抱。綜上所述，我個人覺得是要刪除相關(guān)的東西，降低項目復(fù)雜度。但是有一個例外情況。這個配置項有三個值可選擇，分別是和。模式會生成，在使用前不需要再進行轉(zhuǎn)換操作了，輸出文件的擴展名為。

現(xiàn)在越來越多的項目放棄了javascript，而選擇擁抱了typescript，就比如我們熟知的ant-design就是其中之一。面對越來越火的typescript，我們公司今年也逐漸開始擁抱typescript。至于為什么要使用typescript？本文不做深入探討，對這方面有興趣的小伙伴們可以去看一下這篇文章：

TypeScript體系調(diào)研報告

這篇文章比較全面地介紹了TypeScript，并且和Javascript做了一個對比。看完上面這篇文章，你會對TypeScript有一個比較深入的認(rèn)識，另外在TypeScript和Javascript的取舍上，可以拿捏得更好。

在開始遷移之前，我要說點題外話，本篇文章僅是記錄我在遷移過程中遇到的問題以及我是如何解決的，并不會涉及typescript的教學(xué)。所以大家在閱讀本篇文章之前，一定要對typescript有一個基礎(chǔ)的認(rèn)識，不然你讀起來會非常費力。

由于Typescript是Javascript的超集，它的很多語法瀏覽器是不能識別的，因此它不能直接運行在瀏覽器上，需要將其編譯成JavaScript才能運行在瀏覽器上，這點跟ES6需要經(jīng)過babel編譯才能支持更多低版本的瀏覽器是一個道理。

首先我們得裝一個typescript，這就跟我們在用babel前需要先裝一個babel-core是一個道理。

yarn global add typescript 

yarn add typescript 

有些人會選擇將typescript安裝在全局環(huán)境上，但是我個人建議是裝在項目目錄下的，因為每個項目的typescript版本是不完全一樣的，裝在全局容易因為版本不同而出現(xiàn)問題。如果需要用tsc命令的話，可以借助npx去實現(xiàn)。接下來我們執(zhí)行如下命令生成tsconfig.json,這玩意就跟.babelrc是一個性質(zhì)的。

npx tsc --init

執(zhí)行完之后，你的項目根目錄下便會有一個tsconfig.json這么一個東西，但是里面會有很多注釋，我們先不用管他的。

安裝ts-loader用于處理ts和tsx文件，類似于babel-loader。

yarn add ts-loader -D

相應(yīng)的webpack需要加上ts的loader規(guī)則：

module.exports = {
    //省略部分代碼...
    module: {
        rules: [
            {
                test:/.tsx?$/,
                loader:"ts-loader"
            }
            //省略部分代碼...
        ]
    }
    //...省略部分代碼
}

之前用javascript的時候，可能有人不使用.jsx文件，整個項目都是用的.js文件，webapck里面甚至都不配.jsx的規(guī)則。但是在typescript項目中想要全部使用.ts文件這就行不通了，會報錯，所以當(dāng)用到了jsx的用法的時候，還是得乖乖用.tsx文件，因此這里我加入了.tsx的規(guī)則。

關(guān)于babel這塊，網(wǎng)上有不少人是選擇留著的，理由很簡單，說是為了防止以后會使用到JavaScript，但是我個人覺得是沒有必要留著babel。因為我們整個項目里面基本上只有使用第三方包的時候才會用到j(luò)avascript，而這些第三方包基本上都是已經(jīng)編譯成了es5的代碼了，不需要babel再去處理一下。而業(yè)務(wù)邏輯里面用javascript更是不太可能了，因為這便失去了使用typescript的意義。綜上所述，我個人覺得是要刪除babel相關(guān)的東西，降低項目復(fù)雜度。但是有一個例外情況：。

當(dāng)你用了某些babel插件,而這些插件的功能恰巧是typescript無法提供的，那你可以保留babel，并且與typescript結(jié)合。

整個src目下所有的.js結(jié)尾的文件都要修改文件名，使用到j(luò)sx語法的就改成.tsx文件，未使用的就改成.ts文件，這塊工作量比較大，會比較頭疼。另外改完之后文件肯定會有很多標(biāo)紅的地方，不要急著去改它，后面我們分類統(tǒng)一去改。

由于我們在做文件名調(diào)整的時候，把main.js改成main.tsx,因此webpack的入口文件要改成main.tsx。

module.exports = {
    //省略部分代碼...
    entry: {
        app: "./src/main.tsx"
    },
    //省略部分代碼...
}

這個解決很簡單，去tsconfig配置一下即可。

{
   "compilerOptions":{
        "jsx": "react"
   }
}

jsx這個配置項有三個值可選擇，分別是"preserve","react-native"和"react"。在preserve和react-native模式下生成代碼中會保留JSX以供后續(xù)的轉(zhuǎn)換操作使用（比如：Babel）。另外，preserve輸出文件會帶有.jsx擴展名，而react-native是.js拓展名。react模式會生成React.createElement，在使用前不需要再進行轉(zhuǎn)換操作了，輸出文件的擴展名為.js。

module.exports = {
    //省略部分代碼...
    resolve: {
        alias:{
          "@":path.join(__dirname,"../src")
        }
        //省略部分代碼...    
    },
    //省略部分代碼...   
}

這里需要我們額外在tsconfig.json配置一下。

{
    "compilerOptions":{
        "baseUrl": ".",
        "paths": {
          "@/*":["./src/*"]
        } 
    }
}

具體如何配置，請看typescript的文檔,我就不展開介紹了，但是要注意的是baseUrl和paths一定要配合使用。

https://www.tslang.cn/docs/ha...

原先我們在webpack里是這么配置的：

module.exports = {
    //省略部分代碼... 
    resolve: {
        //省略部分代碼... 
        extensions: [".js", ".jsx", ".json"]
    },
    //省略部分代碼... 
}

但是我們項目里所有.js和.jsx的文件都改成了.ts和.tsx文件，因此配置需要調(diào)整。

{
    //省略部分代碼... 
    resolve: {
        //省略部分代碼... 
        extensions: [".ts",".tsx",".js", ".jsx", ".json"]
    },
    //省略部分代碼... 
}

這個比較簡單，它提示找不到哪個模塊的聲明文件，你就裝個哪個模塊的就好了，安裝格式如下：

yarn add @types/**

舉個