一、创建项目
// 方式一:
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}/>