اتحادات السلاسل والإكمال التلقائي
احصلوا على إكمال تلقائي في المحرر للقيم النصية المعروفة
اتحادات السلاسل والإكمال التلقائي درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
الاتحادات تقود الإكمال التلقائي
يؤدي اتحاد من السلاسل النصية الحرفية وظيفتين: فهو يقيّد القيم المسموح بها، ويغذي ميزة الإكمال التلقائي في المحرر. لكنك قد ترغب أحيانًا في الحصول على الاقتراحات مع حرية تمرير أي سلسلة نصية — وتتعامل حيلة ذكية مع ذلك.
اتحاد أساسي من السلاسل النصية الحرفية
صرّح باتحاد من السلاسل النصية المسموح بها. يعرض المحرر هذه الخيارات تحديدًا، وتصبح القيم غير الصالحة أخطاء ترجمة.
type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Errorالإكمال التلقائي في المحرر
عندما يكون أحد الوسائط اتحادًا من السلاسل النصية الحرفية، يؤدي الكتابة داخل الاستدعاء إلى إظهار عناصر الاتحاد نفسها. وهذه إحدى أكثر ميزات TypeScript المحبوبة من حيث سهولة الاستخدام.
type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blueالقيد
يمنع الاتحاد الصارم أي قيمة خارج القائمة. وقد ترغب أحيانًا في اقتراح القيم الشائعة مع السماح في الوقت نفسه بسلاسل نصية مخصصة عشوائية — لكن الاتحاد العادي لا يستطيع تحقيق الأمرين.
type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))التوسيع يفقد الاقتراحات
إذا استخدمت string ببساطة، فستعمل أي قيمة، لكن سيختفي الإكمال التلقائي تمامًا. وبذلك تستبدل كل التلميحات بمرونة تامة — وهذا ليس مثاليًا.
function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestionsحيلة string واتحاد القيم الحرفية
الحيلة هي ضم القيم الحرفية إلى string & {} باستخدام عامل الاتحاد. وستظل القيم الحرفية ظاهرة في الإكمال التلقائي، بينما يسمح string & {} بأي سلسلة نصية أخرى دون اختزال الاتحاد.
type Color = "red" | "green" | (string & {})
const a: Color = "red" // suggested
const b: Color = "#ff8800" // also allowed
console.log(a, b)لماذا تنجح string والكائن الفارغ
عادةً ما يُبسَّط 'red' | string إلى string فقط، فتُمحى القيم الحرفية. أما التقاطع مع {} فينشئ نوعًا مختلفًا قليلًا يحتفظ به TypeScript منفصلًا، فتظل القيم الحرفية متاحة للإكمال بينما تظل أي سلسلة نصية صالحة.
type A = "red" | string // collapses to string — no hints
type B = "red" | (string & {}) // keeps "red" as a suggestion
const x: B = "red"
console.log(x)مساعد قابل لإعادة الاستخدام
غلّف الحيلة في اسم نوع مستعار عام حتى تكون النية واضحة وقابلة لإعادة الاستخدام عبر قاعدة الكود.
type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)تطبيقها على دالة
استخدم المساعد في واجهة برمجة التطبيقات لمنح المستدعين اقتراحات للقيم الشائعة مع الاستمرار في قبول القيم المخصصة.
type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home")) // suggested
console.log(setIcon("my-icon")) // allowedمتى تستخدم الحيلة
استخدمها عندما تتضمن واجهة برمجة التطبيقات قيمًا معروفة جيدًا، لكنها يجب أن تبقى مفتوحة: أسماء الأيقونات، ووحدات CSS، ورموز السمات، والإعدادات المسبقة لأطر العمل. أما في المجموعات المغلقة، ففضّل اتحادًا صارمًا لتحقيق أمان كامل.
type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)المقايضات
تحافظ الحيلة على الاقتراحات، لكنها تقلل الأمان — إذ لم تعد الأخطاء الإملائية في السلاسل المخصصة تُكتشف. استخدمها عن قصد عندما تكون الانفتاحية ميزة، لا كخيار افتراضي.
type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)تحقق سريع
اختبر مدى فهمك لحيلة الإكمال التلقائي.
مراجعة
تدعم اتحادات السلاسل النصية الحرفية الإكمال التلقائي في المحرر وتقيّد القيم، لكن الاتحاد الصارم يمنع السلاسل المخصصة، بينما يفقد string العادي جميع التلميحات. وتحافظ حيلة T | (string & {}) على القيم الحرفية كاقتراحات مع قبول أي سلسلة نصية. غلّفها في مساعد LiteralUnion<T>، واستخدمها فقط عندما تكون الانفتاحية مقصودة — فهي تضحي بأمان اكتشاف الأخطاء الإملائية.
الأسئلة الشائعة
هل درس «اتحادات السلاسل والإكمال التلقائي» مجاني؟
نعم — نص درس «اتحادات السلاسل والإكمال التلقائي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «اتحادات السلاسل والإكمال التلقائي»؟
احصلوا على إكمال تلقائي في المحرر للقيم النصية المعروفة تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «اتحادات السلاسل والإكمال التلقائي»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات الأنواع الحرفية للقوالب النصية
- نمذجة السلاسل المهيكلة
- اتحادات السلاسل والإكمال التلقائي
- أنواع معالجة السلاسل المضمّنة