JSFiddle - React, Tailwind, and code Playground

by Mike Lin

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/inversify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Reflect.min.js"></script>

TypeScript

import 'reflect-metadata'
import { injectable, inject } from 'inversify'
interface Weapon {}

@injectable()
class Katana implements Weapon {}

@injectable()
class Shuriken implements Weapon {}

interface Ninja {
    katana: Weapon;
    shuriken: Weapon;
}

@injectable()
class Ninja implements Ninja {
    public katana: Weapon;
    public shuriken: Weapon;
    public constructor(
        @inject("Weapon") @named("strong") katana: Weapon,
        @inject("Weapon") @named("weak") shuriken: Weapon
    ) {
        this.katana = katana;
        this.shuriken = shuriken;
    }
}

/* container.bind<Ninja>("Ninja").to(Ninja); */
container.bind<Weapon>("Weapon").to(Katana).whenTargetNamed("strong");
container.bind<Weapon>("Weapon").to(Shuriken).whenTargetNamed("weak");