web-dev-qa-db-ja.com

TypeScript、Babel 7、Decoratorによるメタデータの保持

TypeORMをBabel 7とTypeScriptで使用していますが、コンパイルされたコードにメタデータが存在しないようです。それについて何かすることはできますか、またはこれはBabelの使用の制限ですか？

エラー

ColumnTypeUndefinedError：Photo＃isPublishedの列タイプは定義されておらず、推測できません。 tsconfig.jsonで「emitDecoratorMetadata」：trueオプションがオンになっていることを確認してください。また、アプリケーションのメインエントリファイルの上に「reflect-metadata」がインポートされていることを確認してください（エンティティをインポートする前に）。TypeScriptの代わりにJavaScriptを使用している場合は、列タイプを明示的に指定する必要があります。新しいColumnTypeUndefinedError

Photo.js

import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'

@Entity()
export class Photo {

    @PrimaryGeneratedColumn()
    id: number


    @Column()
    isPublished: boolean
}

ormコード

import 'reflect-metadata'
import {createConnection} from 'typeorm'
import {Photo} from './entities/Photo'

createConnection({
    type: 'postgres',
    Host: 'localhost',
    port: 5432,
    username: 'postgres',
    password: 'root',
    database: 'test',
    entities: [
        Photo
    ],
    synchronize: true,
    logging: false
}).then(connection => {
    // here you can start to work with your entities
}).catch(error => console.log(error))

package.json

{
    "name": "TypeScript-babel-node",
    "version": "0.1.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "run-p -r dev:run type-check:watch",
        "dev:run": "nodemon --exec babel-node --extensions '.ts,.js' src/index.js",
        "build": "babel src -d build --extensions '.ts,.js' src/index.js",
        "start": "node build/index.js",
        "type-check:watch": "tsc --watch",
        "test": "jest --watch"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@types/node": "^10.12.0",
        "express": "^4.16.4",
        "pg": "^7.6.0",
        "ramda": "^0.25.0",
        "reflect-metadata": "^0.1.12",
        "typeorm": "^0.2.8"
    },
    "devDependencies": {
        "@babel/cli": "^7.1.2",
        "@babel/core": "^7.1.2",
        "@babel/node": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "@babel/plugin-proposal-decorators": "^7.1.2",
        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
        "@babel/plugin-syntax-import-meta": "^7.0.0",
        "@babel/preset-env": "^7.1.0",
        "@babel/preset-TypeScript": "^7.1.0",
        "@types/express": "^4.16.0",
        "@types/jest": "^23.3.7",
        "@types/ramda": "^0.25.39",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^23.6.0",
        "babel-plugin-module-resolver": "^3.1.1",
        "dot-env": "0.0.1",
        "eslint": "^5.7.0",
        "eslint-config-standard": "^12.0.0",
        "eslint-plugin-import": "^2.14.0",
        "eslint-plugin-node": "^7.0.1",
        "eslint-plugin-promise": "^4.0.1",
        "eslint-plugin-standard": "^4.0.0",
        "jest": "^23.6.0",
        "nodemon": "^1.18.5",
        "npm-run-all": "^4.1.3",
        "regenerator-runtime": "^0.12.1",
        "source-map-loader": "^0.2.4",
        "ts-jest": "^23.10.4",
        "TypeScript": "^3.1.3",
        "webpack": "^4.23.0",
        "webpack-cli": "^3.1.2"
    }
}
typescriptbabeltypeorm
12
ps-aux

別の回答で述べられているように、箱から出しただけではこれはサポートされません。ただし、動作させるためのバベルプラグインを作成することはできます。

コードの記述はそれほど複雑ではなく、問題はbabel内にある情報の制限に起因します。 BabelはTypeScriptの型チェックを実行しません。つまり、セマンティック情報はありません。型注釈と、そこから派生できる情報だけが存在します。これは、私たちのソリューションが必然的に非常に制限されていることを意味します

制限：

  • 型注釈が存在しない場合、書き込む型がありません
  • 型参照がある場合は、型名のみを使用できます。型エイリアス、クラス、または列挙型として、参照がインターフェイスに対するものであるかどうかを確認することはできません。実際には、これは次のことを意味します。
    • タイプがインターフェイスまたはタイプエイリアスの場合、タイプ名は実行時にundefinedになります。未定義を回避するために、タイプにランタイム値がな​​い場合にデフォルトでオブジェクトにtype || Objectを実行できます。関連
    • タイプが列挙型の場合、TypeScriptは列挙型に応じて、メタデータにNumberまたはStringを書き込みます。タイプ名をメタデータに書き込むので、これはメタデータ内の列挙型のコンテナーオブジェクトになることを意味します。

