پنج روز پیش، Vue نسخه 3.3 “Rurouni Kenshi” به طور رسمی منتشر شد و دارای ویژگی های شگفت انگیز است. تقویت DX و کار با Typescript. در این پست قصد داریم برخی از ویژگی های جدید جالب و نحوه جدید را بررسی کنیم انواع ژنریک ویژگی می تواند به شما کمک کند اجزای ایمن بهتر بسازید.
انواع ژنریک چیست؟
می‌توانید از Generic Types استفاده کنید تا بررسی کنید که آیا دو یا چند props ارسال شده به یک جزء واقعاً دارای همان نوع هستند یا خیر. این ممکن است در هنگام ساختن یک مؤلفه Select مورد نیاز باشد، همانطور که در مثال زیر از پست وبلاگ رسمی ایوان یو نشان داده شده است:
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>
این به این معنی است که هنگام ارائه یک ورودی برای ویژگی اقلام نوع array<string> شما باید یک مقدار از نوع را ارائه دهید string در غیر این صورت Typescript سر شما فریاد می زد.
اما واقعا چه زمانی به این نیاز دارم؟!
مثال بالا ممکن است کمی انتزاعی به نظر برسد، بنابراین بیایید به یک سناریوی “دنیای واقعی” نگاه کنیم که در آن واقعاً می تواند مفید باشد.
ما یک برنامه کاربردی را فرض می کنیم که در آن داده ها را با مدل های مختلف از سرور به عنوان مثال کاربران و نقش ها واکشی می کنیم. ممکن است بخواهیم از یک مؤلفه Select استفاده کنیم که با هر دو نوع داده کار می کند. معمولاً یک کتابخانه کامپوننت Headless مانند Headless UI نیز اضافه می کنم.
انواع عمومی در عمل
برای تنظیم یک نسخه ی نمایشی سریع اجرا می کنیم:
npx create-vite@latest vue-demo --template vue-ts
cd vue-demo
npm install
برای راه اندازی Headless UI: npm install @headlessui/vue
جزء Select
ما می توانیم یک مؤلفه انتخابی ایجاد کنیم که از نوع عمومی T استفاده می کند که یک شی از نوع را گسترش می دهد OptionProps = {id: string | number, name: string}، به شرح زیر است:
<script setup lang="ts" generic="T extends OptionProps">
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel, } from "@headlessui/vue";
import { computed } from "vue";
// define and export Option props
export type OptionProps = {
id: string | number;
name: string;
};
// define props by using generic
const props = defineProps<{
options: T[];
modelValue: T;
}>();
// define emits
const emit = defineEmits<{
"update:modelValue": [value: T];
}>();
// define proxyValue for modelValue to emit update:modelValue
const proxy = computed({
get() {
return props.modelValue;
},
set(value: T) {
emit("update:modelValue", value);
},
});
</script>
<template>
<Listbox as="div" v-model="proxy">
<ListboxLabel> Select an option </ListboxLabel>
<ListboxButton> {{ proxy.name }} ▼ </ListboxButton>
<ListboxOptions>
<ListboxOption v-for="option in options" :key="option.id" :value="option">
{{ option.name }}
</ListboxOption>
</ListboxOptions>
</Listbox>
</template>
حالا که ما خودمان را تعریف کردیم <MySelect /> جزء ما می توانیم شروع به استفاده از آن در جاهای دیگر. اینجاست که قدرت تایپ اسکریپت به میان می آید.
1. ما یک اشاره بسیار جذاب از نوع درون خطی توسط پسوند Volar داریم
این به وضوح یکی از محبوب ترین ویژگی های استفاده از Vue با Typscript است. هنگامی که برخی از قطعات بر روی یک جزء مورد نیاز است، Volar به صورت خطی اشاره خواهد کرد آنها را که باید شامل شوند.
2. زمانی که ورودی ما نوع پایه مورد نیاز را برآورده نکند به ما اطلاع داده می شود
با استفاده از T عمومی، و تعریف لوازم مورد نیاز، می دانیم که چه زمانی برخی از لوازم ورودی ارائه شده را از دست می دهیم.
3. ما می توانیم واردات OptionProps از جزء
برای اطمینان از اینکه نوع صحیح کامپوننت را ارائه می کنیم، می توانیم یک رابط تعریف کنیم User که نوع مورد نیاز ما را گسترش می دهد OptionProps از جانب <MySelect />. این قابلیت واردات انواع نیز به تازگی اضافه شده است.
4. ما می توانیم مطمئن شویم که modelValue ما واقعاً با ورودی مطابقت دارد
از آنجایی که modelValue به یک مقدار اولیه از نوع ارائه شده با گزینه های prop نیاز دارد، شکایت می کند زیرا ویژگی ارائه شده در این مورد معتبر نیست.
این یک بسته بندی است!
من واقعاً فکر می‌کنم که Vue 3.3 هنگام استفاده از Typescript و ساخت اجزای ایمن تایپ یک تقویت بزرگ برای DX کلی است. برای من شخصاً این یک افزایش بزرگ در بهره وری خواهد بود و مشتاقانه منتظر هستم که این را در پروژه های آینده خود ادغام کنم.
شما چی فکر میکنید؟ آیا در واقع از Typescript با Vue استفاده می کنید؟ آیا تاکنون از ویژگی های جدید استفاده کرده اید؟ و آیا فکر می کنید جایی را پیدا خواهید کرد که بخواهید Generics را برای تایپ قوی اجزای خود اعمال کنید؟
اگر این مقاله را دوست داشتید، خوشحال می شوم اگر لایک بگذارید یا از شما بشنوم.
با تشکر برای خواندن و هک مبارک! ❤️ 💻
