fix(kit): improve defaults in generated tsconfig.json (#27485)

docs/1.getting-started/6.data-fetching.md

@@ -292,7 +292,7 @@ const { data, error, execute, refresh } = await useFetch('/api/users')
 <template>
   <div>
     <p>{{ data }}</p>
-    <button @click="refresh">Refresh data</button>
+    <button @click="() => refresh()">Refresh data</button>
   </div>
 </template>
 ```

packages/kit/src/template.ts

@@ -122,28 +122,44 @@ export async function _generateTypes (nuxt: Nuxt) {
       .map(m => getDirectory(m.entryPath)),
   )
 
+  // https://www.totaltypescript.com/tsconfig-cheat-sheet
   const tsConfig: TSConfig = defu(nuxt.options.typescript?.tsConfig, {
     compilerOptions: {
+      /* Base options: */
+      esModuleInterop: true,
+      skipLibCheck: true,
+      target: 'es2022',
+      allowJs: true,
+      resolveJsonModule: true,
+      moduleDetection: 'force',
+      isolatedModules: true,
+      verbatimModuleSyntax: true,
+      /* Strictness */
+      strict: nuxt.options.typescript?.strict ?? true,
+      noUncheckedIndexedAccess: nuxt.options.future?.compatibilityVersion === 4,
       forceConsistentCasingInFileNames: true,
+      noImplicitOverride: true,
+      /* If NOT transpiling with TypeScript: */
+      module: 'preserve',
+      noEmit: true,
+      /* If your code runs in the DOM: */
+      lib: [
+        'es2022',
+        'dom',
+        'dom.iterable',
+      ],
+      /* JSX support for Vue */
       jsx: 'preserve',
       jsxImportSource: 'vue',
-      target: 'ESNext',
+      /* remove auto-scanning for types */
-      module: 'ESNext',
-      moduleDetection: 'force',
-      moduleResolution: nuxt.options.future?.typescriptBundlerResolution || (nuxt.options.experimental as any)?.typescriptBundlerResolution ? 'Bundler' : 'Node',
-      skipLibCheck: true,
-      isolatedModules: true,
-      useDefineForClassFields: true,
-      strict: nuxt.options.typescript?.strict ?? true,
-      noImplicitThis: true,
-      esModuleInterop: true,
       types: [],
-      verbatimModuleSyntax: true,
+      /* add paths object for filling-in later */
-      allowJs: true,
-      noEmit: true,
-      resolveJsonModule: true,
-      allowSyntheticDefaultImports: true,
       paths: {},
+      /* Possibly consider removing the following in future */
+      moduleResolution: nuxt.options.future?.typescriptBundlerResolution || (nuxt.options.experimental as any)?.typescriptBundlerResolution ? 'Bundler' : 'Node', /* implied by module: preserve */
+      useDefineForClassFields: true, /* implied by target: es2022+ */
+      noImplicitThis: true, /* enabled with `strict` */
+      allowSyntheticDefaultImports: true,
     },
     include: [
       './nuxt.d.ts',

tsconfig.json

@@ -1,20 +1,29 @@
 {
+  // https://www.totaltypescript.com/tsconfig-cheat-sheet
   "compilerOptions": {
-    "forceConsistentCasingInFileNames": true,
+    /* Base options: */
-    "esModuleInterop": false,
+    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
-    "target": "ESNext",
+    "target": "es2022",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "strict": true,
-    "noImplicitAny": true,
     "allowJs": true,
-    "noEmit": true,
-    "noUnusedLocals": true,
     "resolveJsonModule": true,
-    "types": [
+    "moduleDetection": "force",
-      "node"
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    /* Strictness */
+    "strict": true,
+    // TODO: enable noUncheckedIndexedAccess
+    // "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    /* If NOT transpiling with TypeScript: */
+    "module": "preserve",
+    "noEmit": true,
+    /* If your code runs in the DOM: */
+    "lib": [
+      "es2022",
+      "dom",
+      "dom.iterable"
     ],
     "paths": {
       "#app": [