typescript - როგორ აკეთებს @type import('./$types') კომენტარის სინტაქსი მუშაობას SvelteKit-ში?

ამჟამად ვსწავლობ SvelteKit-ს და შევხვდი კოდს, რომლის სინტაქსი ვერ გავიგე.

In +page.server.ts მე არ მესმის ეს სინტაქსი:

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

ჩემთვის, როგორც არაპროფესიონალი თვალისთვის, ეს ასე ჩანს, თითქოს უბრალოდ კომენტარებშია, მაგრამ /** */ აკეთებს რაღაცას, რაც უზრუნველყოფს, რომ მუშაობს. წარმოდგენა არ მაქვს.

პასუხი #1

SvelteKit ქმნის დირექტორიას .svelte-kit ყოველ ჯერზე, როდესაც მართავთ dev ან build ბრძანებას. ამ დირექტორიაში არის ბევრი ფაილი, რომელიც არის შექმნილი პრერენდერინგისთვის და ასევე ტიპის განსაზღვრებისთვის. ეს განსაზღვრები გაძლევენ ავტოავსების და შეცდომების შემოწმების შესაძლებლობას ტექსტური რედაქტორებში, რომლებიც მხარს უჭერენ TypeScript-ს.

$types არის ალიასი შესაბამის $types.d.ts ტიპის დეკლარაციის ფაილზე .svelte-kit/types/src/routes/... ფოლდერში.

ეს ტიპები შეგიძლიათ იმპორტოთ, რათა თქვენი ტექსტის რედაქტორი შეძლოს თქვენი load ფუნქციის ტიპების გაგება. ტიპების იმპორტი შესაძლებელია ორ გზით:

A. JSDoc კომენტარი + TypeScript-ს სპეციფიური იმპორტის ტიპები

ვთქვათ, თქვენ გაქვთ page.server.ts ფაილი ფაილის გზაზე src/routes/blog/[slug]. ეს გაძლევთ ავტომატურ დასრულებას და ტიპების შემოწმებას პარამების ობიექტზე, როგორც ეს მოცემულია ქვემოთ.

/** @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'
}

ეს გამოიყურება როგორც ჩვეულებრივი JSDoc კომენტარი, მაგრამ import() ფუნქცია სპეციფიკურია TypeScript-ისთვის. მეტი ამის შესახებ შეგიძლიათ იხილოთ TypeScript Handbook-ში (მადლობა jonrsharpe-ს ლინკის მითითებისთვის).

JSDoc კომენტარები შესაძლოა შეზღუდული იყოს. ჩანს, რომ ის მხარს უჭერს მოდულების ანოტაციას.

B. TypeScript-ის ტიპის ანოტაცია

თუ თქვენ იყენებთ TypeScript-ს, შეგიძლიათ გამოიყენოთ სხვა სინტაქსიც:

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

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

სხვა კითხვა (როგორ ინტეგრირდება TypeScript ტექსტურ რედაქტორებში/IDE-ებში):

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