如何强输入 SvelteKit 请求处理程序？答案

【问题标题】：How do I strongly type a SvelteKit Request Handler?如何强输入 SvelteKit 请求处理程序？
【发布时间】：2022-07-01 02:58:13
【问题描述】：

我有一个独立的 sveltekit 端点，但我没有得到端点的打字稿类型。

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

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

request 参数的类型为 any，而函数本身的返回类型为 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"]
    }
}

【问题讨论】：

标签： typescript sveltekit

【解决方案1】：

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

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

【讨论】：

如您所见，动态导入生成的类型当然更容易/更少代码:-)
感谢您的示例！我想知道如何获取请求的标头（例如这里kit.svelte.dev/docs/web-standards#fetch-apis-headers）。我找不到合适的类型
好吧，我的错。简单地使用例如 event.request.headers.get('User-Agent') 效果很好。

【解决方案2】：

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

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

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

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

【讨论】：

我明白了。不过我想使用function关键字，所以如果抛出错误，堆栈跟踪将显示函数名而不是匿名函数。

【解决方案3】：

这是对@zeekrey 答案的跟进。如何从流ReadableStream<Uint8Array>中获取字符串？

【讨论】：