TypeScript 'declare' 字段必须先由@babel/plugin-transform-typescript 转换

Question

尝试构建我的 React 应用程序时，出现 TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript. 错误。但是我不明白为什么，因为我用的是@babel/preset-typescript。我该如何解决这个错误？

//craco.config.js
const path = require("path");
const CracoAlias = require("craco-alias");

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            type: "javascript/auto",
            test: /\.mjs$/,
            include: /node_modules/,
          },
        ],
      },
    },
  },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src",
        tsConfigPath: "./tsconfig.path.json",
      },
    },
  ],
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  babel: {
    presets: [
      "@babel/preset-typescript",
      "@babel/preset-react",
      "@babel/preset-env",
    ],
    plugins: [["glsl", {"loose": true}]],
  },
};

完整的错误说明：

TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript.
If you have already enabled that plugin (or '@babel/preset-typescript'), make sure that it runs before any plugin related to additional class features:
 - @babel/plugin-proposal-class-properties
 - @babel/plugin-proposal-private-methods
 - @babel/plugin-proposal-decorators

这是有问题的 class：

declare class OrbitControlsImpl extends EventDispatcher {
  minX: number;
  maxX: number;
  object: Camera;
  domElement: HTMLElement | undefined;
  enabled: boolean;
  target: Vector3;
  minDistance: number;
  maxDistance: number;
  minZoom: number;
  maxZoom: number;
  minPolarAngle: number;
  maxPolarAngle: number;
  minAzimuthAngle: number;
  maxAzimuthAngle: number;
  enableDamping: boolean;
  dampingFactor: number;
  enableZoom: boolean;
  zoomSpeed: number;
  enableRotate: boolean;
  rotateSpeed: number;
  enablePan: boolean;
  panSpeed: number;
  screenSpacePanning: boolean;
  keyPanSpeed: number;
  autoRotate: boolean;
  autoRotateSpeed: number;
  keys: {
    LEFT: string;
    UP: string;
    RIGHT: string;
    BOTTOM: string;
  };
  mouseButtons: {
    LEFT: MOUSE;
    MIDDLE: MOUSE;
    RIGHT: MOUSE;
  };
  touches: {
    ONE: TOUCH;
    TWO: TOUCH;
  };
  target0: Vector3;
  position0: Vector3;
  zoom0: number;
  _domElementKeyEvents: any;
  getPolarAngle: () => number;
  getAzimuthalAngle: () => number;
  setPolarAngle: (x: number) => void;
  setAzimuthalAngle: (x: number) => void;
  getDistance: () => number;
  listenToKeyEvents: (domElement: HTMLElement) => void;
  saveState: () => void;
  reset: () => void;
  update: () => void;
  connect: (domElement: HTMLElement) => void;
  dispose: () => void;
  constructor(object: Camera, domElement?: HTMLElement);
}

Answer 1

我将我的 React Native 项目升级到 0.64.2 时遇到了同样的错误。要修复它，我必须按如下方式更改 babel.config.js 文件：

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    ['@babel/preset-typescript', {allowDeclareFields: true}],
  ],
};

我猜在你的 craco.config.js 中这会映射到以下内容（虽然我不知道 craco 是什么，所以只是基于与 babel.config.js 的相似性的猜测）：

    presets: [
      ["@babel/preset-typescript", {allowDeclareFields: true}],
      "@babel/preset-react",
      "@babel/preset-env",
    ],
  },

TypeScript 'declare' 字段必须先由@babel/plugin-transform-typescript 转换

TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript

babeljs