JavaScript لغة قوية، لكنها Dynamic Type Language، يعني ما بتعرف على الأخطاء إلا وقت التشغيل بالبراوزر.
TypeScript بتحميك من هذا. بتقلك وين في غلط وإنت بتكتب الكود، قبل ما توصل للبراوزر.
الفوائد الرئيسية لـ TypeScript:
TypeScript هي Superset لـ JavaScript، كل كود JavaScript هو كود TypeScript صالح، لكن المتصفح ما بيفهم TypeScript مباشرة، لازم تُحوَّل (Compile) لـ JavaScript أولاً.
تأكد إنه عندك Node.js نازل، ثم شغّل:
npm install typescript
لإنشاء ملف الإعدادات tsconfig.json:
npx tsc --init
لتحويل (Compile) ملف TypeScript لـ JavaScript:
npx tsc
لتشغيل المراقبة التلقائية (Watch Mode)، كل ما تغير شيء بيعمل compile تلقائياً:
npx tsc --watch
بالـ tsconfig.json، فعّل خاصية outDir لتحديد وين يروح الكود المُحوَّل:
{
"compilerOptions": {
"outDir": "./dest"
}
اشترك في النشرة البريدية
دروس جديدة، مقالات، وأدوات مباشرة لبريدك.
بهيك شكل، كل الملفات المُحوَّلة رح تكون بمجلد dest وما رح تختلط مع الـ Source Code.
لتحديد النوع (Type) لمتغير، نستخدم علامة : بعد اسم المتغير:
const score: number = 10;any بيقبل أي نوع، string أو number أو boolean أو array، حرفياً أي شيء:
let age: any = 25;
age = "عشرين"; // ما في errorالمشكلة: TypeScript ما رح تخبرك لو كنت تستخدم المتغير بطريقة خاطئة.
let age: any = "عشرين";
if (age > 18) { // ما في error، بس المنطق غلط!
console.log("كبير");
}هذا أخطر شيء ممكن تساويه، TypeScript بتصمت وما بتحذرك.
unknown بيقبل أي نوع كمان، لكنه أأمن من any. TypeScript بتلزمك تتأكد من النوع قبل الاستخدام:
let age: unknown = 25;
if (typeof age === "number") {
if (age > 18) {
console.log("كبير");
}
}هذا الـ Type Narrowing، التحقق من النوع عن طريق typeof قبل الاستخدام.
الفرق الأساسي:
any | unknown | |
|---|---|---|
| يقبل أي نوع | ✓ | ✓ |
| يلزمك تتأكد من النوع قبل الاستخدام | ✗ | ✓ |
| آمن | ✗ | ✓ |
الأنواع الأساسية في TypeScript:
const score: number = 10;
const isAdmin: boolean = true;
const firstName: string = "John";
const nothing: undefined = undefined;
const empty: null = null;هذه الأنواع بتحميك من إنك تحط قيمة غلط بالمتغير:
let count: number = 5;
count = true; // Error: Type 'boolean' is not assignable to type 'number'void للـ Functions اللي ما بترجع قيمة:
function printMessage(): void {
console.log("مرحباً!");
// ما في return
}إذا حاولت ترجع قيمة من Function نوعها void:
Type 'string' is not assignable to type 'void'never للـ Functions اللي بترمي Exception ودايماً ما بتكمل تنفيذها:
function throwError(): never {
throw new Error("صار خطأ!");
}الفرق:
void | never | |
|---|---|---|
| التعريف | دالة ما بترجع قيمة | دالة ما بتكمل تنفيذها أبداً |
| الاستخدام | دوال عادية بدون return | دوال بترمي throw |
ملاحظة: الـ Function اللي ما بترجع شيء دايماً بترجع undefined ضمنياً، لذلك never ما تستخدمها إلا إذا كان في throw جوا الدالة.
في طريقتين لتحديد نوع Array:
الطريقة الأولى، باستخدام Array<T>:
const numbers: Array<number> = [1, 2, 3, 4];الطريقة الثانية، باستخدام T[]:
const languages: string[] = ["JavaScript", "TypeScript"];الطريقة الثانية أبسط وأوضح، وهي المُفضَّلة.
أمثلة:
const flags: boolean[] = [true, false, true];
const anything: any[] = [1, "hello", true];لو حطيت نوع object بشكل عام، TypeScript ما رح تساعدك كثير:
const config: object = { theme: "dark", redirect: true };
config.theme; // Error: Property 'theme' does not exist on type 'object'الصح إنك ترسم شكل الـ Object بالضبط:
const config: { theme: string; redirect: boolean } = {
theme: "dark",
redirect: true,
};هيك TypeScript بتعرف شو Properties الموجودة وبتساعدك عليها. وإذا حاولت تضيف Property غير موجودة بالـ Type:
Object literal may only specify known properties, and 'age' does not exist in type '{ theme: string; redirect: boolean }'Tuple هو Array بحجم ثابت، وكل عنصر له نوع محدد:
const tick: [string, number] = ["task-1", 1];لو بدك Tuple من ثلاثة عناصر، مثلاً String وNumber وBoolean:
const record: [string, number, boolean] = ["user", 1, true];كل اللي غطّيناه اليوم يُستخدم بنسبة 80-90% من شغلك اليومي بـ TypeScript. تدرّب عليها كويس لأنه الدرس الجاي رح نطلع لمستوى أعلى.