generated .../$types.d.ts has imports with '.ts'-extension which causes the new +page.server.ts/+page.svelte data prop to have type 'any'

[ollema]

update: see #5899 (comment) for the actual issue

---

Describe the bug

First off - maybe this is expected? But when I read:
https://kit.svelte.dev/docs/routing#$types

Throughout the examples above, we've been importing types from a $types.d.ts file. This is a file SvelteKit creates for you in a hidden directory if you're using TypeScript (or JavaScript with JSDoc type annotations) to give you type safety when working with your root files.

For example, annotating export let data with PageData (or LayoutData, for a +layout.svelte file) tells TypeScript that the type of data is whatever was returned from load:

I thought that the data prop would be fully typed!

With the +page.server.ts:

import type { PageServerLoad } from './$types';

import { getEvent } from '$lib/api';

export const load: PageServerLoad = async ({ params }) => {
	const { event, eventResponses } = await getEvent(params.id);

	return {
		event: event,
		eventResponses: eventResponses
	};
};

and +page.svelte:

<script lang="ts">
	import type { PageData } from './$types';

	export let data: PageData;
</script>

I expected data to have the type

data: {
    event: event,
    eventResponses: eventResponses
}

but instead, as noted earlier, I get data: any (hope you understand the notation used)

Reproduction

see the description

can also clone or checkout my repo:
https://github.com/ollema/sersophane/tree/b1380f17998c430e7f91404f92d6fed21e37c001/src/routes/events/%5Bid%5D

I think this is not super hard to reproduce - either it should happen for everyone OR I might have just misinterpreted the $types chapter

Logs

I get this "problem" from vscode when viewing /home/s0001325/work/sersophane/tsconfig.json:

[{
    "resource": "/home/s0001325/work/sersophane/tsconfig.json",
    "owner": "typescript",
    "severity": 8,
    "message": "Cannot write file '/home/s0001325/work/sersophane/src/routes/+page.js' because it would overwrite input file.",
    "source": "ts",
    "startLineNumber": 1,
    "startColumn": 1,
    "endLineNumber": 1,
    "endColumn": 2
}]

Tried restarting vscode, tried reinstalling packages etc. it is probably not related but it was not there before the migration. Who knows!

My tsconfig.json is very simple:

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true
	}
}

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
    Memory: 19.86 GB / 31.20 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v18.7.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
  npmPackages:
    @sveltejs/adapter-node: next => 1.0.0-next.86 
    @sveltejs/kit: next => 1.0.0-next.407 
    svelte: ^3.49.0 => 3.49.0 
    vite: ^3.0.7 => 3.0.7

Severity

annoyance

Additional Information

No response

[ollema]

(also, this post: #5774 (comment) in the migration guide refers to ServerLoad when it probably should refer to PageServerLoad)

[ollema]

it seems related to the file extensions used in the imports of the generated types in .svelte-kit.

currently, I have

import type * as Kit from '@sveltejs/kit';

interface RouteParams extends Partial<Record<string, string>> { id: string }

export type Errors = null;
export type PageData = Kit.AwaitedProperties<Awaited<ReturnType<typeof import('./proxy+page.server.ts').load>>>;
export type PageServerData = Kit.AwaitedProperties<Awaited<ReturnType<typeof import('./proxy+page.server.ts').load>>>;
export type PageServerLoad = Kit.ServerLoad<RouteParams, import('../../$types.js').LayoutServerData>;
export type Action = Kit.Action<RouteParams>

which gives me the warning:
An import path cannot end with a '.ts' extension. Consider importing './proxy+page.server.js' instead.

if I remove the .ts extension it works:

import type * as Kit from '@sveltejs/kit';

interface RouteParams extends Partial<Record<string, string>> { id: string }

export type Errors = null;
export type PageData = Kit.AwaitedProperties<Awaited<ReturnType<typeof import('./proxy+page.server').load>>>;
export type PageServerData = Kit.AwaitedProperties<Awaited<ReturnType<typeof import('./proxy+page.server').load>>>;
export type PageServerLoad = Kit.ServerLoad<RouteParams, import('../../$types.js').LayoutServerData>;
export type Action = Kit.Action<RouteParams>

and now data is typed!

---

could be related to this:

kit/packages/kit/src/core/sync/write_types.js

Lines 439 to 449 in b30d2b6

	if (proxy.modified) {
	const basename = path.basename(file_path);
	return `Kit.AwaitedProperties<Awaited<ReturnType<typeof import('./proxy${basename}').${method}>>>`;
	} else {
	// If the file wasn't tweaked, we can use the return type of the original file.
	// The advantage is that type updates are reflected without saving.
	return `Kit.AwaitedProperties<Awaited<ReturnType<typeof import("${path_to_original(
	outdir,
	file_path
	)}").${method}>>>`;
	}

[ollema]

@dummdidumm not sure if this is working as intended, I still get imports with the .ts extension.

tried to remove .svelte-kit, node_modules and pnpm_lock.yaml and did a clean install with pnpm install followed by pnpm run check and pnpm run build. not sure what triggers the creation of these files

[iceghost]

@ollema yes, the fix at #5907 missed the AwaitedProperties 😅 i think someone will get to it soon!