如何强类型化 SvelteKit 请求处理程序？

Question

我有一个独立的 sveltekit 端点，我没有为端点获取 typescript 类型。

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

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

request参数有一个any类型，函数本身有一个return类型的Promise<any>这不是我想要的。

我从 sveltekit 定义的类型中找到了，但我不确定如何实现它们。
import type {RequestHandler} from '@sveltejs/kit'

如何告诉 typescript post() 函数是 RequestHandler 类型？

此外，我的项目根目录中有一个自定义 tsconfig.json 文件，但即使我删除了它，我仍然无法正确输入端点函数。

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

Answer 1

我也在找同样的东西。我现在将采用以下解决方案：

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

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

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

Answer 2

generated-types 的 SvelteKit 文档中的示例适用于 JSDoc。使用打字稿，我们可以导入并应用类型 :-) 希望对您有所帮助！

// 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"
  }
}

如果您确定要使用某个函数，我认为它不会为您生成这些类型，所以您可以像这样输入它们。

// 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" }
}

如何强类型化 SvelteKit 请求处理程序？

How do I strongly type a SvelteKit Request Handler?

typescript

sveltekit