create-react-app 創建react ts項目啓動報錯

執行創建react ts項目命令： create-react-app demo2 --template typescript

初始化完項目後，打開項目看到 tsconfig.json 報錯

 

問題來了，就算我把 "react-jsx" 改成 "react" ，

只要一執行命令 "npm run start" 命令就自動給我改回 "react-jsx" 很奇怪的BUG

 

首先了解下 tsconfig.json 文件的jsx參數是幹嘛用的(我看的文檔是4.x版本的)

https://www.typescriptlang.org/zh/tsconfig#jsx

 

官網的 jsx 參數是有 react-jsx 的，那麼爲什麼vscode還是報錯呢

通過版本更新說明了解到 jsx 參數 react-jsx 是在4.1版本才添加的

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html

 

隨便找個tsx文件打開，然後看看編輯器右下角版本，vsocde typescr插件的版本3.7.3

 

腳手架create-react-app默認安裝了最新的ts版本4.1，而vsocde typescr插件的版本才3.7.3所以導致報錯了

解決辦法：更新vsocde typescr插件的版本完事：https://mlog.club/article/1905860

 

解決辦法：更新vsocde typescr插件的版本完事：https://mlog.club/article/1905860

方法一：

最快的方法是隨便找個tsx文件打開，然後點擊ts版本號，然後選擇工作區版本

 

 

 

方法二：

(1)全局安裝TypeScript： npm install -g typescript

(2)打開VS Code用戶設置（F1> Open User Settings）

(3)更新/插入"typescript.tsdk": "{your_global_npm_path}/typescript/lib"您可以通過鍵入npm root -g來找出{your_global_npm_path}

現在使用VS Code打開的所有項目都將使用此TypeScript版本，除非當然有工作空間設置可以覆蓋此版本。

 

 

 

 

總結：

解決的辦法很簡單，可一開始問題出現的時候很懵逼，多番查閱趟雷才知道怎麼解決

有時候解決辦法可能就一兩句話或者一兩行代碼，但這背後可是無數趟雷總結出來的經驗