gu-injectable
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    gu-injectable

    使用 Typescript+Decorators 写的一个依赖注入库。

    NPM JavaScript Style Guide

    安装

    npm install --save gu-injectable

    or

    yarn add gu-injectable

    使用

    开发前配置 tsconfig.ts

     
    {
      "compilerOptions": {
        ...
        "experimentalDecorators": true, //
        "emitDecoratorMetadata": true //
      }
    }

    按照以下流程小试牛刀(以循环依赖为例)。

    第一步

    创建src/test/named.ts文件,此文件内容用于提供函数的名称。

    export const Nameds = {
        GET_STUDENT: Symbol.for("get-student"),
        GET_NAME: Symbol.for("name"),
        GET_AGE: Symbol.for("age"),
        GET_TEACHER: Symbol.for("get-teacher")
    }

    第二步

    创建src/test/student.ts

    import { Inject, LazyProvider, Singleton } from "gu-injectable";
    import { Nameds } from "./nameds";
    import Teacher from "./teacher";
    @Singleton
    class Student {
        @Inject(Nameds.GET_TEACHER)
        teacher!: LazyProvider<Teacher>;
        name: string;
        age: number;
        constructor(name: string, age: number) {
            this.name = name;
            this.age = age;
        }
    }
     
    export default Student;

    第三步

    创建src/test/teacher.ts

    import { Inject, Singleton } from "gu-injectable";
    import { Nameds } from "./nameds";
    import Student from "./student";
     
    @Singleton
    class Teacher {
        @Inject(Nameds.GET_STUDENT)
        student!: Student;
    }
     
    export default Teacher;

    第四步

    使用@Module@Provides@Named@ReturnType@Parameter装饰器创建注入模型,创建src/test/modules.ts

    import { Module, Named, Parameter, Provides, ReturnType } from "gu-injectable";
    import { Nameds } from "./nameds";
    import Student from "./student";
    import Teacher from "./teacher";
     
    @Module
    export class StudentModule {
     
        @Provides
        @Named(Nameds.GET_STUDENT)
        @ReturnType(Student)
        provideStudent(@Parameter(Nameds.GET_NAME) name: string, @Parameter(Nameds.GET_AGE) age: number) {
            return new Student(name, age);
        }
     
        @Provides
        @Named(Nameds.GET_NAME)
        @ReturnType(String)
        provideName() {
            return "Jhon";
        }
     
        @Provides
        @Named(Nameds.GET_AGE)
        @ReturnType(Number)
        provideAge() {
            return 12;
        }
     
        @Provides
        @Named(Nameds.GET_TEACHER)
        @ReturnType(Teacher)
        provideTeacher() {
            return new Teacher();
        }
    }

    第五步

    查看结果

    const teacher = new Teacher();
    console.log(teacher.student);
    // 结果为 Student {name: "Jhon", age: 12}

    or

    class Test {
        @Inject(Nameds.GET_TEACHER)
        teacher!:Teacher;
    }
     
    const test = new Test();
    console.log(test.teacher.student);
    // 结果为 Student {name: "Jhon", age: 12}

    create-react-app 的项目遇到问题?

    因为库使用了reflect-metadata,需要做修改才能正常运行。 跟着下面步骤配置,就能正常运行了😁😁😁😁

    安装 react-app-rewired

    npm install react-app-rewired --dev
    or
    yarn add -D react-app-rewired

    安装 customize-cra

    npm install customize-cra --dev
    or
    yarn add -D customize-cra

    安装 Babel 插件

    npm install babel-plugin-transform-typescript-metadata @babel/plugin-proposal-decorators --dev
    or
    yarn add -D babel-plugin-transform-typescript-metadata @babel/plugin-proposal-decorators

    添加 config-overrides.js

    const { override, useBabelRC } = require('customize-cra');
    module.exports = override(useBabelRC());

    添加。babelrc

    {
        "plugins": [
            "babel-plugin-transform-typescript-metadata",
            [
                "@babel/plugin-proposal-decorators",
                {
                    "legacy": true
                }
            ]
        ]
    }

    修改 package.json

    /* package.json */
     
      "scripts": {
    -   "start": "react-scripts start",
    +   "start": "react-app-rewired start",
    -   "build": "react-scripts build",
    +   "build": "react-app-rewired build",
    -   "test": "react-scripts test",
    +   "test": "react-app-rewired test",
        "eject": "react-scripts eject"
    }

    License

    MIT © AnizGu

    Install

    npm i gu-injectable

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    26.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • gujiwen