Lit+TypeScriptでデコレーターのエラーが出るときの対処法

Litの公式チュートリアルにあるコードを書いていると、デコレーター部分に次のようなエラーが表示されます。これは、チュートリアルではなく自分で書いたコードでも、同様にエラーが表示されます。

式として呼び出される場合、クラス デコレーターのシグネチャを解決できません。
The runtime will invoke the decorator with 2 arguments, but the decorator expects 1.

このエラーを解決するには、チュートリアルとは別のページに記載されている手順を実行する必要があります。一応公式ドキュメントですが、チュートリアルに書いておいて欲しいですね。

• Decorators – Lit

To use decorators with TypeScript, enable the experimentalDecorators compiler option.

You should also ensure that the useDefineForClassFields setting is false. Note, this should only be required when the target is set to esnext or greater, but it's recommended to explicitly ensure this setting is false.

"experimentalDecorators": true,
"useDefineForClassFields": false,

Enabling emitDecoratorMetadata is not required and not recommended.

つまり、TypeScriptの設定でexperimentalDecoratorsをtrueに設定し、useDefineForClassFieldsをfalseに設定するということです。後者の設定は必須ではなく、targetがesnext以降に設定されている場合にのみ必須ですが、明示的にfalseにすることが推奨されています。

これらの設定を変更すると、画像のように、エラーが出なくなりました。