React + TS + Mobx 示例

一、创建项目

// 方式一：
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}/>