diff --git a/docs/content/2.concepts/3.typescript.md b/docs/content/2.concepts/3.typescript.md index ce643a1b43..d497648649 100644 --- a/docs/content/2.concepts/3.typescript.md +++ b/docs/content/2.concepts/3.typescript.md @@ -4,10 +4,21 @@ Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access t ## Auto-generated types -When you run `nuxi dev` or `nuxi build`, a `nuxt.d.ts` file will be auto-generated at the root of your project with the types of any modules you are using, as well as the key types that Nuxt 3 requires. Your IDE should recognise these types automatically. It is your choice whether to commit it to version control, but you shouldn't need to do so. +When you run `nuxi dev` or `nuxi build`, the following files are generated for IDE type support (and type-checking): + +### `.nuxt/nuxt.d.ts` + +This file contains the types of any modules you are using, as well as the key types that Nuxt 3 requires. Your IDE should recognise these types automatically. + +Some of the references in the file are to files that are only generated within your `buildDir` (`.nuxt`) and therefore for full typings, you will need to run `nuxi dev` or `nuxi build`. + +### `.nuxt/tsconfig.json` + +This file contains the recommended basic TypeScript configuration for your project, including resolved aliases injected by Nuxt or modules you are using, so you can get full type support and path auto-complete for aliases like `~/file` or `#build/file`. + +[Read more about how to extend this configuration](/docs/directory-structure/tsconfig). -Some of the references in the file are to files that are generated within your `buildDir` (`.nuxt`) and therefore for full typings, you will need to run `nuxi dev` to generate the directory. ::alert{icon=👉} -Nitro also [auto-generates types](/concepts/server-engine#typed-api-routes) for API routes. +Nitro also [auto-generates types](/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/directory-structure/composables), plus other core functionality. :: diff --git a/docs/content/3.docs/2.directory-structure/17.tsconfig.md b/docs/content/3.docs/2.directory-structure/17.tsconfig.md index bc3437e37c..8652885ae7 100644 --- a/docs/content/3.docs/2.directory-structure/17.tsconfig.md +++ b/docs/content/3.docs/2.directory-structure/17.tsconfig.md @@ -4,7 +4,7 @@ title: tsconfig.json head.title: TypeScript configuration file --- -Nuxt automatically generates a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults. You can benefit from this by creating a `tsconfig.json` in the root of your project with the following content: +Nuxt [automatically generates](/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults. You can benefit from this by creating a `tsconfig.json` in the root of your project with the following content: ```json { diff --git a/packages/nitro/src/build.ts b/packages/nitro/src/build.ts index 6d8ae28281..0397d4f9b7 100644 --- a/packages/nitro/src/build.ts +++ b/packages/nitro/src/build.ts @@ -74,6 +74,7 @@ async function writeTypes (nitroContext: NitroContext) { } const lines = [ + '// Generated by nitro', 'declare module \'@nuxt/nitro\' {', ' interface InternalApi {', ...Object.entries(routeTypes).map(([path, types]) => ` '${path}': ${types.join(' | ')}`), diff --git a/packages/nuxi/src/utils/prepare.ts b/packages/nuxi/src/utils/prepare.ts index 024407243d..f2a5010ab5 100644 --- a/packages/nuxi/src/utils/prepare.ts +++ b/packages/nuxi/src/utils/prepare.ts @@ -1,14 +1,11 @@ import { promises as fsp } from 'fs' -import { relative, resolve } from 'pathe' -import { cyan } from 'colorette' +import { join, relative, resolve } from 'pathe' import { Nuxt, TSReference } from '@nuxt/kit' import type { TSConfig } from 'pkg-types' -import consola from 'consola' import { getModulePaths, getNearestPackage } from './cjs' export const writeTypes = async (nuxt: Nuxt) => { const modulePaths = getModulePaths(nuxt.options.modulesDir) - const rootDir = nuxt.options.rootDir const tsConfig: TSConfig = { compilerOptions: { @@ -22,7 +19,12 @@ export const writeTypes = async (nuxt: Nuxt) => { types: ['node'], baseUrl: relative(nuxt.options.buildDir, nuxt.options.rootDir), paths: {} - } + }, + include: [ + './nuxt.d.ts', + join(relative(nuxt.options.buildDir, nuxt.options.rootDir), '**/*'), + ...nuxt.options.srcDir !== nuxt.options.rootDir ? [join(relative(nuxt.options.buildDir, nuxt.options.srcDir), '**/*')] : [] + ] } const aliases = { @@ -58,30 +60,27 @@ export const writeTypes = async (nuxt: Nuxt) => { await nuxt.callHook('builder:generateApp') await nuxt.callHook('prepare:types', { references, declarations, tsConfig }) - const declarationPath = resolve(`${rootDir}/nuxt.d.ts`) - const declaration = [ - '// This file is auto generated by `nuxt prepare`', - '// Please do not manually modify this file.', - '', ...references.map((ref) => { if ('path' in ref) { - ref.path = relative(rootDir, ref.path) + ref.path = relative(nuxt.options.buildDir, ref.path) } return `/// ` }), ...declarations, + '', 'export {}', '' ].join('\n') - await fsp.writeFile(declarationPath, declaration) - - consola.success('Generated', cyan(relative(process.cwd(), declarationPath))) - async function writeFile () { + const GeneratedBy = '// Generated by nuxi' + const tsConfigPath = resolve(nuxt.options.buildDir, 'tsconfig.json') - await fsp.writeFile(tsConfigPath, JSON.stringify(tsConfig, null, 2)) + await fsp.writeFile(tsConfigPath, GeneratedBy + '\n' + JSON.stringify(tsConfig, null, 2)) + + const declarationPath = resolve(nuxt.options.buildDir, 'nuxt.d.ts') + await fsp.writeFile(declarationPath, GeneratedBy + '\n' + declaration) } // This is needed for Nuxt 2 which clears the build directory again before building diff --git a/packages/nuxt3/src/app/composables/fetch.ts b/packages/nuxt3/src/app/composables/fetch.ts index ba8777be36..cc46595b48 100644 --- a/packages/nuxt3/src/app/composables/fetch.ts +++ b/packages/nuxt3/src/app/composables/fetch.ts @@ -1,11 +1,10 @@ import type { FetchOptions, FetchRequest } from 'ohmyfetch' -import type { $Fetch } from '@nuxt/nitro' +import type { TypedInternalResponse } from '@nuxt/nitro' import { murmurHashV3 } from 'murmurhash-es' import type { AsyncDataOptions, _Transform, KeyOfRes } from './asyncData' import { useAsyncData } from './asyncData' -export type Awaited = T extends Promise ? U : T -export type FetchResult = Awaited>> +export type FetchResult = TypedInternalResponse export type UseFetchOptions< DataT,