我启动了一个基于mime的旧项目的新打字稿项目（该项目最初是纯JavaScript的，但我无法进行任何重要的注入工作。我对babel配置一无所知（因为盯着create-react-app）。我尝试了the recommended compilerOptions，但它也没有起作用.....我的设置可能一团糟，但这就是它的演变方式。
随时从github获取整个项目（获取并运行npm install && npm start）或继续阅读。
import 'reflect-metadata';
import { Container } from 'inversify';
import React from 'react';
import ReactDOM from 'react-dom';
import { injectable } from 'inversify';
@injectable()
export class Simple {
}
@injectable()
export class Composed {
simple: Simple;
// ERROR: Module parse failed: Unexpected character '@'
// constructor(@inject simple: Simple) {
// this.simple = simple;
// }
// Error: Missing required @inject or @multiInject annotation in: argument 0 in class Composed.
constructor(simple: Simple) {
this.simple = simple;
}
}
const container = new Container();
container.bind(Simple).toSelf();
container.bind(Composed).toSelf();
console.log(container.get(Composed));
function Main() {
return <div>
{JSON.stringify(container.get(Composed))}
</div>;
}
ReactDOM.render(<Main/>, document.getElementById('root'));
{
"name": "inversify-problem",
"version": "0.0.1",
"description": "",
"private": true,
"dependencies": {
"@material-ui/core": "^4.9.8",
"@material-ui/icons": "^4.9.1",
"array.prototype.flatmap": "^1.2.3",
"customize-cra": "^0.9.1",
"deep-equal": "^2.0.1",
"eslint": "^6.8.0",
"inversify": "^5.0.1",
"json-stable-stringify": "^1.0.1",
"mobx": "^5.15.4",
"mobx-decorators": "^6.0.1",
"mobx-react": "^6.1.8",
"mobx-state-tree": "^3.15.0",
"notistack": "^0.9.9",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-app-rewire-mobx": "^1.0.9",
"react-app-rewired": "^2.1.5",
"react-dom": "^16.13.1",
"reflect-metadata": "^0.1.13",
"resize-observer-polyfill": "^1.5.1",
"shallowequal": "^1.1.0",
"styled-components": "^5.0.1",
"ts-enum-util": "^4.0.1"
},
"devDependencies": {
"babel-plugin-import": "^1.13.0",
"babel-plugin-styled-components": "^1.10.7",
"@types/classnames": "^2.2.10",
"@types/deep-equal": "^1.0.1",
"@types/json-stable-stringify": "^1.0.32",
"@types/jest": "^25.1.4",
"@types/node": "^13.9.8",
"@types/react": "^16.9.29",
"@types/react-dom": "^16.9.5",
"eslint-plugin-unused-imports": "^0.1.2",
"tslint-etc": "^1.10.1",
"react-scripts": "^3.4.1",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eslint": "eslint --fix $(find src -name '*.ts' -o -name '*.tsx')",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app",
"parserOptions": {
"ecmaFeatures": {
"legacyDecorators": true
}
}
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
{
"compilerOptions": {
"target": "ES5",
"sourceMap": true,
"downlevelIteration": true,
"importHelpers": true,
"lib": [
"dom",
"dom.iterable",
"esnext",
"es6",
"webworker",
"es2015.collection",
"es2015.iterable",
"es2019"
],
"types": [
"node",
"reflect-metadata"
],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noImplicitAny": true,
"noEmitOnError": false,
"incremental": false,
"jsx": "preserve",
"noEmit": true
},
"include": [
"src/index.tsx",
"src/mg/extras.d.ts"
]
}
const {
override,
} = require("customize-cra");
module.exports = override(
);
我试图调试问题，但发现的不多。没有元数据，也没有像this answer中那样尝试解析Function.prototype.toString（）。我的配置出了点问题，但是那件事对我来说是完全不透明的。
[您正在尝试让实例化Composed类的实例化而没有注入依赖项。如果您希望自己处理Composed实例，则需要自己创建它，然后告诉inverseify您希望将此实例用于Composed变量。
const composedInstance = new Composed(container.get(Simple))
container.bind<Composed>("Composed").toConstantValue(composedInstance);
这样，您就可以处理您的Composed实例并将其实例化。更多信息：https://github.com/inversify/InversifyJS/blob/master/wiki/value_injection.md