diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md index bbddd9b7..211c9d02 100644 --- a/src/pages/docs/resources/typescript.md +++ b/src/pages/docs/resources/typescript.md @@ -14,31 +14,40 @@ Greenwood provides built-in support for TypeScript, either through type-strippin ## Setup -The below steps will help you get up and running with TypeScript in your Greenwood project. The general recommendation is to use type-stripping during development for faster live reload, and then run TypeScript during CI (e.g. GitHub Actions) to check and enforce all types, e.g. `tsc --project tsconfig.json`. +The below steps will help you get up and running with TypeScript in your Greenwood project, and are the [same settings](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/init/src/template-base-ts/tsconfig.json) you'll get running [Greenwood's **init** package with TypeScript enabled](/docs/introduction/setup/#init). The general recommendation is to use type-stripping during development for faster live reload, and then run TypeScript during CI (e.g. GitHub Actions) to check and enforce all types, e.g. `tsc --project tsconfig.json`. 1. You will need to use Node **>= 22.6.0** and set the `--experimental-strip-types` flag 1. Install TypeScript into your project, e.g. `npm i typescript --save-dev` -1. Create a _tsconfig.json_ file at the root of your project with these minimum configuration settings. We recommend adding the [`erasableSyntaxOnly` setting](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) +1. Create a _tsconfig.json_ file at the root of your project with the below minimum configuration settings. +1. We also recommend additional configurations like [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) and [`erasableSyntaxOnly` setting](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) - - - + -```json -{ - "compilerOptions": { - "module": "preserve", - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "verbatimModuleSyntax": false, - "noEmit": true + + + ```json5 + { + "compilerOptions": { + // minimum required configuration + "target": "es2020", // needs to be at least >= es2015 for `class` support + "module": "preserve", + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "noEmit": true, + + // additional recommended configuration + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "verbatimModuleSyntax": true, + "erasableSyntaxOnly": true, + }, + + "exclude": ["./public/", "./greenwood/", "node_modules"], } -} -``` + ``` - + - + > _If you're feeling adventurous, you can use **>=23.x** and omit the `--experimental-strip-types` flag_. Keep an eye on [this PR](https://github.com/nodejs/node/pull/57298) for when unflagged type-stripping support may come to Node LTS **22.x**. 👀 @@ -66,6 +75,8 @@ In addition to being able to author your components, SSR pages, and API routes i +> We recommend putting the `type` on the outside of the braces to avoid [inadvertent bundling](https://github.com/ProjectEvergreen/greenwood/issues/1576) of the package your importing from. + See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript. ### Import Attributes