inversify依赖注入入门教程(保证你一学就会)「终于解决」

「注意：」 本篇文章时MobX和inversify的一个综合,如果朋友没有看过本人的MobX入门篇，请先看一下，这篇文章会用到上篇文章的环境。

本人的 MobX 文章

为什么要学习inversify呢？因为我们在写项目的时候要时刻考虑项目的稳定性，尽量遵循设计原则，在这里我们要遵循依赖倒置原则，如果有不懂依赖倒置原则的朋友可以点击下方链接。

依赖倒置原则

inversify 网站

开发环境

根据MobX的开发环境我们继续配置.

下载 babel

npm install --save-dev @babel/preset-env

配置.babelrc

你们可以做一下对比，在这里为presets添加了一项@babel/preset-env

{
    "plugins":[
        [
          "@babel/plugin-proposal-decorators",
          {
              "legacy":true
          }
        ],
        [
          "@babel/plugin-proposal-class-properties",
          {
              "loose":true
          }
          ]
          ],
    "presets":[
        "react-app",
        [
            "@babel/preset-env",
            {
              "useBuiltIns": "entry"
            }
          ]
        ]

}

下载 inversify 所需要的包

除了下载inversify我们还要下载reflect-metadata

npm install inversify reflect-metadata --save

配置 tsconfig.json

官方的配置

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es6"],
        "types": ["reflect-metadata"],
        "module": "commonjs",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

在这里你们可以和你们自己的tsconfig.json作对比，没有的配置要添加

下面是我的tsconfig.json，因为这是最终的tsconfig.json文件，你先配置道这里后面有的配置还没有配。

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "types": ["reflect-metadata", "jest", "node"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

inversify的配置就完了，但是你现在要是运行的话会报错，因为App.test.tsx文件里的it报错了，没有测试框架。

下载 jest 测试框架

npm install --save-dev jest

配置 package.json 文件

把"scripts"里的"test"改为jest官网的配置，也就是

 "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "jest",
    "eject": "react-scripts-ts eject"
  },

配置 tsconfig.json

给"compilerOptions"里面的"type"数组里在添加一项"jest"

"types": ["reflect-metadata", "jest"],

jest配置完毕，你以为到这里就结束了吗？不！你怕是想的有点多! 还有，你一运行还是会报错，它说让你在tsconfig.json里的types里面在加上"node"

"types": ["reflect-metadata", "jest", "node"],

「这下也就对应了我上面 tsconfig.json 的总配置。」

「环境配置完毕」

inversify 入门

文件目录

在这里官网给的例子创建了4个文件，接口一个文件，type类型一个文件， inversify.config.ts文件， 实现接口的类一个文件。在这里我把接口和实现类放在了一个文件中。

index.tsx

在这里要引入import "reflect-metadata"，没有则报错。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "reflect-metadata" // 引入文件
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(<App />,document.getElementById('root') as HTMLElement);
registerServiceWorker();

TYPE.ts

const TYPE = {
    IStor: Symbol.for("IStor")
}
export default TYPE

store.ts

import { injectable } from "inversify";
import { action, computed, observable } from "mobx"

export interface IStor {
    num: number;
    map: Map<string,object>;
    list: string[];
    obj: object;
    retunum:string;
    addNum:number;
    add:()=>void;

}

@injectable()
class Store implements IStor {

    @observable public num: number = 0;
    @observable public map: Map<string,object> = new Map();
    @observable public list: string[] = ["a","b"];
    @observable public obj: object = {name:"Mobx"};

    @computed
    public get retunum() {
        return `${this.num}~~~~~~~~`
    }
    @computed
    public get addNum() {
        return this.num + 10;
    }


    @action.bound
    public add() {
        this.num++;
    }


}
export default Store

inversify.config.ts

import { Container, ContainerModule } from "inversify";
// import { Container } from "inversify";
import Store, { IStor } from "./store"
import TYPE from "./TYPE"

const myContainer = new Container({defaultScope: "Singleton"})

const myStore = new ContainerModule(bind=>{
    // 把接口和实现类对应起来
    bind<IStor>(TYPE.IStor).to(Store)
})

const initilize = ():void => {
    // 初始化，将myStore和myContainer联系起来
    myContainer.load(myStore)
}
initilize();
// 常规写法
// const myContainer = new Container();
// myContainer.bind<IStor>(TYPE.IStor).to(Store);

export { myContainer, myStore }

Casual.tsx

在这里我把两个代码都写出来了，你们可以对比一下。

import { observer } from 'mobx-react';
import * as React from "react"
// import Store from '../store/store';
import { myContainer } from "../store/inversify.config"
import { IStor } from "../store/store"
import TYPE from "../store/TYPE"




@observer
class Casual extends React.Component<{},{}> {
    // 将得到store的对象，
    private store: IStor = myContainer.get<IStor>(TYPE.IStor)



   public render() {
        return (
            <div> <h1>{this.store.num}</h1> <h2>{this.store.retunum}</h2> <h2>{this.store.addNum}</h2> <button onClick={this.onClickAdd}>增加num</button> </div>
        )
    }

    public onClickAdd=()=>{
        this.store.add()
    };


}




// interface IProps {
// store?: Store;
// }

// @inject("store")
// @observer
// class Casual extends React.Component<IProps,{}> {

// constructor(props:IProps) {
// super(props)
// }


// public render() {
// return (
// <div>
// <h1>{this.props.store!.num}</h1>
// <h2>{this.props.store!.retunum}</h2>
// <h2>{this.props.store!.addNum}</h2>
// <button onClick={this.onClickAdd}>增加num</button>
// </div>
// )
// }

// public onClickAdd=()=>{
// this.props.store!.add()
// };


// }
export default Casual

App.tsx

不再使用mobx-react的@inject()的引入方式，不在使用Provider

// import { Provider } from "mobx-react"
import * as React from 'react';
import './App.css';
import Casual from "./component/Casual"
// import Store from './store/store';

// const store = {
// store: new Store()
// }

class App extends React.Component {

  // public render() {
  // return (
  // <Provider {...store}>
  // <div>
  // <Casual />
  // </div>
  // </Provider>
  // );
  // }
  public render() {
    return (
      <div> <Casual /> </div>
    );
  }
}

export default App;

在这里我们的代码书写完毕。