0 
import "reflect-metadata"

function validate(target: any) {
  let paramtypes = Reflect.getMetadata("design:paramtypes", target);
  console.log(paramtypes);  // undefined
}

@validate
class Log {
  constructor(public readonly xx: string) {}
}

打我启动服务器，打开网页发现paramtypes是未定义的

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": ["./src"]
}
4

1 回答 1

3

Vite 使用 tsconfig 中不支持"emitDecoratorMetadata"的 ESBuild，因为 ESBuild 没有实现自己的类型系统。有关此主题的更多详细信息，请参阅此vitejs/vite#788。

但是，有解决此问题的方法。我采用的一种方法是明确禁用 ESBuild 并改用 SWC。您可以在此演示中找到更多详细信息。这是它的 vite 配置文件：

import typescript from "@rollup/plugin-typescript";
import swc from "rollup-plugin-swc";

// import typescript from "rollup-plugin-typescript2";

export default defineConfig({
    plugins: [
        swc({
            jsc: {
                parser: {
                    syntax: "typescript",
                    // tsx: true, // If you use react
                    dynamicImport: true,
                    decorators: true,
                },
                target: "es2021",
                transform: {
                    decoratorMetadata: true,
                },
            },
        }),
    ],
    esbuild: false,
});

SWC 是 ESBuild 的快速替代方案，它实现了自己的类型系统，它可以毫无问题地发出装饰器元数据。

于 2021-07-29T06:03:12.907 回答