From eafaecffd52be655ac3d492b7fe5af401d034fda Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Tue, 17 Jun 2025 20:08:30 -0400 Subject: [PATCH 1/6] recommend minimum target setting in tsconfig.json --- src/pages/docs/resources/typescript.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md index bbddd9b7..3b158908 100644 --- a/src/pages/docs/resources/typescript.md +++ b/src/pages/docs/resources/typescript.md @@ -18,7 +18,7 @@ The below steps will help you get up and running with TypeScript in your Greenwo 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 these minimum configuration settings. We also recommend adding the [`erasableSyntaxOnly` setting](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) @@ -27,6 +27,7 @@ The below steps will help you get up and running with TypeScript in your Greenwo ```json { "compilerOptions": { + "target": "es2015", "module": "preserve", "moduleResolution": "bundler", "allowImportingTsExtensions": true, From 72f45e943c30f0b03cd0b3b31f083a4a8d01a531 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 1 Sep 2025 15:10:03 -0400 Subject: [PATCH 2/6] latest configuration recommendations --- src/pages/docs/resources/typescript.md | 30 ++++++++++++++++---------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md index 3b158908..2f676c1b 100644 --- a/src/pages/docs/resources/typescript.md +++ b/src/pages/docs/resources/typescript.md @@ -14,26 +14,34 @@ 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 also 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 +```json5 { - "compilerOptions": { - "target": "es2015", - "module": "preserve", - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "verbatimModuleSyntax": false, - "noEmit": true - } + compilerOptions: { + // minimum required configuration + target: "es2020", + 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"], } ``` From ae6fee15762b0cfde79fa19df177ac301681ce03 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 1 Sep 2025 15:14:44 -0400 Subject: [PATCH 3/6] fix formatting --- src/pages/docs/resources/typescript.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md index 2f676c1b..2b23dcd3 100644 --- a/src/pages/docs/resources/typescript.md +++ b/src/pages/docs/resources/typescript.md @@ -21,9 +21,9 @@ The below steps will help you get up and running with TypeScript in your Greenwo 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) - + - + ```json5 { @@ -45,9 +45,9 @@ The below steps will help you get up and running with TypeScript in your Greenwo } ``` - + - + > _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**. 👀 From b33d5e798861b2597bcabf4f74a1551018d22f3e Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Mon, 1 Sep 2025 15:15:50 -0400 Subject: [PATCH 4/6] fix formatting --- src/pages/docs/resources/typescript.md | 38 +++++++++++++------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md index 2b23dcd3..d1ea0d0f 100644 --- a/src/pages/docs/resources/typescript.md +++ b/src/pages/docs/resources/typescript.md @@ -25,25 +25,25 @@ The below steps will help you get up and running with TypeScript in your Greenwo -```json5 -{ - compilerOptions: { - // minimum required configuration - target: "es2020", - 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"], -} -``` + ```json5 + { + compilerOptions: { + // minimum required configuration + target: "es2020", + 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"], + } + ``` From 98823a459220b3c371741b49a53f0602fb67ac17 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 6 Sep 2025 09:19:22 -0400 Subject: [PATCH 5/6] quote keys in tsconfig --- src/pages/docs/resources/typescript.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md index d1ea0d0f..bdbf28cb 100644 --- a/src/pages/docs/resources/typescript.md +++ b/src/pages/docs/resources/typescript.md @@ -27,21 +27,21 @@ The below steps will help you get up and running with TypeScript in your Greenwo ```json5 { - compilerOptions: { + "compilerOptions": { // minimum required configuration - target: "es2020", - module: "preserve", - moduleResolution: "bundler", - allowImportingTsExtensions: true, - noEmit: true, + "target": "es2020", + "module": "preserve", + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "noEmit": true, // additional recommended configuration - lib: ["ES2020", "DOM", "DOM.Iterable"], - verbatimModuleSyntax: true, - erasableSyntaxOnly: true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "verbatimModuleSyntax": true, + "erasableSyntaxOnly": true, }, - exclude: ["./public/", "./greenwood/", "node_modules"], + "exclude": ["./public/", "./greenwood/", "node_modules"], } ``` From 09a91cddcac2b09b7944f99c5ba809d3892b9f7f Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 13 Sep 2025 19:49:09 -0400 Subject: [PATCH 6/6] type import recommendations --- src/pages/docs/resources/typescript.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md index bdbf28cb..211c9d02 100644 --- a/src/pages/docs/resources/typescript.md +++ b/src/pages/docs/resources/typescript.md @@ -29,7 +29,7 @@ The below steps will help you get up and running with TypeScript in your Greenwo { "compilerOptions": { // minimum required configuration - "target": "es2020", + "target": "es2020", // needs to be at least >= es2015 for `class` support "module": "preserve", "moduleResolution": "bundler", "allowImportingTsExtensions": true, @@ -75,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