How to type the return value of SvelteKit endpoints?

[geoffrich]

I get a TypeScript error on a lot of my SvelteKit endpoints and I'm not sure the best way to resolve it. The root issue seems to be around how the body is typed. Any tips? The endpoint works, only TypeScript complains.

// test.json.ts
import type { RequestHandler } from '@sveltejs/kit';

interface TestResponse {
	greeting: string;
}

export const get: RequestHandler = async function ({ query }) {
	const name = query.get('name');
	const obj: TestResponse = {
		greeting: `Hello ${name}`
	};

	return {
		body: obj
	};
};

Error:

Type '({ query }: ServerRequest<Record<string, any>, unknown>) => Promise<{ body: TestResponse; }>' is not assignable to type 'RequestHandler<Record<string, any>, unknown, DefaultBody>'.
  Type 'Promise<{ body: TestResponse; }>' is not assignable to type 'MaybePromise<void | EndpointOutput<DefaultBody>>'.
    Type 'Promise<{ body: TestResponse; }>' is not assignable to type 'Promise<void | EndpointOutput<DefaultBody>>'.
      Type '{ body: TestResponse; }' is not assignable to type 'void | EndpointOutput<DefaultBody>'.
        Type '{ body: TestResponse; }' is not assignable to type 'EndpointOutput<DefaultBody>'.
          Types of property 'body' are incompatible.
            Type 'TestResponse' is not assignable to type 'DefaultBody'.
              Type 'TestResponse' is not assignable to type '{ [key: string]: JSONString; }'.
                Index signature for type 'string' is missing in type 'TestResponse'.ts(2322)

I've tried specifying the Body type explicitly, but I still get an error.

export const get: RequestHandler<Record<string, any>, unknown, TestResponse>

Type 'TestResponse' does not satisfy the constraint 'DefaultBody'.
  Type 'TestResponse' is not assignable to type '{ [key: string]: JSONString; }'.
    Index signature for type 'string' is missing in type 'TestResponse'.ts(2344)

I'm not sure the best way to make my TestResponse satisfy the constraint on the body.

[CaptainCodeman]

My take on this is that the endpoint returns either a byte array or a JSONString, which itself is a simple JSON value or an object containing other JSON values as per https://github.com/sveltejs/kit/blob/master/packages/kit/types/helper.d.ts#L13

Whatever body property you return has to be assignable to such.

I guess it then comes down to what exactly you are testing and whether you trust that the JSON serialization "just works" or want to test that your type can be converted to a POJO, in which case that could be done separate to the endpoint test. Another alternative is to check that the serialized output can be correctly deserialized to match the data expected.

I'm always wary of "testing types" unless I'm specifically using something like dtslint, as the whole point of TS is usually to add that safety into the compiler. So any serialization testing (going from typed to untyped) can focus instead of whether it can be round-tripped without losing anything to verify correct behavior.

[geoffrich]

Sorry, I think the name "TestResponse" was a poor choice on my part. I'm not testing anything here, just setting up a SK endpoint with TypeScript. I'm trying to do two things:

1. Specify the type of the get handler so that I get autocomplete and type safety on the function parameters (e.g. I see the params, query, etc. that SvelteKit is passing and they have the correct types)
2. Return a custom JS object (that only uses serializable types) from the endpoint

I can't figure out how to do this without getting a TS error.

Here's my sample route from above with all references to "Test" removed.

import type { RequestHandler } from '@sveltejs/kit';

interface SampleResponse {
	greeting: string;
}

export const get: RequestHandler = async function ({ query }) {
	const name = query.get('name');
	const obj: SampleResponse = {
		greeting: `Hello ${name}`
	};

	return {
		body: obj
	};
};

[CaptainCodeman]

This is a little more verbose, but let's you set the return type without TS complaining:

import type { RequestHandler } from '@sveltejs/kit';

interface SampleResponse {
	greeting: string;
}

type SampleResponseType = { [P in keyof SampleResponse]: SampleResponse[P] }

export const get: RequestHandler<any, unknown, SampleResponseType> = async function ({ query }) {
	const name = query.get('name');
	const obj: SampleResponse = {
		greeting: `Hello ${name}`,
	};

	return {
		body: obj
	};
};

(you could probably make the SampleResponseType take a generic so it's reusuable for all types)

[geoffrich]

Thanks for the suggestion! Though TypeScript started showing errors when I added a nested object into the structure, e.g.

interface SampleResponse {
	greeting: string;
	another: Another;
}

interface Another {
    something: string;
}

Ignatius's suggestion below ended up being what I was looking for.

import type { RequestHandler } from '@sveltejs/kit';

interface SampleResponse {
	greeting: string;
	another: Another;
}

interface Another {
    something: string;
}

type Typify<T> = { [K in keyof T]: Typify<T[K]> };

export const get: RequestHandler = async function ({ query }) {
	const name = query.get('name');
	const obj: Typify<SampleResponse> = {
		greeting: `Hello ${name}`,
		another: {
			something: 'test'
		}
	};

	return {
		body: obj
	};
};

[ignatiusmb]

You will need to trick TS with a wrapper, please see #1997 (comment) for more details

[geoffrich]

This is exactly what I was looking for, thanks!