reactjs - React Vite Typescript 版本 5 無法使用新的裝飾器

我使用 Vite 創建了新的 React TypeScript 應用程式

我執行了 npm create vite@latest 然後選擇了 typescript-swc

• package.json 中的 Typescript 版本是 ^5.0.2
• node_modules/typescript/package.json 中的版本是 5.1.3
• 我的全球版本是 5.1.3

我不明白為什麼我不能使用新的裝飾器

function loggedMethod(originalMethod: any, context: ClassMethodDecoratorContext) {
  console.log(context)
  const methodName = String(context.name)
  function replacementMethod(this: any, ...args: any[]) {
      console.log(`LOG: Entering method '${methodName}'.`)
      const result = originalMethod.call(this, ...args)
      console.log(`LOG: Exiting method '${methodName}'.`)
      return result
  }
  return replacementMethod
}

class Person {
  name: string

  constructor(name: string) {
      this.name = name
  }

  @loggedMethod
  greet() {
      console.log(`Hello, my name is ${this.name}.`)
  }
}
const p = new Person('Ray')
p.greet()

這是我正在嘗試執行的程式碼

如果不在來自 @vitejs/plugin-react-swc 的 vite 配置插件中設置 tsDecorators: true，我無法執行這個。這是我唯一使用的插件，vite 配置中沒有其他內容。

console.log(context) 會將方法名稱 greet 記錄為字串，就像舊的裝飾器一樣，但它應該是物件。replacementMethod 根本不會被呼叫

我還沒有在 tsconfig.ts 中設置 experimentalDecorators

為什麼裝飾器的運作方式像版本4，而不是版本5？

答案＃1

Vite 使用 esbuild，而截至 18.17 版本的 esbuild 尚不支援編譯新的裝飾器格式。它可以讀取並理解這些裝飾器，但尚不知道如何為它們生成代碼。

所以如果你想在 esbuild 中使用裝飾器，你現在必須使用舊版本的裝飾器。（如果你想使用新裝飾器而不必等待 esbuild 升級，你就必須使用 babel 或 Typescript 來編譯你的代碼，而不是使用 esbuild。）