Component example code does not compile

[blackhypothesis]

Fedora release 40 (Forty)

$ uname -a
Linux perseus.luma 6.9.4-200.fc40.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Jun 12 13:33:34 UTC 2024 x86_64 GNU/Linux

$ tsc --version
Version 5.5.2
$ npm --version
10.5.0

$ npm install lit

added 6 packages in 716ms

first-componet.ts is the sourcecode from https://lit.dev/docs/components/overview/

$ tsc first-component.ts

first-component.ts:13:4 - error TS1240: Unable to resolve signature of property decorator when called as an expression.
No overload matches this call.
Overload 1 of 3, '(target: ClassAccessorDecoratorTarget<SimpleGreeting, string>, context: ClassAccessorDecoratorContext<SimpleGreeting, string>): ClassAccessorDecoratorResult<...>', gave the following error.
Argument of type 'ClassFieldDecoratorContext<SimpleGreeting, string> & { name: "name"; private: false; static: false; }' is not assignable to parameter of type 'ClassAccessorDecoratorContext<SimpleGreeting, string>'.
Types of property 'kind' are incompatible.
Type '"field"' is not assignable to type '"accessor"'.
Overload 2 of 3, '(target: (value: string) => void, context: ClassSetterDecoratorContext<SimpleGreeting, string>): (this: SimpleGreeting, value: string) => void', gave the following error.
Argument of type 'ClassFieldDecoratorContext<SimpleGreeting, string> & { name: "name"; private: false; static: false; }' is not assignable to parameter of type 'ClassSetterDecoratorContext<SimpleGreeting, string>'.
Types of property 'kind' are incompatible.
Type '"field"' is not assignable to type '"setter"'.
Overload 3 of 3, '(protoOrDescriptor: Object, name: PropertyKey, descriptor?: PropertyDescriptor): any', gave the following error.
Argument of type 'ClassFieldDecoratorContext<SimpleGreeting, string> & { name: "name"; private: false; static: false; }' is not assignable to parameter of type 'PropertyKey'.

13 @Property()
~~~~~~~~~~

first-component.ts:13:4 - error TS1270: Decorator function return type 'ClassAccessorDecoratorResult<SimpleGreeting, string>' is not assignable to type 'void | ((this: SimpleGreeting, value: string) => string)'.

13 @Property()
~~~~~~~~~~

node_modules/@lit/reactive-element/reactive-element.d.ts:128:31 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.

128 type PropertyDeclarationMap = Map<PropertyKey, PropertyDeclaration>;
~~~

node_modules/@lit/reactive-element/reactive-element.d.ts:140:80 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.

140 export type PropertyValues<T = any> = T extends object ? PropertyValueMap : Map<PropertyKey, unknown>;
~~~

node_modules/@lit/reactive-element/reactive-element.d.ts:144:46 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.

144 export interface PropertyValueMap extends Map<PropertyKey, unknown> {
~~~

node_modules/@lit/reactive-element/reactive-element.d.ts:170:30 - error TS2583: Cannot find name 'WeakMap'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.

170 var litPropertyMetadata: WeakMap<object, Map<PropertyKey, PropertyDeclaration>>;
~~~~~~~

node_modules/@lit/reactive-element/reactive-element.d.ts:170:46 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.

170 var litPropertyMetadata: WeakMap<object, Map<PropertyKey, PropertyDeclaration>>;
~~~

node_modules/@lit/reactive-element/reactive-element.d.ts:417:12 - error TS1166: A computed property name in a class property declaration must have a simple literal type or a 'unique symbol' type.

417 static [Symbol.metadata]: object & Record<PropertyKey, unknown>;
~~~~~~~~~~~~~~~~~

node_modules/@lit/reactive-element/reactive-element.d.ts:417:13 - error TS2585: 'Symbol' only refers to a type, but is being used as a value here. Do you need to change your target library? Try changing the 'lib' compiler option to es2015 or later.

417 static [Symbol.metadata]: object & Record<PropertyKey, unknown>;
~~~~~~

node_modules/lit-html/lit-html.d.ts:359:32 - error TS2583: Cannot find name 'Set'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.

359 _$disconnectableChildren?: Set;
~~~

node_modules/lit-html/lit-html.d.ts:546:47 - error TS2304: Cannot find name 'Iterable'.

546 _isIterable: (value: unknown) => value is Iterable;
~~~~~~~~

Found 11 errors in 3 files.

Errors Files
2 first-component.ts:13
7 node_modules/@lit/reactive-element/reactive-element.d.ts:128
2 node_modules/lit-html/lit-html.d.ts:359

[justinfagnani]

What does your tsconfig look like?

These are the type of errors you would see if you don't have the proper libraries configured, or decorators.

See this error in your output above:

Try changing the 'lib' compiler option to 'es2015' or later

These pages on out docs may be helpful:

• https://lit.dev/docs/components/decorators/#decorators-typescript
• https://lit.dev/docs/tools/requirements/