«as const» في TypeScript: ننقذ الكود من الأخطاء الغبية

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

مقدمة: لماذا يتصرف كود TypeScript الخاص بك بشكل غريب؟

هل سبق لك أن كتبت في TypeScript شيئًا مثل:

const direction = 'left';// ... ثم يقول TypeScript إنها string وليست 'left'؟

مألوف؟ هذه واحدة من أكثر الفخاخ شيوعًا التي يقع فيها حتى المطورون ذوو الخبرة. اليوم سنشرح أداة قوية تحل هذه المشكلة نهائيًا — as const.

موضوع هذه المقالة مبني على سؤال حقيقي من Stack Overflow حصد آلاف المشاهدات: "What does the "as const" mean in TypeScript and what is its use case?". نحن نكيف هذا السؤال لمحتوى تعليمي، ونضيف أمثلة حية ونوضح كيف يساعدك as const في TypeScript على تجنب الأخطاء الغبية.

مستعد؟ هيا بنا!

ما هو as const في TypeScript بكلمات بسيطة؟

as const هو بناء خاص (تأكيد الثابت) يخبر TypeScript: "مهلاً، لا توسع النوع! جمد هذه القيمة كحرف". بمعنى آخر، أنت تمنع TypeScript من استنتاج نوع عام (مثل string) وتجبره على استخدام القيمة الدقيقة.

المشكلة بدون as const

انظر إلى هذا المثال البسيط:

// بدون as constconst role = 'admin'; // سيستنتج TypeScript النوع: 'admin' (لأن const)let userRole = 'admin'; // سيستنتج TypeScript النوع: string (لأن let)

// والآن مصفوفة:const roles = ['admin', 'user', 'guest']; // سيستنتج TypeScript: string[]

عند استخدام let أو مصفوفة، يقوم TypeScript "بتوسيع" النوع إلى نوع عام. هذا منطقي: يمكن أن يتغير المتغير، ويمكن أن تتحور المصفوفة. لكن في 90% من الحالات، تحتاج إلى القيمة الدقيقة!

الحل مع as const

const roles = ['admin', 'user', 'guest'] as const;// سيستنتج TypeScript: readonly ["admin", "user", "guest"]

const config = {  api: 'https://api.example.com',  timeout: 5000} as const;// سيستنتج TypeScript:// {//   readonly api: "https://api.example.com";//   readonly timeout: 5000;// }

الآن TypeScript يعرف الحروف الدقيقة. لا مزيد من string أو number — فقط قيم محددة. هذا هو سحر as const في TypeScript.

أهم 5 أخطاء عند العمل مع as const (وكيف تتجنبها)

حتى مع معرفة ما هو as const، غالبًا ما يقع المطورون في نفس الأخطاء. دعنا نستعرضها مع حالات واقعية.

الخطأ رقم 1: محاولة تغيير كائن readonly

عند استخدام as const، يصبح الكائن أو المصفوفة readonly. محاولة تغييرها ستؤدي إلى خطأ في الترجمة.

سيء:

const colors = ['red', 'green', 'blue'] as const;colors.push('yellow'); // خطأ! Property 'push' does not exist on type 'readonly [...]'

كيف تتجنبه:

إذا كنت بحاجة إلى مصفوفة قابلة للتغيير، فلا تستخدم as const. أو استخدم نسخة:

const colors = ['red', 'green', 'blue'] as const;const mutableColors = [...colors]; // الآن هي مصفوفة عاديةmutableColors.push('yellow'); // يعمل

الخطأ رقم 2: نسيان الكائنات المتداخلة

as const يعمل بشكل تكراري — فهو يجعل جميع الخصائص المتداخلة readonly. كثيرون ينسون ذلك.

مثال:

const theme = {  colors: {    primary: '#007bff',    secondary: '#6c757d'  }} as const;

theme.colors.primary = '#000'; // خطأ! Cannot assign to 'primary' because it is a read-only property.

كيف تتجنبه:

إذا كنت بحاجة إلى تغيير جزء فقط من الكائن، استخدم as const سطحيًا أو استخدم أنواعًا جزئية.