Component example code does not compile
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 142
- Forks
- 230
- PR merge metrics
- No merged PRs in 30d
Description
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, context: ClassAccessorDecoratorContext): ClassAccessorDecoratorResult<...>', gave the following error.
Argument of type 'ClassFieldDecoratorContext & { name: "name"; private: false; static: false; }' is not assignable to parameter of type 'ClassAccessorDecoratorContext'.
Types of property 'kind' are incompatible.
Type '"field"' is not assignable to type '"accessor"'.
Overload 2 of 3, '(target: (value: string) => void, context: ClassSetterDecoratorContext): (this: SimpleGreeting, value: string) => void', gave the following error.
Argument of type 'ClassFieldDecoratorContext & { name: "name"; private: false; static: false; }' is not assignable to parameter of type 'ClassSetterDecoratorContext'.
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 & { 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' 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;
~~~
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 extends object ? PropertyValueMap : Map;
~~~
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 {
~~~
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>;
~~~~~~~
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>;
~~~
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;
~~~~~~~~~~~~~~~~~
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;
~~~~~~
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the component example at https://lit.dev/docs/components/overview/ and reproduce the reported `tsc first-component.ts` command using the listed TypeScript and npm versions. Check the example and its TypeScript configuration or dependency expectations; done means the documented example compiles without the reported decorator and standard-library errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- documentation
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100