docs: #219 updated recommend tsconfig.json settings

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)
 
-  <!-- prettier-ignore-start -->
-
-  <app-ctc-block variant="snippet" heading="tsconfig.json">
+<!-- prettier-ignore-start -->
 
-```json
-{
-  "compilerOptions": {
-    "module": "preserve",
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": false,
-    "noEmit": true
+<app-ctc-block variant="snippet" heading="tsconfig.json">
+
+  ```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"],
   }
-}
-```
+  ```
 
-  </app-ctc-block>
+</app-ctc-block>
 
-  <!-- prettier-ignore-end -->
+<!-- prettier-ignore-end -->
 
 > _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
 
 <!-- prettier-ignore-end -->
 
+> 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