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

 

方法一：

最快的方法是随便找个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版本，除非当然有工作空间设置可以覆盖此版本。

 

 

 

 

总结：

解决的办法很简单，可一开始问题出现的时候很懵逼，多番查阅趟雷才知道怎么解决

有时候解决办法可能就一两句话或者一两行代码，但这背后可是无数趟雷总结出来的经验