型のシリアル化は、最小限の変更でTypeScriptコンパイラ自体からコピーできます（実際には、コードの約150行の2つの関数serializeTypeNodeとserializeTypeListだけです）。

このサンプルクラスの場合、得られる結果は次のとおりです。

declare var decorator: any;

interface ISampleInterface {

}

enum Flags { One }
class OtherClass {}


type ArrayAlias = number[]

class Test {
    @decorator
    untypedProp; // no design:type
    @decorator
    nrProp: number // Number as expected
    @decorator
    strProp: string // String as expected
    @decorator
    boolProp: boolean // Boolean as expected

    @decorator
    nrPropUndefined: number | undefined // Number as expected
    @decorator
    strPropUndefined: string | undefined // String as expected
    @decorator
    boolPropUndefined: boolean | undefined // Boolean as expected

    @decorator
    arrayProp: number[]

    // Type references
    @decorator
    classRefProp: OtherClass; // OtherClass || Object  = Object since OtherClass is still a class at runtime

    @decorator
    interfaceRefProp: ISampleInterface;  // ISampleInterface || Object  = Object since ISampleInterface is undefined at runtime

    @decorator
    enumRefProp: Flags; // Flags || Object = Flags since Flags exists as a value at runtime, here TS would have written Number/String

    @decorator
    typeAliasProp: ArrayAlias; // ArrayAlias || Object = Object since ArrayAlias does not exist t runtime and in Babel swe have no idea ArrayAlias is actually an array

    @decorator
    selfClassRefProp: Test; // Test || Object  = Object since Babel puts decorators instantiation before class definition, this is a quirk, this may be fixable
}

実際のプラグインコードはそれほど大きくありません（TSバージョンからコピーされたメソッドを除いて）：

export default declare((api: typeof import('@babel/core'), { jsxPragma = "React" }): PluginObj => {
  api.assertVersion(7);

  return {
    name: "transform-TypeScript-decorator-metadata",
    inherits: syntaxTypeScript,

    visitor: {
      ClassDeclaration(path) {
        var node = path.node;
        for (const field of node.body.body) {
          if (field.type !== "ClassProperty") continue;

          if (field.typeAnnotation && field.typeAnnotation.type === "TSTypeAnnotation" && field.decorators && field.decorators.length > 0) {
            const key = field.key as t.Identifier;
            const serializedType = serializeTypeNode(field.typeAnnotation.typeAnnotation);
            field.decorators.Push(decorator(
              t.callExpression(
                t.memberExpression(t.identifier("Reflect"), t.identifier("metadata")), [
                  t.stringLiteral("design:type"),
                  t.logicalExpression("||", serializedType, createIdentifier("Object"))
                ])
            ))
          }
        }
      },
    }
  };
});

あなたは完全なプラグインコードと実用的なサンプルを見つけることができます ここ

一方で、プラグインの順序は重要です。@babel/plugin-proposal-class-propertiesがプラグインの前にある場合、すべてのプロパティが消去され、プラグインにはデコレータを発行するための情報がありません。これは私がテストした.babelrcであり、機能します。他の構成ではうまくいきませんでした（ただし、一生懸命に試したとは言えません）

  {
    "env": {},
    "ignore": [],
    "plugins": [
      "../plugin/plugin.js",
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }],
      "babel-plugin-transform-es2015-modules-commonjs"
    ],
    "presets": [
      "@babel/preset-TypeScript"
    ]
  }
9
Titian Cernicova-Dragomir

残念ながら、これがTypeScriptでBabelを使用する際の制限であると私はかなり確信しています。 Babelが行うことは、TypeScriptタイピングを単純に削除することです そして、コードをJavaScriptとして扱います 。つまり、バベルはあなたのことを気にしませんtsconfig.jsonまったく であり、したがってemitDecoratorMetadataでもありません。

そのため、残念ながら、デコレータメタデータが必要な場合は、tscを使用する必要があります。

4
Gustav Wengel