React + TS + Mobx 示例

原文鏈接：https://www.nealbuerger.com/2018/11/11/getting-started-with-mobx-5-and-typescript-3-react-16-6/

一、創建項目

// 方式一：
create-react-app todo-React-ts-demo --scripts-version=react-scripts-ts
cd todo-React-ts-demo

npm start

// 方式二：
create-react-app todo-React-ts-demo
cd todo-React-ts-demo
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

npx mv 'src/App.js' 'src/App.tsx' 
npx mv 'src/App.test.js' 'src/App.test.tsx' 
npx mv 'src/index.js' 'src/index.tsx'

npm start

// 安裝  mobx   mobx-react
npm  install mobx mobx-react -D

二、 配置tsconfig.json

"experimentalDecorators": true // ensure that experimental Decorators are enabled

三、代碼示例 -- (基本使用）

說明：對應的示例代碼：https://gitee.com/MaGary/todo-react-ts-demo/tree/dev-mobx   // 對應的dev-mobx分支

step1.  創建目錄

// 前提：在命令行中操作, 進入到項目的src目錄
// 創建 目錄
mkdir stores
mkdir models

step2.  定義mobxStore接口

// 創建store類型接口
// IMobxStore.ts:  src/models/IMobxStores.ts，代碼如下：
export interface IMobxStore {
    name: string;
    greeting: string;
    setName(name:string):void;
}

step3.  創建mobxStore

// 創建store
// MobxStores.ts:  src/stores/MobxStores.ts，代碼如下：
import {action, computed, observable} from 'mobx'
import {IMobxStore} from '../models/IMobxStore'

class MobxStore implements IMobxStore {
    @observable  public name: string = "world"

    @computed
    public get greeting(): string {
        return `hello ${this.name}`
    }

    @action.bound
    public setName(name: string): void{
        this.name = name
    }

}

export default MobxStore

step4. store的初始化

// store的初始化
// index.ts   src/stores/index.ts 代碼如下：
import MobxStore from './MobxStores'

export default {
    mobxStore: new MobxStore()
}

step5. 配置Provider

// 配置Provider
// index.ts src/index.tsx中進行配置, 代碼如下：
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
// 以下 是關鍵
import {Provider} from 'mobx-react'
import stores from './stores'

ReactDOM.render(
  <Provider {...stores}>
    <App  />
  </Provider>,
  document.getElementById('root') as HTMLElement
);

 step6. 使用store

// 使用Store 
// App.tsx  在src/App.tsx中 使用store， 代碼如下：
import * as React from 'react'
import './App.css'

import { inject, observer } from 'mobx-react'
import { IMobxStore } from './models/IMobxStore'

interface IAppProps {
  mobxStore?: IMobxStore  //  這裏比較關鍵 ？表示可或缺，如果沒有就會報錯。
}

@inject('mobxStore')
@observer
class App extends React.Component<IAppProps, {}> {

  public render() {
    const {greeting} = this.props.mobxStore!;
    
    return (
      <div className="App">
        <header className="App-header">
            {greeting}
          <button onClick={this.clickHandler}>Change Greeting</button>
        </header>
        
      </div>
    );
  }

  private clickHandler = (): void =>{
    const {setName} = this.props.mobxStore!;
    setName("Bob");
  }
}

export default App

四、搭建過程遇到的錯誤：

step6中 在聲明類型的時候，如下 

// App.tsx  在src/App.tsx中 使用store， 代碼如下：
// ...............省略代碼........................
interface IAppProps {
  mobxStore?: IMobxStore,  //  這裏比較關鍵 ？表示可或缺，如果在<App/>中沒有傳入 會報錯。
  // mobxStore: IMobxStore 
  flag: boolean
}
// ...............省略代碼.......................

//編譯時錯誤代碼：
“Property 'mobxStore' is missing in type '{}' but required in type 'Readonly<IAppProps>'”

如下圖所示：解決的關鍵 就是 上面代碼填寫？

否則 需要 在 src/index.tsx中  <App/> 傳入相應的props， 
<App mobxStore={mobx實例} flag={true}/>