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

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

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

這篇文章比較全面地介紹了TypeScript，并且和Javascript做了一個(gè)對(duì)比?？赐晟厦孢@篇文章，你會(huì)對(duì)TypeScript有一個(gè)比較深入的認(rèn)識(shí)，另外在TypeScript和Javascript的取舍上，可以拿捏得更好。

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

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

首先我們得裝一個(gè)typescript，這就跟我們?cè)谟胋abel前需要先裝一個(gè)babel-core是一個(gè)道理。

yarn global add typescript 

yarn add typescript 

有些人會(huì)選擇將typescript安裝在全局環(huán)境上，但是我個(gè)人建議是裝在項(xiàng)目目錄下的，因?yàn)槊總€(gè)項(xiàng)目的typescript版本是不完全一樣的，裝在全局容易因?yàn)榘姹静煌霈F(xiàn)問題。如果需要用tsc命令的話，可以借助npx去實(shí)現(xiàn)。接下來我們執(zhí)行如下命令生成tsconfig.json,這玩意就跟.babelrc是一個(gè)性質(zhì)的。

npx tsc --init

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

安裝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的時(shí)候，可能有人不使用.jsx文件，整個(gè)項(xiàng)目都是用的.js文件，webapck里面甚至都不配.jsx的規(guī)則。但是在typescript項(xiàng)目中想要全部使用.ts文件這就行不通了，會(huì)報(bào)錯(cuò)，所以當(dāng)用到了jsx的用法的時(shí)候，還是得乖乖用.tsx文件，因此這里我加入了.tsx的規(guī)則。

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

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

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

由于我們?cè)谧鑫募{(diào)整的時(shí)候，把main.js改成main.tsx,因此webpack的入口文件要改成main.tsx。

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

這個(gè)解決很簡(jiǎn)單，去tsconfig配置一下即可。

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

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

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

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

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

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

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

原先我們?cè)趙ebpack里是這么配置的：

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

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

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

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

yarn add @types/**

舉個(gè)