日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
React項目從Javascript到Typescript的遷移經(jīng)驗總結(jié)

 拋轉(zhuǎn)引用

創(chuàng)新互聯(lián)為客戶提供專業(yè)的網(wǎng)站設(shè)計、做網(wǎng)站、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開發(fā). 服務(wù)項目涵蓋了網(wǎng)頁設(shè)計、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、成都手機網(wǎng)站制作等網(wǎng)站方面業(yè)務(wù)。

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

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

開始遷移

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

環(huán)境調(diào)整

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

tsconfig.json

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

 
 
 
 
    
  
  
  
  
  1. yarn global add typescript 
    2.

這條命令是將typescript安裝在全局，其實我個人建議是裝在項目目錄下的，因為每個項目的typescript版本是不完全一樣的，裝在全局容易因為版本不同而出現(xiàn)問題。但是后面我要執(zhí)行tsc命令，所以我裝在了全局。***的情況就是全局和項目都裝一個，但是如果你把tsc命令放在package.json中的script中去用的話，那么在項目里裝就夠了。接下來我們執(zhí)行如下命令生成tsconfig.json,這玩意就跟.babelrc是一個性質(zhì)的。

 
 
 
 
    
  
  
  
  
  1. tsc --init 
    2.

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

webpack

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

 
 
 
 
    
  
  
  
  
  1. yarn add ts-loader -D 
    2.

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

 
 
 
 
    
  
  
  
  
  1. module.exports = {  
    2.   
  
  
  
  2.     //省略部分代碼...  
    3.   
  
  
  
  3.     module: {  
    4.   
  
  
  
  4.         rules: [  
    5.   
  
  
  
  5.             {  
    6.   
  
  
  
  6.                 test:/\.tsx?$/,  
    7.   
  
  
  
  7.                 loader:'ts-loader'  
    8.   
  
  
  
  8.             }  
    9.   
  
  
  
  9.             //省略部分代碼...  
    10.   
  
  
  
  10.         ]  
    11.   
  
  
  
  11.     }  
    12.   
  
  
  
  12.     //...省略部分代碼  
    13.   
  
  
  
  13. }  
    14.

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

刪除babel

關(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é)合。

文件名調(diào)整

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

解決報錯

webpack入口文件找不到

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

 
 
 
 
    
  
  
  
  
  1. module.exports = {  
    2.   
  
  
  
  2.     //省略部分代碼...  
    3.   
  
  
  
  3.     entry: {  
    4.   
  
  
  
  4.         app: './src/main.tsx'  
    5.   
  
  
  
  5.     },  
    6.   
  
  
  
  6.     //省略部分代碼...  
    7.   
  
  
  
  7. }  
    8.

提示不能使用jsx的語法

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

 
 
 
 
    
  
  
  
  
  1. {  
    2.   
  
  
  
  2.    "compilerOptions":{  
    3.   
  
  
  
  3.         "jsx": "react"  
    4.   
  
  
  
  4.    }  
    5.   
  
  
  
  5. }  
    6.

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

模式 輸入 輸出 輸出文件擴展名
preserve
.jsx
react
React.createElement("div") .js
react-native
.js

webpack里面配置的alias無法解析

 
 
 
 
    
  
  
  
  
  1. module.exports = {  
    2.   
  
  
  
  2.     //省略部分代碼...  
    3.   
  
  
  
  3.     resolve: {  
    4.   
  
  
  
  4.         alias:{  
    5.   
  
  
  
  5.           '@':path.join(__dirname,'../src')  
    6.   
  
  
  
  6.         }  
    7.   
  
  
  
  7.         //省略部分代碼...      
    8.   
  
  
  
  8.     },  
    9.   
  
  
  
  9.     //省略部分代碼...     
    10.   
  
  
  
  10. } 
    11.

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

 
 
 
 
    
  
  
  
  
  1. {  
    2.   
  
  
  
  2.     "compilerOptions":{  
    3.   
  
  
  
  3.         "baseUrl": ".",  
    4.   
  
  
  
  4.         "paths": {  
    5.   
  
  
  
  5.           "@/*":["./src/*"]  
    6.   
  
  
  
  6.         }   
    7.   
  
  
  
  7.     }  
    8.   
  
  
  
  8. }  
    9.

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

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

