TypeScript load function example

[benblazak]

Describe the problem

It took me a long time to figure out how to write a TypeScript load function for __error.svelte

Describe the proposed solution

Include an example :)

import type { ErrorLoadInput, LoadOutput } from "@sveltejs/kit";
export async function load({
  error,
  status,
}: ErrorLoadInput): Promise<LoadOutput> {
  return {
    props: {
      title: `${status}: ${error.message}`,
      stack: error.stack,
    },
  };
}

Alternatives considered

Don't include an example :(

Importance

nice to have

Additional Information

No response

[JeanJPNM]

You can import the Load type:

import type { Load } from "@sveltejs/kit"

export const load: Load = ({ error, status }) => ({
  props: {
    title: `${status}: ${error.message}`,
    stack: error.stack,
  }
})

But I agree that there should be an example for this.

[benblazak]

that's much nicer -- thanks :)

tried it just now. using Load compiled and ran fine, but failed svelte-check. had to use ErrorLoad.

import type { ErrorLoad } from "@sveltejs/kit";
export const load: ErrorLoad = ({ error, status }) => ({
  props: {
    title: `${status}: ${error.message}`,
    stack: error.stack,
  },
});

@benmccann do you guys like pull requests for things this small?

if so, is there support for code tabs in the sveltekit docs, or should i just write it after the javascript version in https://kit.svelte.dev/docs#layouts-error-pages?

[bluwy]

if so, is there support for code tabs in the sveltekit docs, or should i just write it after the javascript version in https://kit.svelte.dev/docs#layouts-error-pages?

Feel free to open a PR for the javascript version on that section! Seems to be lacking the jsdoc typings in the code block example. I'm not sure if we'd want a typescript version soon (not my call), but a javascript version is a good start.

[benblazak]

So just adding this on top?

/**
 * @type {import('@sveltejs/kit').ErrorLoad}
 */

I can add that if it's helpful :)

In that case, should we also add ErrorLoadInput to the list of types in the "Loading" section just below?

export interface ErrorLoadInput<
	PageParams extends Rec<string> = Rec<string>,
	Stuff extends Rec = Rec,
	Session = any
> extends LoadInput<PageParams, Stuff, Session> {
	status?: number;
	error?: Error;
}

Perhaps with a link to the code https://github.com/sveltejs/kit/blob/master/packages/kit/types/page.d.ts#L21

Though, from the perspective of someone new to both Svelte and Typescript, I still wouldn't have known how to translate the jsdoc typing into a typescript type import + function, and testing just now it appears to pass svelte-check even when it's wrong.

[bluwy]

This got lost in my notifications 😅

So just adding this on top?

Yep!

In that case, should we also add ErrorLoadInput to the list of types in the "Loading" section just below?

I think having them in the "Error pages" may be easier to follow. Don't think a link to the code is needed though, to keep it consistent with the "Loading" section.

Though, from the perspective of someone new to both Svelte and Typescript, I still wouldn't have known how to translate the jsdoc typing into a typescript type import + function, and testing just now it appears to pass svelte-check even when it's wrong.

For now SvelteKit is going full on jsdoc so a typescript version would clutter up the docs. Maybe in the future though if we implement a sort of language toggle.

[benblazak]

Kay!

I think having them in the "Error pages" may be easier to follow.

Mmm, makes sense.

For now SvelteKit is going full on jsdoc so a typescript version would clutter up the docs. Maybe in the future though if we implement a sort of language toggle.

Ahh, I understand. Too bad though, for newbies like me trying to pick up TypeScript at the same time.

---

Created a pull request.

Feel free to close this issue -- and open a new one for TypeScript examples in general, or not. Leaving it open so you all can decide how to track. Thanks!

[sebastianrothe]

Works fine, even with the latest change #4160

[frederikhors]

Yeah. It works but I think we should add some docs for Typescript. Not only for javascript.

[sebastianrothe]

True, because the example is burried here :)

[bewards]

I am trying to use the generated-types from documentation, but I'm still getting any type for everything, including the parameters:

My route svelte file (hovering over Load shows any type):

The generated route type file:

I am using the default latest sveltekit + typescript application.

tsconfig.json

{
	"extends": "./.svelte-kit/tsconfig.json"
}

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import path from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {

	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess({
		postcss: true,
	}),

	kit: {
		adapter: adapter(),
		vite: {
			resolve: {
				alias: {
					$components: path.resolve('./src/lib/components'),
					$stores: path.resolve('./src/lib/stores'),
					// $lib: path.resolve('./src/lib'),
				},
			},
		},
	},

	babel: {
		presets: [
			[
				'@babel/preset-env',
				{
					loose: true,
					modules: false, // No need for babel to resolve modules
					targets: {
						esmodules: true, // ! Very important. Target es6+
					},
				},
			],
		],
	},
};

export default config;