首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带类型记录的元数据保留,Babel 7,Decorator

带类型记录的元数据保留,Babel 7,Decorator
EN

Stack Overflow用户
提问于 2018-10-26 20:23:51
回答 2查看 5K关注 0票数 17

我在使用TypeORM与Babel 7和类型记录,似乎元数据不存在于编译的代码中。对此能做些什么吗?或者这是使用Babel的限制吗?

误差

ColumnTypeUndefinedError: Photo#isPublished的列类型未定义,无法猜测。确保您打开了"emitDecoratorMetadata":tsconfig.json中的真选项。还要确保在应用程序的主条目文件(在导入任何实体之前)上导入了“反射-元数据”,您使用的是.If,而不是TypeScript,您必须显式地提供列类型。在新的ColumnTypeUndefinedError

Photo.js

代码语言:javascript
运行
复制
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'

@Entity()
export class Photo {

    @PrimaryGeneratedColumn()
    id: number


    @Column()
    isPublished: boolean
}

orm码

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
{
    "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"
    }
}

编辑:过了一段时间,我找到了另一个Babel插件,除了公认的答案中提到的那个:babel-插件-转换-类型记录-元数据似乎在使用TypeORM和Nest。

EN

回答 2

Stack Overflow用户

发布于 2019-01-25 07:16:45

开箱即用,这是不支持的,因为这是在另一个答案中指出的。然而,我们可以编写一个babel插件来使它工作。

编写代码并不是很复杂,问题来自于我们在babel中拥有的信息的局限性。Babel不对类型记录执行类型检查。这意味着我们没有任何语义信息,我们只有类型注释,以及我们可以从中得到什么信息。这意味着我们的解决方案必然是非常有限的。

限制:

  • 如果没有类型注释,我们就没有类型可写。
  • 如果我们有一个类型引用,我们只能使用类型名称,我们不能检查是否是一个接口,作为类型别名,类或枚举。在实践中,这意味着:
    • 如果类型是接口或类型别名,则在运行时类型名称将为undefined,为了避免未定义的type || Object,如果该类型没有关联的运行时值,则可以执行默认对象的type || Object操作。
    • 如果类型是枚举,类型记录将根据枚举的类型在元数据中写入NumberString。因为我们将类型名称写入元数据,这意味着您将在元数据中得到枚举的容器对象。

类型序列化可以通过最少的更改从类型记录编译器本身复制(它实际上只是两个函数serializeTypeNodeserializeTypeList,总共大约有150行代码)。

对于这个示例类,我们得到的结果如下:

代码语言:javascript
运行
复制
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版本复制的方法):

代码语言:javascript
运行
复制
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,它可以工作,我没有用任何其他的配置(但我不能说我试过那么努力)。

代码语言:javascript
运行
复制
  {
    "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"
    ]
  }
票数 14
EN

Stack Overflow用户

发布于 2018-12-25 09:07:06

不幸的是,我相当肯定这是使用Babel和类型记录的一个限制。巴贝尔所做的是,它只是简单地剥离打字稿的打字,,然后将代码视为JavaScript。。这意味着babel不关心您的tsconfig.json 完全没有,因此也不关心emitDecoratorMetadata

因此,不幸的是,如果您需要装饰元数据,您必须坚持使用tsc

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53015862

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档