無法自動添加拓展名而導(dǎo)致找不到對應(yīng)的模塊

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

 
 
 
 
    
  
  
  
  
  1. module.exports = {  
    2.   
  
  
  
  2.     //省略部分代碼...   
    3.   
  
  
  
  3.     resolve: {  
    4.   
  
  
  
  4.         //省略部分代碼...   
    5.   
  
  
  
  5.         extensions: ['.js', '.jsx', '.json']  
    6.   
  
  
  
  6.     },  
    7.   
  
  
  
  7.     //省略部分代碼...   
    8.   
  
  
  
  8. }  
    9.

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

 
 
 
 
    
  
  
  
  
  1. {  
    2.   
  
  
  
  2.     //省略部分代碼...   
    3.   
  
  
  
  3.     resolve: {  
    4.   
  
  
  
  4.         //省略部分代碼...   
    5.   
  
  
  
  5.         extensions: ['.ts','.tsx','.js', '.jsx', '.json']  
    6.   
  
  
  
  6.     },  
    7.   
  
  
  
  7.     //省略部分代碼...   
    8.   
  
  
  
  8. }  
    9.

Could not find a declaration file for module '**'

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

 
 
 
 
    
  
  
  
  
  1. yarn add @types/** 
    2.

舉個，如果提示Could not find a declaration file for module 'react'，那你應(yīng)該執(zhí)行如下命令：

 
 
 
 
    
  
  
  
  
  1. yarn add @types/react 
    2.

這個僅限于第三方包，如果是項目自己的模塊提示缺少聲明文件，那就需要你自己寫對應(yīng)的聲明文件了。比如你在window這個全局對象上掛載了一個對象，如果需要使用它的話，就需要做一下聲明，否則就會報錯。至于具體怎么寫，這得看typescript的文檔，這里就不展開說明了。

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

Cannot find type definition file for '**'

這些并沒有在我們的業(yè)務(wù)代碼里直接用到，而是第三方包用到的，遇到這種情況，需要檢查一下tsconfig.json中的typeRoots這個配置項有沒有配置錯誤。一般來說是不用配置typeRoots，但是如果需要加入額外的聲明文件路徑，就需要對其進行修改。typeRoots是有一個默認(rèn)值，有人會誤以為這個默認(rèn)值是“["node_modules"]”，因此會有人這樣配置：

 
 
 
 
    
  
  
  
  
  1. {  
    2.   
  
  
  
  2.     "compilerOptions":{  
    3.   
  
  
  
  3.         "typeRoots":["node_modules",...,"./src/types"]  
    4.   
  
  
  
  4.     }  
    5.   
  
  
  
  5. } 
    6.

實際上typeRoots的默認(rèn)值“["@types"]”，所有可見的"@types"包都會在編輯過程中被加載進來，比如“./node_modules/@types/”，“../node_modules/@types/”和“../../node_modules/@types/”等等都會被加載進來。所以遇到這種問題，你的配置應(yīng)該改成：

 
 
 
 
    
  
  
  
  
  1. {  
    2.   
  
  
  
  2.     "compilerOptions":{  
    3.   
  
  
  
  3.         "typeRoots":["@types",...,"./src/types"]  
    4.   
  
  
  
  4.     }  
    5.   
  
  
  
  5. }  
    6.

在實際項目中，@types基本上存在于根目錄下的node_modules下，因此這里你可以改成這樣：

 
 
 
 
    
  
  
  
  
  1. {  
    2.   
  
  
  
  2.     "compilerOptions":{  
    3.   
  
  
  
  3.         "typeRoots":["node_modules/@types",...,"./src/types"]  
    4.   
  
  
  
  4.     }  
    5.   
  
  
  
  5. }  
    6.

不支持decorators（裝飾器）

typescript默認(rèn)是關(guān)閉實驗性的ES裝飾器，所以需要在tsconfig.json中開啟。

 
 
 
 
    
  
  
  
  
  1. {  
    2.   
  
  
  
  2.     "compilerOptions":{  
    3.   
  
  
  
  3.         "experimentalDecorators":true  
    4.   
  
  
  
  4.     }  
    5.   
  
  
  
  5. }  
    6.

Module '**' has no default export

提示模塊代碼里沒有“export

default”，而你卻用“import from ”這種默認(rèn)導(dǎo)入的形式。對于這個問題，我們需要把tsconfig.json配置項“allowSyntheticDefaultImports”設(shè)置為true。允許從沒有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入。不過不必?fù)?dān)心會對代碼產(chǎn)生什么影響，這個僅僅為了類型檢查。

 
 
 
 
    
  
  
  
  
  1. {  
    2.   
  
  
  
  2.     "compilerOptions":{  
    3.   
  
  
  
  3.         "allowSyntheticDefaultImports":true  
    4.   
  
  
  
  4.     }  
    5.   
  
  
  
  5. }  
    6.

當(dāng)然你也可以使用“esModuleInterop”這個配置項，將其設(shè)置為true，根據(jù)“allowSyntheticDefaultImports”的默認(rèn)值，如下：

 
 
 
 
    
  
  
  
  
  1. module === "system" or --esModuleInterop 
    2.

對于“esModuleInterop”這個配置項的作用主要有兩點：

  • 提供__importStar和__importDefault兩個helper來兼容babel生態(tài)
  • 開啟allowSyntheticDefaultImports

對于“esModuleInterop”和“allowSyntheticDefaultImports”選用上，如果需要typescript結(jié)合babel，毫無疑問選“esModuleInterop”，否則的話，個人習(xí)慣選用“allowSyntheticDefaultImports”，比較喜歡需要啥用啥。當(dāng)然“esModuleInterop”是最保險的選項，如果對此拿捏不準(zhǔn)的話，那就乖乖地用“esModuleInterop”。

無法識別document和window這種全局對象

遇到這種情況，需要我們在tsconfig.json中l(wèi)ib這個配置項加入一個dom庫，如下：

 
 
 
 
    
  
  
  
  
  1. {  
    2.   
  
  
  
  2.     "compilerOptions":{  
    3.   
  
  
  
  3.         "lib":[  
    4.   
  
  
  
  4.             "dom",  
    5.   
  
  
  
  5.             ...,  
    6.   
  
  
  
  6.             "esNext"  
    7.   
  
  
  
  7.         ]  
    8.   
  
  
  
  8.     }  
    9.   
  
  
  
  9. }  
    10.

文件中的標(biāo)紅問題

關(guān)于這個問題，我們需要分兩種情況來考慮，***種是.ts的文件，第二種是.tsx文件。下面來看一下具體是哪些注意的點（Ps：以下提到的注意的點并不能完全解決文件中標(biāo)紅的問題，但是可以解決大部分標(biāo)紅的問題）：

***種：.ts文件

這種文件在你的項目比較少，比較容易處理，根據(jù)實際情況去加一下類型限制，沒有特別需要講的。

第二種：.tsx文件

這種情況都是react組件了，而react組件又分為無狀態(tài)組件和有狀態(tài)組件組件，所以我們分開來看。

無狀態(tài)組件

對于無狀態(tài)組件，首先得限制他是一個FunctionComponent（函數(shù)組件），其次限制其props類型。舉個：

 
 
 
 
    
  
  
  
  
  1. import React, { FunctionComponent, ReactElement } from 'react';  
    2.   
  
  
  
  2. import {LoadingComponentProps} from 'react-loadable';  
    3.   
  
  
  
  3. import './style.scss';  
    4.   
  
  
  
  4. interface LoadingProps extends LoadingComponentProps{  
    5.   
  
  
  
  5.   loading:boolean,  
    6.   
  
  
  
  6.   children?:ReactElement  
    7.   
  
  
  
  7. }  
    8.   
  
  
  
  8. const Loading:FunctionComponent = ({loading=true,children})=>{  
    9.   
  
  
  
  9.   return (  
    10.   
  
  
  
  10.     loading?  
    11.   
  
  
  
  11.       
  
  •       
    •   
  •       
    •   
  •       
    •   
  •       
    •   
  •     
    • :children  
  •   )    
  • }  
  • export default Loading;  

    • 其中你要是覺得FunctionComponent這個名字比較長，你可以選擇用類型別名“SFC”或者“FC”。

    有狀態(tài)組件

    對于有狀態(tài)組件，主要注意三點：

    1. props和state都要做類型限制
    2. state用readonly限制“this.state=**”的操作
    3. 對event對象做類型限制 
     
 
 
 
      
  
  
  
  
    1. import React,{MouseEvent} from "react";  
      2.   
  
  
  
    2. interface TeachersProps{  
      3.   
  
  
  
    3.   user:User  
      4.   
  
  
  
    4. }  
      5.   
  
  
  
    5. interface TeachersState{  
      6.   
  
  
  
    6.   pageNo:number,  
      7.   
  
  
  
    7.   pageSize:number,  
      8.   
  
  
  
    8.   total:number,  
      9.   
  
  
  
    9.   teacherList:{  
      10.   
  
  
  
    10.     id: number,  
      11.   
  
  
  
    11.     name: string,  
      12.   
  
  
  
    12.     age: number,  
      13.   
  
  
  
    13.     sex: number,  
      14.   
  
  
  
    14.     tel: string,  
      15.   
  
  
  
    15.     email: string  
      16.   
  
  
  
    16.   }[]  
      17.   
  
  
  
    17. }  
      18.   
  
  
  
    18. export default class Teachers extends React.PureComponent {  
      19.   
  
  
  
    19.     readonly state = {  
      20.   
  
  
  
    20.         pageNo:1,  
      21.   
  
  
  
    21.         pageSize:20,  
      22.   
  
  
  
    22.         total:0,  
      23.   
  
  
  
    23.         userList:[]  
      24.   
  
  
  
    24.     }  
      25.   
  
  
  
    25.     handleClick=(e:MouseEvent)=>{  
      26.   
  
  
  
    26.         console.log(e.target);  
      27.   
  
  
  
    27.     }  
      28.   
  
  
  
    28.     //...省略部分代碼  
      29.   
  
  
  
    29.     render(){  
      30.   
  
  
  
    30.         return 點擊我
      
  •     }  
  • }  

    • 實際項目里，組件的state可能會有很多值，如果按照我們上面這種方式去寫會比較麻煩，所以可以考慮一下下面這個簡便寫法：

     
 
 
 
      
  
  
  
  
    1. import React,{MouseEvent} from "react";  
      2.   
  
  
  
    2. interface TeachersProps{  
      3.   
  
  
  
    3.   user:User  
      4.   
  
  
  
    4. }  
      5.   
  
  
  
    5. const initialState = {  
      6.   
  
  
  
    6.   pageNo:1,  
      7.   
  
  
  
    7.   pageSize:20,  
      8.   
  
  
  
    8.   total:0,  
      9.   
  
  
  
    9.   teacherList:[]  
      10.   
  
  
  
    10. }  
      11.   
  
  
  
    11. type TeachersState = Readonly  
      12.   
  
  
  
    12. export default class Teachers extends React.PureComponent {  
      13.   
  
  
  
    13.     readonly state = initialState  
      14.   
  
  
  
    14.     handleClick=(e:MouseEvent)=>{  
      15.   
  
  
  
    15.         console.log(e.target);  
      16.   
  
  
  
    16.     }  
      17.   
  
  
  
    17.     //...省略部分代碼  
      18.   
  
  
  
    18.     render(){  
      19.   
  
  
  
    19.         return 點擊我
      
  •     }  
  • }  

    • 這種寫法會簡便很多代碼，但是類型限制效果上明顯不如***種，所以這種方法僅僅作為參考，可根據(jù)實際情況去選擇。

    Ant Design丟失樣式文件

    當(dāng)我們把項目啟動起來之后，某些同學(xué)的頁面可能會出現(xiàn)樣式丟失的情況，如下：

    打開控制臺，我們發(fā)現(xiàn)Ant Design的類名都找不到對應(yīng)的樣式：

    出現(xiàn)這種情況是因為我們把babel刪除之后，用來按需加載組件樣式文件的babel插件babel-plugin-import也隨著丟失了。不過typescript社區(qū)有一個babel-plugin-import的Typescript版本，叫做“ts-import-plugin”，我們先來安裝一下：

     
 
 
 
      
  
  
  
  
    1. yarn add ts-import-plugin -D 
      2.

    這個插件需要結(jié)合ts-loader使用，所以webpack配置中需要做如下調(diào)整：

     
 
 
 
      
  
  
  
  
    1. const tsImportPluginFactory = require('ts-import-plugin')  
      2.   
  
  
  
    2. module.exports = {  
      3.   
  
  
  
    3.     //省略部分代碼...  
      4.   
  
  
  
    4.     module:{  
      5.   
  
  
  
    5.         rules:[{  
      6.   
  
  
  
    6.             test: /\.tsx?$/,  
      7.   
  
  
  
    7.             loader: "ts-loader",  
      8.   
  
  
  
    8.             options: {  
      9.   
  
  
  
    9.                 transpileOnly: true,//（可選）  
      10.   
  
  
  
    10.                 getCustomTransformers: () => ({  
      11.   
  
  
  
    11.                   before: [  
      12.   
  
  
  
    12.                     tsImportPluginFactory({  
      13.   
  
  
  
    13.                         libraryDirectory: 'es',  
      14.   
  
  
  
    14.                         libraryName: 'antd',  
      15.   
  
  
  
    15.                         style: true  
      16.   
  
  
  
    16.                     })  
      17.   
  
  
  
    17.                   ]  
      18.   
  
  
  
    18.                 })  
      19.   
  
  
  
    19.             }  
      20.   
  
  
  
    20.         }]  
      21.   
  
  
  
    21.     }  
      22.   
  
  
  
    22.     //省略部分代碼...  
      23.   
  
  
  
    23. }  
      24.

    這里要注意一下transpileOnly: true這個配置，這是個可選配置，我建議是只有大項目中才加這個配置，小項目就沒有必要了。由于typescript的語義檢查器會在每次編譯的時候檢查所有文件，因此當(dāng)項目很大的時候，編譯時間會很長。解決這個問題的最簡單的方法就是用transpileOnly: true這個配置去關(guān)閉typescript的語義檢查，但是這樣做的代價就是失去了類型檢查以及聲明文件的導(dǎo)出，所以除非在大項目中為了提升編譯效率，否則不建議加這個配置。

    配置完成之后，你的瀏覽器控制臺可能會報出類似下面這個錯誤：

    出現(xiàn)這個原因是因為你的typescript配置文件tsconfig.json中的module參數(shù)設(shè)置不對，兩種情況會導(dǎo)致這個問題：

    • module設(shè)置成了“commonjs”
    • target設(shè)置"ES5"但是并未設(shè)置module（當(dāng)target不為“ES6”時，module默認(rèn)為“commonjs”）

    解決這個辦法就是把module設(shè)置為“esNext”便可解決這個問題。

     
 
 
 
      
  
  
  
  
    1. {  
      2.   
  
  
  
    2.     "compilerOptions":{  
      3.   
  
  
  
    3.         "module":"esNext"  
      4.   
  
  
  
    4.     }  
      5.   
  
  
  
    5. }  
      6.

    可能會有小伙們說設(shè)置成“ES6”或者“ES2015”也是可以的，至于我為什么選擇“esNext”而不是“ES6”或者“ES2015”，主要原因是設(shè)置成“ES6”或者“ES2015”之后，就不能動態(tài)導(dǎo)入了，因為項目使用了react-loadable這個包，要是設(shè)置成“ES6”或者“ES2015”的話，會報如下這個錯誤：

    typescript提示我們需要設(shè)置成“commonjs”或者“ESNext”才可動態(tài)導(dǎo)入，所以保險起見，我是建議大家設(shè)置成ESNext。完成之后我們的頁面就可以正常顯示了。

    說到module參數(shù)，這里要再多提一嘴說一下moduleResolution這個參數(shù)，它決定著typescript如何處理模塊。當(dāng)我們把module設(shè)置成“esNext”時，是可以不用管moduleResolution這個參數(shù)，但是大家項目里要是設(shè)置成“ES6”的話，那就要設(shè)置一下了。先看一下moduleResolution默認(rèn)規(guī)則：

     
 
 
 
      
  
  
  
  
    1. module === "AMD" or "System" or "ES6" ? "Classic" : "Node" 
      2.

    當(dāng)我們module設(shè)置為“ES6”時，此時moduleResolution默認(rèn)是“Classic”，而我們需要的是“Node”。為什么要選擇“node”,主要是因為node的模塊解析規(guī)則更符合我們要求，解析速度會更快，至于詳情的介紹，可以參考Typescript的文檔。

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

    同樣為了保險起見，我是建議大家強行將moduleResolution設(shè)置為“node”。

    總結(jié)

    以上就是我自己在遷移過程中遇到的問題，可能無法覆蓋大家在遷移過程中所遇到的問題，如果出現(xiàn)我上面沒有涉及的報錯，歡迎大家在評論區(qū)告訴我，我會盡可能地完善這篇文章。***再強調(diào)一下，本篇文章僅僅只是介紹了我個人在遷移至typescript的經(jīng)驗總結(jié)，并未完全覆蓋tsconfig.json的所有配置項，文章未涉及到的配置項，還需大家多花點時間看看typescript的文檔。***附上我已遷移到typescript的項目的地址：

    項目地址： https://github.com/ruichengpi...


    標(biāo)題名稱：React項目從Javascript到Typescript的遷移經(jīng)驗總結(jié)
    網(wǎng)頁地址：http://m.5511xx.com/article/dhgjego.html