إعادة تعيين المفاتيح وأنواع القوالب الحرفية
أعد تعيين المفاتيح باستخدام “as”، وأنشئ مفاتيح عبر القوالب الحرفية (Capitalize/Uncapitalize)، وفلتر الخصائص حسب أنماط الأسماء.
إعادة تعيين المفاتيح وأنواع القوالب الحرفية درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
مقدمة
الهدف: استخدام إعادة تعيين المفاتيح (عبارة as) مع أنواع القوالب الحرفية لإعادة تسمية الخصائص أو إنشائها أو إسقاطها وفق أنماط الأسماء.
- إعادة تسمية المفاتيح:
K as NewK - تصفية المفاتيح باستخدام
never - تركيب الأسماء:
`get${Capitalize<K>}`
إعادة تسمية المفاتيح
أعيدوا تسمية المفاتيح باستخدام as. مثال: حوّلوا أسماء snake_case إلى camelCasee.
type Original = { first_name: string; last_name: string }
type Camelize<T> = {
[K in keyof T as K extends `${infer A}_${infer B}`
? `${A}${Capitalize<B>}`
: K]: T[K]
}
type UserCamel = Camelize<Original> // { firstName: string; lastName: string }التصفية حسب البادئة
يُسقط المفتاح never. القالب: تصفية معالجات الأحداث باستخدام `on${string}`.
type Props = { onClick: () => void; onSubmit: () => void; title: string }
type WithoutHandlers<T> = {
[K in keyof T as K extends `on${string}` ? never : K]: T[K]
}
type Clean = WithoutHandlers<Props> // { title: string }إنشاء الطرق
أنشئوا واجهات API باستخدام أسماء القوالب: يُستخدم النمط get${Capitalize<K>} لإنشاء أدوات الحصول من الحقول.
type Fields = "name" | "email"
type Getters<T extends string> = {
[K in T as `get${Capitalize<K>}`]: () => string
}
type ClientAPI = Getters<Fields>
// { getName: () => string; getEmail: () => string }تركيب الأنماط
اجمعوا عدة قوالب لإنشاء أسماء واضحة وقوية، مع ضمان اتساق التسمية في المشاريع الكبيرة.
type Route = `/${"" | `${string}`}`
type HttpMethod = "get" | "post"
type Endpoints<T extends string, M extends string> = {
[K in T as `${M}_${K}`]: { path: `/${K}`; method: Uppercase<M> }
}
type API = Endpoints<"users" | "login", HttpMethod>
// { get_users: { path: "/users"; method: "GET" }, post_login: { path: "/login"; method: "POST" } }نصائح ومحاذير
نصائح:
إعادة تعيين المفاتيح مكلفة؛ فقسّموا الأنواع المعقدة باستخدام أسماء مستعارة.
استخدموا قوالب بسيطة للتصفية: `on${string}` و`data-${string}`.
استخدموا المساعدات Capitalize/Uncapitalize/Uppercase/Lowercase.
بسّطوا واجهة API إذا أصبح إنشاء الأسماء مفرطًا.
التحقق من تصفية البادئة
تحقق سريع: ما نمط النوع المعيَّن الذي يزيل الخصائص التي تبدأ بـ on؟
مراجعة
مراجعة: أعيدوا تسمية المفاتيح وصفّوها باستخدام إعادة تعيين المفاتيح؛ وأنشئوا مفاتيح باستخدام أنواع القوالب الحرفية؛ وأسقطوا المفاتيح غير المرغوبة باستخدام never.
الأسئلة الشائعة
هل درس «إعادة تعيين المفاتيح وأنواع القوالب الحرفية» مجاني؟
نعم — نص درس «إعادة تعيين المفاتيح وأنواع القوالب الحرفية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 3 دروس في المجموع.
ماذا ستتعلم في «إعادة تعيين المفاتيح وأنواع القوالب الحرفية»؟
أعد تعيين المفاتيح باستخدام “as”، وأنشئ مفاتيح عبر القوالب الحرفية (Capitalize/Uncapitalize)، وفلتر الخصائص حسب أنماط الأسماء. تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «إعادة تعيين المفاتيح وأنواع القوالب الحرفية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الأنواع المُحوّلة باستخدام +/-readonly و +/-?
- إعادة تعيين المفاتيح وأنواع القوالب الحرفية
- الكتابة وفق أنماط السلاسل (معاملات المسارات وأسماء الأحداث)