Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Include use of TS declare syntax #583

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Include use of TS declare syntax #583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6cd20f
docs: include use of TS declare syntax
KeithHenry Nov 2, 2021
c1bdb2e
docs: clarify version
KeithHenry Nov 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/lit-dev-content/site/docs/components/properties.md
View file
Open in desktop
Expand Up @@ -130,6 +130,8 @@ constructor() {

For **TypeScript**, you **may use class fields** for declaring reactive properties as long as the `useDefineForClassFields` setting in your `tsconfig` is set to `false`. Note, this is not required for some configurations of TypeScript, but it's recommended to explicitly set it to `false`.

For **TypeScript**, you can use `declare` syntax for class fields that you explicitly want to exclude from the JS output regardless of the `useDefineForClassFields` setting. This will allow you to use decorators, but cannot be initialised inline. Similar to JS declared fields can only be initialised in the `constructor`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this info was added at some point. It would be nice to get a link to https://www.typescriptlang.org/docs/handbook/2/classes.html#type-only-field-declarations in there though.


When compiling JavaScript with **Babel**, you **may use class fields** for declaring reactive properties as long as you set `setPublicClassFields` to `true` in the `assumptions` config of your `babelrc`. Note, for older versions of Babel, you also need to include the plugin `@babel/plugin-proposal-class-properties`:

```js
Expand Down
2 changes: 1 addition & 1 deletion packages/lit-dev-content/site/docs/tools/publishing.md
View file
Open in desktop
Expand Up @@ -51,7 +51,7 @@ The following JSON sample is a partial `tsconfig.json` that uses recommended opt
}
```

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

When compiling from TypeScript, you should include declaration files
(generated based on `declaration: true` above) for your component's types in the
Expand Down