أساسيات TypeScript

توضح هذه المقالة أساسيات TypeScript۔

YouTube Video

تنفيذ "مرحباً بالعالم!"

أولاً، سننفذ المثال الكلاسيكي "مرحباً بالعالم!" في TypeScript باستخدام Visual Studio Code.۔

npm install -g typescript

قم بتثبيت typescript باستخدام أمر npm۔

قم بإنشاء ملف tsconfig.json۔

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

قم بإنشاء ملف .vscode/launch.json لتمكين تشغيل ملف main.ts في Visual Studio Code۔

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

قم بإنشاء ملف main.ts يعرض "مرحباً بالعالم!"۔ يمكنك تشغيله في Visual Studio Code عن طريق الضغط على مفتاح F5۔

1console.log("Hello World!");

عن طريق تكوين هذا الإعداد بهذه الطريقة، يمكنك تنفيذ ملفات TypeScript داخل VSCode۔

نظرة عامة على TypeScript

يعد TypeScript (TS) امتداداً لـ JavaScript تم تطويره بواسطة Microsoft۔ يدعم TypeScript الكتابة الثابتة، مما يسمح بكتابة شفرة أكثر قوة وقابلية للصيانة۔

الكتابة الثابتة

• يضيف TypeScript الأنواع إلى JavaScript ويقوم بالتحقق من الأنواع أثناء وقت الترجمة۔ وهذا يساعد على منع الأخطاء المتعلقة بالأنواع مسبقاً۔

1let message: string = "Hello, TypeScript";
2console.log(message);

الترجمة

• نظرًا لأن TypeScript لا يمكن تشغيله مباشرة في المتصفح، يجب تحويله (ترجمته) إلى JavaScript۔ استخدم tsc (مترجم TypeScript) لتحويل ملفات TS إلى ملفات JS۔

تعليقات الأنواع الاختيارية

• يقوم TypeScript أيضًا باستنتاج الأنواع ولكن يسمح لك بتحديد الأنواع صراحةً عند الحاجة۔ وهذا يعزز من قابلية قراءة الشفرة وموثوقيتها۔

1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

الواجهات (Interfaces)

• يوفر TypeScript interface لتعريف هيكل الكائنات۔ وهذا يسمح بإدارة صارمة لهيكل الكائنات۔

1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

الفئات

• يوفر TypeScript امتدادات لنحو الفئات في JavaScript ويدعم الوراثة، معدّلات الوصول (public، private، protected)، والفئات المجردة۔

 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

الجينيريك

• في TypeScript، يمكن كتابة كود قابل لإعادة الاستخدام وآمن باستخدام الجينيريك۔

1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

النظام البيئي

• TypeScript متوافق تمامًا مع النظام البيئي لـ JavaScript ويمكنه استخدام كود JavaScript الحالي كما هو۔ علاوة على ذلك، فهو مدمج مع مكتبات شهيرة مثل React وNode.js۔

أدوات قوية للمطورين

• يوفر TypeScript ميزات متقدمة مثل الإكمال التلقائي، ودعم إعادة الهيكلة، وفحص الأخطاء في المحررات مثل VSCode۔

TypeScript مفيد بشكل خاص لتعزيز الموثوقية وتحسين إنتاجية المطورين في المشاريع الكبيرة۔

المتغيرات في TypeScript

يشرح هذا المفاهيم الأساسية واستخدام المتغيرات في TypeScript۔

تعريف المتغيرات

في TypeScript، يتم تعريف المتغيرات باستخدام ثلاث كلمات مفتاحية: let، const، وvar۔ لكل كلمة مفتاحية خصائص مختلفة۔

مثال على let:

لـ let نطاق كتلة (صالح فقط داخل الأقواس المتعرجة {})۔ يمكن إعادة تعيين القيم لاحقًا۔

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

مثال على const:

لا يمكن إعادة تعيين المتغير const، لذا لا يمكن تغيير القيمة التي تم تعيينها مرة واحدة۔ ومع ذلك، يمكن تعديل محتويات الكائنات والمصفوفات۔

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

مثال على var:

var له نطاق الوظيفة ويمكن إعادة تعيينه۔ ومع ذلك، يمكن أن يؤدي تجاهل نطاق الكتلة إلى حدوث سلوك غير متوقع مقارنة بـ let أو const۔

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

تعليقات النوع

في TypeScript، يمكنك تحديد أنواع المتغيرات بشكل صريح باستخدام التوضيحات۔ يتم دعم استدلال النوع أيضًا، ولكن التوضيحات النوعية تكون مفيدة في السيناريوهات المعقدة۔

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

المتغيرات غير المهيأة

إذا تم تعريف متغير بدون تهيئة، يتم تعيين القيمة undefined له بشكل افتراضي۔ يجب أن يتم تعيين undefined صراحةً للمتغير الذي يُعلن باستخدام let أو تضمين undefined في نوعه إذا لم يتم تهيئته۔

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

نطاق المتغير

لـ let و const نطاق الكتلة، لذا يكونان صالحين فقط داخل نفس الكتلة۔

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

رفع المتغيرات (Variable Hoisting)

نظرًا لأن تايب سكريبت هو امتداد لجافا سكريبت، فهو يرث خاصية الرفع (hoisting) الخاصة بجافا سكريبت۔ يشير الرفع (hoisting) إلى السلوك الذي تُعتبر فيه إعلانات المتغيرات والدوال كما لو أنها قد تم رفعها إلى أعلى نطاقها۔ ومع ذلك، يتم رفع الإعلان فقط، بينما تظل التهيئة في مكانها۔ المتغيرات التي تم الإعلان عنها باستخدام var يتم رفعها، ولكن استخدام let أو const قبل الإعلان يؤدي إلى حدوث خطأ۔

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• في هذه الحالة، يتم رفع المتغيرات المعلنة باستخدام var ويتم إخراج قيمها۔

