typescript - Hur typbestämmer jag starkt en SvelteKit Request Handler?


Jag har en fristående SvelteKit-endpunkt, och jag får inte TypeScript-typer för endpunkten.

// src/routes/login.ts
export async function post(request) {
  request.body; // shows as 'any' type

  return { status: 200, body: "ok" };
}

Argumentet request har typen any, och själva funktionen har en returtyp av Promise<any> vilket inte är vad jag vill.

Jag har hittat typer definierade av sveltekit, men jag är inte säker på hur jag ska implementera dem.
import type {RequestHandler} from '@sveltejs/kit'

Hur kan jag tala om för TypeScript att post()-funktionen är av typen RequestHandler?

Dessutom har jag en anpassad tsconfig.json-fil i roten av mitt projekt, men även när jag tar bort denna får jag fortfarande inte korrekta typningar av mina endpoint-funktioner.

// tsconfig.json
{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "$src/": ["src/"],
            "$src/*": ["src/*"]
        },
        "typeRoots": ["node_modules/@types", "src/types"]
    }
}

Svar #1

Jag sökte efter samma sak. Jag kommer att gå med följande lösning för nu:

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

export const post: RequestHandler = async ({ request }) => {
    request.body; // shows as 'ReadableStream<Uint8Array>' type

    return { status: 200, body: 'ok' };
};

Svar #2

Exemplet i SvelteKit-dokumentationen för genererade typer är för JSDoc. Med TypeScript kan vi bara importera och använda typen :-) Hoppas det hjälper!

// src/routes/login.ts
// Note we're importing the .d declaration file here
import type { RequestHandler } from './login.d' 

type Output = string // This will type your body
export const post: RequestHandler<Output> = async({ params }) => {
  return {
    status: 200,
    body: "ok"
  }
}

Om du verkligen vill använda en funktion tror jag inte att den kommer att generera dessa typer åt dig, så du skulle skriva dem så här.

// src/routes/login.ts
import type { RequestHandlerOutput } from '@sveltejs/kit'
import type { MaybePromise, RequestEvent } from '@sveltejs/kit/types/private';

// Type your respose body here
type GetOutput = {}
// Type your params here
interface GetParams extends Record<string, string> {}
function get(event: RequestEvent<GetParams>): MaybePromise<RequestHandlerOutput<GetOutput>> {
    
    return { status: 200 }
}

// Example using your post request

type PostOutput = string
// Type your params here
interface PostParams extends Record<string, string> {}
function post(event: RequestEvent<PostParams>): MaybePromise<RequestHandlerOutput<PostOutput>> {
    event.request.body; // shows as Body.body: ReadableStream<Uint8Array> | null

    return { status: 200, body: "ok" }
}

Relaterade artiklar