با پاشیدن یادداشت‌های نوع در برنامه‌های SvelteKit خود، می‌توانید ایمنی کاملی از نوع در وب داشته باشید – data در صفحه شما نوعی وجود دارد که از مقادیر بازگشتی استنباط می شود load توابعی که این داده ها را بدون نیاز به اعلام صریح چیزی تولید کردند. این یکی از آن چیزهایی است که شما تعجب می کنید که چگونه بدون آن زندگی کرده اید.
اما اگر حتی به حاشیه نویسی ها نیازی نداشته باشیم چه؟ از آنجایی که load و data بخشی از چارچوب هستند، آیا فریمورک نمی تواند آنها را برای ما وارد کند؟ به هر حال، کامپیوترها برای این کار هستند – انجام کارهای خسته کننده تا بتوانیم روی چیزهای خلاقانه تمرکز کنیم.
از امروز، بله: می تواند.
اگر از VSCode استفاده می کنید، فقط افزونه Svelte را به آخرین نسخه ارتقا دهید و هرگز مجبور نخواهید بود که نظر خود را اعلام کنید. load توابع یا data دوباره لوازم برنامه‌های افزودنی برای ویرایشگرهای دیگر نیز می‌توانند از این ویژگی استفاده کنند تا زمانی که از پروتکل زبان سرور و افزونه‌های TypeScript پشتیبانی می‌کنند. حتی با آخرین نسخه ابزار تشخیصی CLI ما کار می کند svelte-check!
قبل از غواصی، اجازه دهید نحوه عملکرد ایمنی نوع در SvelteKit را خلاصه کنیم.
انواع تولید شده
در SvelteKit، داده‌های یک صفحه را در a دریافت می‌کنید load تابع شما توانست با استفاده از رویداد وارد شوید ServerLoadEvent از @sveltejs/kit:
src/routes/blog/[slug]/+page.server
import type { ServerLoadEventاین کار می کند، اما ما می توانیم بهتر انجام دهیم. توجه داشته باشید که ما به طور تصادفی تایپ کردیم event.params.post، حتی اگر پارامتر فراخوانی شود slug (چون [slug] در نام فایل) و نه post. می توانید بنویسید params خود را با افزودن یک استدلال مشترک به ServerLoadEvent، اما این شکننده است.
این جایی است که تولید نوع خودکار ما وارد می شود. هر فهرست مسیر دارای یک مخفی است $types.d.ts فایل با انواع مسیر خاص:
src/routes/blog/[slug]/+page.server
import type { ServerLoadEvent } from '@sveltejs/kit';
import type { PageServerLoadEventاین اشتباه تایپی ما را آشکار می کند زیرا اکنون خطاهایی در آن وجود دارد params.post دسترسی به ملک علاوه بر محدود کردن انواع پارامتر، انواع for را نیز محدود می کند await event.parent() و در data از سرور منتقل شد load عملکرد به جهانی load تابع توجه کنید که ما اکنون استفاده می کنیم PageServerLoadEvent، برای تشخیص آن از LayoutServerLoadEvent.
هنگامی که ما داده های خود را بارگذاری کردیم، می خواهیم آنها را در خود نمایش دهیم +page.svelte. مکانیسم تولید همان نوع تضمین می کند که نوع data درست است:
src/routes/blog/[slug]/+صفحه
script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
script>
h1>{data.post.title}h1>
div>{@html data.post.content}div>فایل های مجازی
هنگامی که سرور توسعه یا ساخت را راه اندازی می کنید، انواع به طور خودکار تولید می شوند. به لطف مسیریابی مبتنی بر سیستم فایل، SvelteKit می تواند مواردی مانند پارامترهای صحیح یا داده های والد را با پیمایش درخت مسیر استنباط کند. نتیجه در یک خروجی است $types.d.ts برای هر مسیری که چیزی شبیه به این است پرونده کنید:
$types.d
import type * as Kit from '@sveltejs/kit';
type RouteParams = { slug: string };
type RouteId = '/blog/[slug]';
type PageParentData = {};
export type PageServerLoadما واقعاً نمی نویسیم $types.d.ts در مال شما src دایرکتوری – این گیج کننده خواهد بود و هیچ کس کدهای آشفته را دوست ندارد. در عوض، از یک تابع TypeScript به نام استفاده می کنیم rootDirs، که به ما امکان می دهد دایرکتوری های “مجازی” را به دایرکتوری های واقعی نگاشت کنیم. با تنظیم rootDirs به ریشه پروژه (پیش فرض) و علاوه بر آن به .svelte-kit/types (پوشه منبع همه انواع تولید شده) و سپس با آینه سازی ساختار مسیر در داخل آن، رفتار مورد نظر را دریافت می کنیم:
.svelte-kit/
├ types/
│ ├ src/
│ │ ├ routes/
│ │ │ ├ blog/
│ │ │ │ ├ [slug]/
│ │ │ │ │ └ $types.d.ts
src/
├ routes/
│ ├ blog/
│ │ ├ [slug]/
│ │ │ ├ +page.server.ts
│ │ │ └ +page.svelte
src/
├ routes/
│ ├ blog/
│ │ ├ [slug]/
│ │ │ ├ $types.d.ts
│ │ │ ├ +page.server.ts
│ │ │ └ +page.svelteایمنی را بدون انواع تایپ کنید
به لطف تولید نوع خودکار، ایمنی نوع پیشرفته را دریافت می کنیم. با این حال، آیا عالی نیست اگر بتوانیم از تایپ انواع به طور کلی صرف نظر کنیم؟ از امروز می توانید این کار را انجام دهید:
src/routes/blog/[slug]/+page.server
import type { PageServerLoadEvent } from './$types';
export async function load(event: PageServerLoadEvent) {
return {
post: await database.getPost(event.params.post)
};
}src/routes/blog/[slug]/+صفحه
script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
export let data;
script>در حالی که این بسیار راحت است، فقط در مورد آن نیست. این نیز در مورد صحت: وقتی کد را کپی و جایگذاری می کنید، به راحتی می توانید تصادفی دریافت کنید PageServerLoadEvent مخلوط با LayoutServerLoadEvent یا PageLoadEventبه عنوان مثال – انواع مشابه با تفاوت های ظریف. بینش اصلی Svelte این بود که با نوشتن کد به روشی اعلانی، می‌توانیم دستگاه را وادار کنیم که بیشتر کارها را به درستی و کارآمد برای ما انجام دهد. این تفاوتی ندارد – با استفاده از قراردادهای چارچوب قوی مانند +page فایل‌ها، ما می‌توانیم انجام کار درست را آسان‌تر از انجام کار اشتباه کنیم.
این برای همه فایل های صادراتی SvelteKit کار می کند (+page، +layout، +server، hooks، params و غیره) و برای data، form و snapshot خواص در +page/layout.svelte فایل ها
برای استفاده از این قابلیت با VS Code، آخرین نسخه افزونه Svelte را برای VS Code نصب کنید. برای سایر IDE ها، از آخرین نسخه سرور زبان Svelte و افزونه Svelte TypeScript استفاده کنید. علاوه بر ویرایشگر، ابزار خط فرمان ما است svelte-check همچنین می داند که چگونه این حاشیه نویسی ها را از نسخه 3.1.1 اضافه کند.
چگونه کار می کند؟
انجام این کار نیازمند تغییراتی در سرور زبان (که IntelliSense را در فایل‌های Svelte قدرت می‌دهد) و پلاگین TypeScript (که باعث می‌شود TypeScript فایل‌های Svelte را از داخل درک کند، نیاز دارد. .ts/js فایل ها). در هر دو، ما به طور خودکار انواع صحیح را در موقعیت های صحیح قرار می دهیم و به TypeScript می گوییم که از فایل پسوند مجازی ما به جای فایل بدون تایپ اصلی استفاده کند. این همراه با نقشه برداری از موقعیت های تولید شده و اصلی به جلو و عقب، نتیجه مطلوب را به دست می دهد. از آنجایی که svelte-check با استفاده مجدد از بخش هایی از سرور زبان در زیر هود، این ویژگی را به صورت رایگان و بدون وصله اضافی دریافت می کند.
مایلیم از تیم Next.js تشکر کنیم الهام بخش این تابع
بعدش چی
برای آینده، ما می‌خواهیم به ایجاد نواحی ایمن SvelteKit حتی بیشتر بپردازیم – برای مثال پیوندها، یا در HTML شما یا از طریق تماس برنامه‌ای goto.
TypeScript در حال خوردن دنیای جاوا اسکریپت است – و ما برای آن اینجا هستیم! ما به شدت به ایمنی نوع درجه یک در SvelteKit اهمیت می‌دهیم و ابزارهایی را در اختیار شما قرار می‌دهیم تا تجربه‌ای را تا حد امکان روان کنید – خواه از TypeScript استفاده می‌کنید یا جاوا اسکریپت را از طریق JSDoc تزریق می‌کنید.
