Magdy Atef Zahran

🔷 TypeScript – Frontend Interview Questions & Answers

أسئلة (TypeScript):

إيه الفرق بين Type و Interface؟ وامتى تستخدم كل واحدة؟

الاتنين بيعملوا نفس الحاجة تقريبًا: تعريف شكل البيانات، بس الفرق الأساسي إن الـ interface بيشتغل أكتر مع الـ object والـ class، وبيسمح لك تعمل extends يعني تورث أكتر من Interface. أما الـ type فبيكون أكثر مرونة، تقدر تستخدمه مع الـ union والـ tuples، لكنه مش بيورث زي الـ interface. لو بتتعامل مع كائنات وعايز تورث، استخدم interface، أما لو بتتعامل مع أنواع أكثر تعقيدًا، استخدم type.
إيه الفرق بين unknown و any؟ وإمتى تستخدم كل واحد فيهم؟

الاتنين بيستخدموا لما تبقي مش عارف النوع الحقيقي للبيانات، بس الفرق إن any بيسمحلك تستخدم أي حاجة من غير قيود، وده ممكن يسبب أخطاء في الكود. أما unknown فبيجبرك تعمل Type Checking قبل ما تستخدم القيمة، عشان تتأكد إنها النوع اللي مستنيه. الأفضل تستخدم unknown لو بتتعامل مع بيانات جاية من API أو أي مصدر خارجي، عشان تجبر نفسك على الفحص قبل استخدامها.
إزاي تقدر تعمل Type Inference في TypeScript؟ وإيه أهميته؟

TypeScript ذكي وبيعرف النوع تلقائيًا في أغلب الحالات، فلو كتبت:

let name = "Ahmed";

هيفهم لوحده إن name نوعه string. الفايدة من Type Inference إنك مش مضطر تكتب الأنواع بنفسك دايمًا، فبيخلي الكود أنضف وأوضح.

إزاي تستخدم Generics في TypeScript؟ وهات مثال عملي؟

الـ Generics بتسمح لك تكتب دوال و interfaces مرنة تشتغل مع أكتر من نوع:

function getArray(items: T[]): T[] { return items; } let numbers = getArray([1, 2, 3]); let strings = getArray(["a", "b", "c"]);

ده مفيد لما يكون عندك أكواد reusable وعايزها تشتغل مع أكتر من نوع بدل ما تقيدها بنوع معين.

إيه الفرق بين optional properties و readonly properties في TypeScript؟
- الـ optional properties (باستخدام ?) معناها إن الخاصية ممكن تكون موجودة أو لا، زي:

interface User { name: string; age?: number; // ممكن يكون موجود أو لأ }

أما readonly properties فمعناها إن القيمة بتتحدد وقت الإنشاء بس ومينفعش تتغير بعد كده:

interface User { readonly id: number; name: string; }

إزاي تقدر تعمل Utility Types زي Pick، Omit، و Partial؟ وليه ممكن تحتاجهم؟

دي أدوات جاهزة في TypeScript بتساعدك تعدّل على الـ types بسهولة:

Pick: بياخد جزء معين من الـ type ويعمل منه جديد.

type User = { id: number; name: string; email: string }; type UserPreview = Pick; // بياخد id و name بس

Omit: العكس، بيحذف حاجات من النوع.

type UserWithoutEmail = Omit; // بيشيل email

Partial: بيخلي كل الخصائص اختيارية.

type OptionalUser = Partial; // كل الخصائص بقت اختيارية

دي مفيدة جدًا لما بتتعامل مع النماذج والـ APIs.

إزاي تتعامل مع Modules في TypeScript؟ وإيه الفرق بين export و export default؟

لو عندك ملف TypeScript، تقدر تصدر منه كذا متغير أو دالة باستخدام export:

export function sayHello() { return "Hello!"; }

وتقدر تستورده كده:

import { sayHello } from "./module";

أما export default فبتصدر حاجة واحدة بس، وده بيخليك تستوردها بأي اسم:

export default function sayGoodbye() { return "Goodbye!"; }

import goodbye from "./module";

export default بيكون مفيد لو بتصدر حاجة رئيسية واحدة من الملف.

إزاي تكتب Decorators في TypeScript؟ وليه ممكن تحتاجهم؟

Decorators هي ميزة في TypeScript بتسمح لك تعدّل على الـ classes والـ methods بطريقة مرنة، بس لازم تكون مفعلها في tsconfig.json:

{ "experimentalDecorators": true }

مثال عملي على class decorator:

function Logger(constructor: Function) { console.log("Class Created: ", constructor); } @Logger class Person { constructor(public name: string) {} }

لما تنشئ Person، هيتطبع اسم الكلاس تلقائيًا. Decorators مفيدة في الـ frameworks زي Angular.

إزاي تقدر تعمل Type Narrowing وإيه الطرق المختلفة لتحقيقه؟

Type Narrowing معناه إنك تضيّق نطاق النوع عشان TypeScript يعرف يتعامل معاه بشكل أدق. فيه طرق كتير، منها:

typeof:

function print(value: string | number) { if (typeof value === "string") { console.log("String: " + value.toUpperCase()); } else { console.log("Number: " + value.toFixed(2)); } }

instanceof:

class Car { drive() {} } class Bike { ride() {} } function move(vehicle: Car | Bike) { if (vehicle instanceof Car) { vehicle.drive(); } else { vehicle.ride(); } }

in:

function getShape(shape: { size?: number; radius?: number }) { if ("radius" in shape) { console.log("It's a circle"); } else { console.log("It's a square"); } }

Type Narrowing مهم جدًا عشان تضمن إن الكود بيتعامل مع الأنواع الصحيحة بطريقة صحيحة.