Skip to content

Commit

Permalink
Add more details to the TypeScript docs (#1346)
Browse files Browse the repository at this point in the history
  • Loading branch information
justinfagnani authored Jul 2, 2024
1 parent 9db43a0 commit 24f0803
Showing 1 changed file with 17 additions and 2 deletions.
19 changes: 17 additions & 2 deletions packages/lit-dev-content/site/docs/v3/tools/development.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,12 +202,23 @@ For full installation and usage instructions, see the [Web Dev Server documentat

## TypeScript { #typescript }

TypeScript extends the Javascript language by adding support for types. Types are useful for catching errors early and making code more readable and understandable.
Lit support developing components in TypeScript, including full type declarations for the Lit APIs, standard and experimental decorators, and community tools for template type-checking and linting.

Because Lit is just a library, and doesn't require a compiler or use non-standard langauge syntax, there are no specific TypeScript tools that are required. Lit works with the official TypeScript compiler, `tsc`, with TypeScript wrappers such as those for Rollup, Vite, or Webpack, and alternate compilers like `esbuild`.

The main requirements of a TypeScript project are:
- Enabling a modern JavaScript language level, like with the `"ES2021"` [lib](https://www.typescriptlang.org/tsconfig/#lib).
- Enabling the DOM types with the `"DOM"` [lib](https://www.typescriptlang.org/tsconfig/#lib).
- Optionally [enabling experimental decorators](https://www.typescriptlang.org/tsconfig/#experimentalDecorators) and [disabling "define" semantics for class fields](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields), if you choose to use TypeScript's experimental decorators.

These options are generally set in your project's tsconfig.

### Installation

To install TypeScript in your project:

```bash
npm install typescript --save-dev
npm i -D typescript
```

To build the code:
Expand All @@ -218,6 +229,10 @@ npx tsc --watch

For full installation and usage instructions, see the [TypeScript site](https://www.typescriptlang.org/). To get started, the sections on [installing TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html) and [using its features](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) are particularly helpful.

### Decorators

TypeScript supports two versions of decorators: experimental and standard. See our [Decorators](/docs/v3/components/decorators/#decorators-typescript) documentation for more information.

## JavaScript and TypeScript linting { #linting }

Linting can help catch errors in your code. We recommend using [ESLint](https://eslint.org) for linting Lit code.
Expand Down

0 comments on commit 24f0803

Please sign in to comment.