الأنواع البدائية والاتحادات والأسماء المستعارة للأنواع
حدّد أنواع المتغيرات باستخدام string وnumber وboolean والمصفوفات. وأنشئ أنواعًا اتحادية باستخدام | وامنحها أسماء واضحة باستخدام الأسماء المستعارة للأنواع.
الأنواع البدائية والاتحادات والأسماء المستعارة للأنواع درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
إضافة تعليقات الأنواع إلى المتغيرات
أضيفوا تعليقات الأنواع باستخدام نقطتين بعد اسم المتغير. يستنتج TypeScript الأنواع عندما يكون ذلك ممكنًا؛ فأضيفوا تعليقات صريحة عندما يكون الاستنتاج غير واضح أو لأغراض التوثيق.
let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;
// Inferred (no annotation needed):
const pi = 3.14; // TypeScript knows this is numberالأنواع البدائية
تطابق الأنواع البدائية في TypeScript الأنواع البدائية في JavaScript: string وnumber (من دون تمييز بين العدد الصحيح والعشري) وboolean وnull وundefined وsymbol وbigint.
function greet(name: string): string {
return `Hello, ${name}`;
}
function double(n: number): number {
return n * 2;
}
function toggle(active: boolean): boolean {
return !active;
}المصفوفات
حدّدوا نوع المصفوفة باستخدام Type[] أو النوع العام Array<Type>. وكلاهما متكافئ.
const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];
// Generic syntax:
const items: Array<string> = ['a', 'b'];أنواع الاتحاد: |
تتيح أنواع الاتحاد للمتغير أن يحتوي على أحد أنواع متعددة. استخدموا عامل الأنبوب |. ويضيّق TypeScript النوع داخل الشروط.
function formatId(id: number | string): string {
if (typeof id === 'number') {
return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
}
return id.toUpperCase(); // id is narrowed to string
}الأنواع الحرفية
يمكنكم استخدام قيم حرفية من نوع string أو number أو boolean باعتبارها أنواعًا. وعند دمجها مع أنواع الاتحاد، تنشئ مجموعة ثابتة من القيم المسموح بها، شبيهةً بالتعداد.
type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up'); // Error: Argument not assignableالأسماء المستعارة للأنواع: type
تنشئ الكلمة المفتاحية type اسمًا مستعارًا لنوع — أي اسمًا قابلًا لإعادة الاستخدام لأي نوع. وتعمل الأسماء المستعارة مع الأنواع البدائية، والاتحادات، والكائنات، والصفائف، والأنواع المركبة المعقدة.
type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;
const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);أنواع الكائنات باستخدام type
صِفوا بنية الكائنات باستخدام الأسماء المستعارة للأنواع. حدّدوا الخصائص الاختيارية باستخدام ?، والخصائص للقراءة فقط باستخدام readonly.
type User = {
id: number;
name: string;
email: string;
role?: 'admin' | 'user'; // optional
readonly createdAt: Date; // can't reassign
};
const user: User = {
id: 1,
name: 'Alice',
email: 'alice@example.com',
createdAt: new Date()
};أنواع التقاطع: &
ادمجوا أنواعًا متعددة باستخدام العامل &. ويحتوي النوع الناتج على جميع خصائص النوعين. وهذا مفيد لتوسيع الأنواع.
type Timestamped = {
createdAt: Date;
updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAtالنوع any — مخرج استثنائي
يعطّل any التحقق من النوع لقيمة معينة. وهو ينتشر تلقائيًا — فالقيم المشتقة من any تكون أيضًا من النوع any. استخدموه كحل أخير أثناء الترحيل، وليس حلًا دائمًا.
let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection
// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
console.log(raw.toUpperCase()); // narrowed
}النوع unknown — بديل آمن للنوع any
يمثل unknown النظير الآمن من ناحية الأنواع لـ any. لا يمكنكم استخدام قيمة unknown قبل تضييق نوعها أولًا. وهذا يجبركم على التحقق من صحة البيانات الخارجية.
الصفائف — مصفوفات ثابتة الطول
الصفيفة هي مصفوفة ثابتة الطول يكون لكل موضع فيها نوع معروف.
type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];
// React useState returns a tuple:
const [count, setCount] = useState<number>(0);تحقق سريع
ما ميزة TypeScript التي تتيح للدالة قبول string أو number؟
خلاصة: الأنواع البدائية والاتحادات والأسماء المستعارة
الأنواع البدائية: string وnumber وboolean وnull وundefined. المصفوفات: Type[]. أنواع الاتحاد: A | B. الأنواع الحرفية لمجموعات القيم الثابتة. الاسم المستعار type لأسماء الأنواع القابلة لإعادة الاستخدام. الخصائص الاختيارية باستخدام ?. وreadonly للخصائص غير القابلة للتغيير. فضّلوا unknown على any عند التعامل مع البيانات الخارجية.
الأسئلة الشائعة
هل درس «الأنواع البدائية والاتحادات والأسماء المستعارة للأنواع» مجاني؟
نعم — نص درس «الأنواع البدائية والاتحادات والأسماء المستعارة للأنواع» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «الأنواع البدائية والاتحادات والأسماء المستعارة للأنواع»؟
حدّد أنواع المتغيرات باستخدام string وnumber وboolean والمصفوفات. وأنشئ أنواعًا اتحادية باستخدام | وامنحها أسماء واضحة باستخدام الأسماء المستعارة للأنواع. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «الأنواع البدائية والاتحادات والأسماء المستعارة للأنواع»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- لماذا TypeScript: الأنواع تكتشف الأخطاء أثناء الترجمة
- الأنواع البدائية والاتحادات والأسماء المستعارة للأنواع
- الواجهات وأنواع الكائنات
- ترجمة TS وtsconfig.json