typescript - Hur fungerar @type import('./$types') kommentar-syntax i SvelteKit?

Jag lär mig för närvarande SvelteKit och stötte på lite kod vars syntax jag inte förstår.

I +page.server.ts förstår jag inte denna syntax:

/** @type {import('./$types').PageServerLoad} */

För mitt otränade öga ser det ut som om det bara är utkommenterat, men /** */ gör något som säkerställer att det fungerar. Ingen aning.

Svar #1

SvelteKit genererar en .svelte-kit-katalog varje gång du kör ett dev- eller build-kommando. I denna katalog finns många filer som genereras för prerendering och även typdefinitioner. Dessa definitioner ger dig autokomplettering och felkontroll i textredigerare som stöder TypeScript.

$types är en alias för motsvarande $types.d.ts typspecificeringsfil i .svelte-kit/types/src/routes/...-mappen.

Dessa typer kan importeras, så att din textredigerare kan förstå typerna för din load-funktion. Typerna kan importeras på två sätt:

A. JSDoc-kommentar + TypeScript-specifika importtyper

Låt oss säga att du har en page.server.ts-fil i filvägen src/routes/blog/[slug]. Detta ger dig autokomplettering och typkontroll på params-objektet som ses nedan.

/** @type {import('./$types').PageServerLoad} */
export const load = async ({ params }) => {
  params.slug // autocompletes, no error
  params.snail 
      // ^^^^^ error: Property 'snail' does not 
      //       exist on type 'RouteParams'
}

Detta ser ut som en vanlig JSDoc-kommentar men funktionen import() är specifik för TypeScript. Mer om det finns i TypeScript Handbook (tack till jonrsharpe för att ha nämnt länken).

JSDoc-kommentarer kan vara begränsade. Det verkar stödja annotering av moduler.

B. TypeScript-typanteckning

Om du använder TypeScript kan du också använda en annan syntax:

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params }) => {
  // ... 
}

Vidare läsning (om hur TypeScript integreras i textredigerare/IDE:er):

• https://github.com/sveltejs/language-tools
• https://github.com/typescript-language-server/typescript-language-server
• https://microsoft.github.io/language-server-protocol/