React NativeでTypeScriptのデコレーターが期待通りに動作しない

私は、React Native の TypeScript プロジェクトで自分の TypeScript 依存関係 ioc-service-container を使おうとしています。

この依存関係は、次のように TypeScript のプロパティデコレーターを使用します:

const service = new Service();
ServiceContainer.set('service', () => service);

class Foo {
  @inject
  service!: Service;
}

これは reactJS、Vue、Node バックエンドでは問題なく動作します。しかし、react native では動作しません。Foo の service プロパティは依然として undefined のままです。デバッグを行ったところ、inject デコレーターに渡されるプロパティはクラス Foo ではなく空のオブジェクトであることが分かりました。

問題はおそらく私のコードを Babel が変換していることだと思います…しかし、確信は持てません。

babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { 'legacy': true }], // required for @boundMethod decorator
  ],
};

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    // ...
    "experimentalDecorators": true,
  }
}

回答 #1

tsconfig ファイルで emitDecoratorMetadata:true を使用してください