1console.log(b); // ReferenceError
2let b = 20;

• المتغيرات المعلنة باستخدام let لا يتم رفعها، مما يؤدي إلى حدوث خطأ۔

الملخص

التالي هو ملخص لـ let و const و var۔

• let يمكن إعادة تعيينه وله نطاق كتلة۔
• const لا يمكن إعادة تعيينه وله نطاق كتلة۔
• var يمكن إعادة تعيينه وله نطاق دالة۔
• جميعها تتيح التوضيح الصريح لأنواع المتغيرات۔

أحرف الهروب في TypeScript

تُستخدم أحرف الهروب عندما لا يمكن إدخال أحرف معينة مباشرة أو لتمثيل أحرف ذات معنى خاص داخل النص.۔ في TypeScript، تُستخدم أحرف الهروب لتمثيل أحرف التحكم أو الأحرف الخاصة.۔

على سبيل المثال، استخدم \n لطباعة رسالة تتضمن سطرًا جديدًا.۔

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

هروب الأحرف الخاصة

تكون أحرف الهروب مفيدة أيضًا عند تضمين أحرف خاصة داخل النص.۔ على سبيل المثال، قد ترغب في استخدام علامات الاقتباس المزدوجة أو الفردية مباشرةً داخل النص.۔

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

الهروب من الشرطة المائلة العكسية نفسها

لإضافة شرطة مائلة عكسية داخل النص، تحتاج إلى كتابتها كشرطتين مائلتين عكسيتين.۔

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

أحرف الهروب في Unicode والست عشري

في TypeScript، يمكن تمثيل نقاط ترميز Unicode باستخدام تسلسلات الهروب.۔

تسلسل الهروب لرموز Unicode

يمكنك تمثيل أحرف Unicode عن طريق تحديد رقم سداسي عشري مكون من أربعة أرقام بعد \u.۔

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

الهروب بالست عشري

يمكنك تمثيل أحرف معينة باستخدام رقم سداسي عشري مكون من رقمين بعد \x.۔

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

النصوص الحرفية القالبية وأحرف الهروب

يتم تعريف القوالب النصية عن طريق وضعها بين علامات التدوين الخلفي (``) وتوفر طريقة سهلة لإنشاء تعبيرات مضمنة أو سلاسل نصية متعددة الأسطر۔ يمكن استخدام أحرف الهروب العادية مباشرةً داخل النصوص الحرفية القالبية.۔

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

الحالات الخاصة

في TypeScript، قد يؤدي استخدام تسلسلات هروب غير صالحة داخل النص إلى حدوث خطأ في بناء الجملة.۔ لذلك، من المهم التحقق مما إذا كانت أحرف الهروب صالحة.۔

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

أمثلة عملية للاستخدام

إليك مثال على إنشاء نص معقد باستخدام أحرف الهروب.۔

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

في هذا المثال، يتم استخدام \n لإضافة سطر جديد و\t لإضافة فرق المسافة.۔ هذا يجعل بنية JSON أسهل في القراءة.۔

الملخص

أحرف الهروب مهمة جدًا عند العمل مع النصوص في TypeScript۔ عندما تريد تضمين أحرف خاصة أو أحرف تحكم في نص، يمكنك إنشاء نصوص تعبيرية باستخدام تسلسلات هروب مناسبة۔ فهم واستخدام أحرف الهروب بشكل صحيح يمكن أن يحسن قراءة الكود وصيانته۔

إصدارات TypeScript

دعونا نلقي نظرة عامة على إصدار TypeScript هنا۔

1. TypeScript 1.0 (2014)

   الإصدار المستقر الأول من TypeScript۔ تم تقديم الميزات الأساسية مثل الأنواع، الفئات، والوحدات۔

2. TypeScript 2.0 (2016)

   تم تقديم ميزات مثل Non-nullable Types، تحليل تدفق التحكم، الخصائص للقراءة فقط، ونوع Never، مما يعزز استدلال الأنواع۔

3. TypeScript 3.0 (2018)

   تم تقديم نظام أنواع أكثر مرونة مع ميزات مثل Project References، تحسينات على Tuple Types، وتحسينات على Rest Parameters۔

4. TypeScript 4.0 (2020)

   تم إضافة ميزات مثل Variadic Tuple Types، تحسينات المحرر، تحسين استدلال الأنواع، وLabelled Tuple Elements لتحسين تجربة التطوير۔

5. TypeScript 4.1 (2020)

   تم تقديم Template Literal Types، مما جعل التلاعب بأنواع النصوص أكثر قوة۔

6. TypeScript 4.3 (2021)

   إضافة الكلمة المفتاحية Override، تحسينات على معدّلات الوصول داخل البانية (constructor)، ودعم محسن لأنواع WeakMap وWeakSet۔

7. تايب سكريبت 4.5 (2021)

   تم إضافة نوع Awaited، وModuleSuffixes، وتحسين التوافق مع وحدات ECMAScript۔

8. تايب سكريبت 5.0 (2023)

   تم توحيد Decorators، تحسين سرعة بناء المشاريع، تعزيز نظام الأنواع، ودعم أحدث ميزات ECMAScript۔

تايب سكريبت يتطور باستمرار، مع إصدار العديد من النسخ كل عام تتضمن ميزات وتحسينات جديدة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video