react結合ts與mobx環境搭建步驟詳解

　　由於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程序的編寫了！！！