由于react ts mobx 版本上的更新，一些配置信息也在隨時更新，使得有時候，在更新版本時，一些配置文件出錯，讓我們措手不及，現將三者環境搭建配上，廢話不多說

　　思路：新建react 應用，利用彈射實現進行mobx支持配置，最后搭建typescript

　　裝包：使用的用yarn，相信為什么使用yarn，而不使用npm，大家是知道的，因為速度嘛！！！

　　1、新建應用? npx create-react-app reacttsmobx? 最后的reacttsmobx是項目名稱

　　2、裝包? yarn add? mobx

　　3、進行彈射? yarn eject

　　4、彈射之后，新建一個Mobx .js 文件? 運行 發現會報錯??

　　5、需要安裝?@babel/plugin-proposal-decorators

　　yarn? add?@babel/plugin-proposal-decorators? ?--dev

　　安裝完后進行配置：

　　

　　配置完后，會發現在我們定義?observable會報一個錯，missing??class properties

　　6、裝包? yarn add?babel-plugin-transform-class-properties --dev

　　進行package.json? 配置

　　

　　接下來就是安裝一些依賴

　　

　　但是，我們會發現，在定義的observable會劃線

　　這個時候需要我們配置jsconfig.json 文件

　　

　　這個時候，需要做什么呢，有些寶寶會直接看運行結果，不著急，先關閉vscode，然后在重啟應用

　　你會發現你的問題得到完美解決

　　7、下面引入ts? 安裝包typescript? tslink??

　　

　　新建文件 MiGu.tsx

　　引入的時候，記得加上tsx不然會報錯，找不到文件

接下里會報一些，各種各樣的錯誤，那是因為我們沒有進行json文件的配置，記得之前配置過rn+ts? 是tsconfig.json??

?但是在這里,tsconfig.json不僅會報各種各樣的錯誤，還會影響運行，將tsconfig.json改成jsconfig.json,也就是在上邊jsconfig.json文件的基礎上，進行配置

{ "compilerOptions": { "module": "es2015", "target": "es2015", "jsx": "react", "experimentalDecorators":true, }, "filesGlob": [ "typings/index.d.ts", "src/**/*.ts", "src/**/*.tsx", "node_modules/typescript/lib/lib.es6.d.ts" ], "types": [ "react", "react-dom", "react-native" ], "exclude": [ "build", "node_modules", "jest.config.js", "App.js" ], "compileOnSave": false }

　

?這個就是我的jsconfig.js文件，接下來就可以很happy的進行tsx程序的編寫了！！！

?

轉載于:https://www.cnblogs.com/luxinyi/p/10048919.html

總結

以上是生活随笔為你收集整理的react结合ts与mobx环境搭建步骤详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。