網站搜尋

node.js - Nodejs:在使用 TypeScript 裝飾器時出現無效或意外的標記


我當時正在使用 type-graphql 來創建一個簡單的 API。所以我創建了一個簡單的查詢,它之前運行得很好。

@Resolver()
class B {
  @Query({nullable: true})
  async a(@Arg("b", () => String) b: string) {

  }
}

但是當我在我的專案中整合 Babel 時,它開始拋出這個錯誤:

/Users/robot/Desktop/node-test/src/index.ts:37
      var _a = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(@(0, _typeGraphql.Arg)("b", function () {
                                                                                                        ^

SyntaxError: Invalid or unexpected token

.babelrc:

{
  "presets": [
    "@babel/preset-env", 
    "@babel/preset-typescript"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-typescript",
    "@babel/plugin-transform-runtime"
  ]
}

答案#1

除非你確定需要,否則嘗試從你的 .babelrc 中移除 {"legacy": true}。如果你確實需要它,根據 https://babeljs.io/docs/en/babel-plugin-proposal-decorators#legacy 的說明,將 {"legacy": true} 與 @babel/plugin-proposal-decorators 一起使用需要一些額外配置 :

在使用 legacy: true 模式時,必須啟用 setPublicClassFields 假設以支援 @babel/plugin-proposal-decorators。

他們提供的範例配置是

{
  "assumptions": {
    "setPublicClassFields": true
  },
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties"]
  ]
}

將這個範例應用到你的 .babelrc 將會改成如下所示。這能解決你的問題嗎?

{
  "assumptions": {
    "setPublicClassFields": true
  },
  "presets": [
    "@babel/preset-env", 
    "@babel/preset-typescript"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-typescript",
    "@babel/plugin-transform-runtime"
  ]
}