TypeScript شرح: ما هي الواجهة، والتعداد، والمصفوفة؟

ما هي تفاصيل TypeScript?

TypeScript هي مجموعة شاملة من Javaالنصي. TypeScript هي لغة برمجة كائنية التوجه تدعم الفئات والواجهات وغيرها. وهي لغة مفتوحة المصدر تم تطويرها بواسطة Microsoft الذي يجمع التعليمات البرمجية بشكل ثابت ل Javaسكربت. يمكن تشغيله بسهولة في متصفح أو في Node.js.

يتم دعم جميع أحدث الميزات التي تم إصدارها لـ ECMAScript TypeScriptبالإضافة إلى ذلك TypeScript يحتوي على خصائصه الخاصة بالبرمجة الكائنية مثل الواجهات، والتصريحات المحيطة، وتوارث الفئات، مما يساعد في التطوير.ping تطبيق كبير كان من الصعب بناؤه لولا ذلك Javaسيناريو.

العلاقة أحادية الاتجاه. كل شيء صحيح Javaملف البرنامج النصي صالح بالفعل TypeScriptلكن العكس ليس صحيحاً، لأن التعليقات التوضيحية للأنواع موجودة فقط في TypeScript ويتم مسحها أثناء عملية التجميع.

لماذا استخدام TypeScript?

فيما يلي أهم فوائد استخدام TypeScript:

• مشاريع كبيرة ومعقدة في Javaتعتبر النصوص صعبة البرمجة والصيانة.
• TypeScript يساعد كثيراً في تنظيم الكود، ويزيل معظم الأخطاء أثناء عملية التجميع بدلاً من وقت التشغيل.
• TypeScript يدعم مكتبات جافا سكريبت ووثائق واجهة برمجة التطبيقات.
• إنها لغة برمجة نصية اختيارية النوع، لذا يمكن اعتماد الأنواع تدريجياً.
• TypeScript يمكن تحويل الكود إلى نص عادي Javaكود برمجي لأي متصفح مستهدف.
• فهو يوفر بنية أفضل للبرمجيات وتقنيات برمجة كائنية التوجه.
• فهو يتيح دعمًا أفضل لأدوات وقت التطوير، بما في ذلك الإكمال التلقائي وإعادة البناء الآمن.
• يمكنها توسيع نطاق اللغة إلى ما هو أبعد من المعيار، مع ميزات مثل أدوات التزيين.

تتمثل أكبر فائدة عملية في دعم المحرر. فبفضل معرفة المُصرّف لبنية كل قيمة، يستطيع المحرر إعادة تسمية خاصية في المشروع بأكمله، والإبلاغ عن كل موضع لم يعد مطابقًا.

TypeScript تاريخنا

دعونا نلقي نظرة على المعالم المهمة من تاريخ TypeScript:

• بعد عامين من التطوير الداخلي في Microsoft, TypeScript تم إصدار الإصدار 0.9 في عام 2013.
• TypeScript تم إصدار الإصدار 1.0، مع دعم إضافي للأنواع العامة، في مؤتمر Build 2014.
• في يوليو 2014 ، جديد TypeScript وصل برنامج الترجمة الذي كان أسرع بخمس مرات من الإصدار السابق.
• في يوليو 2015، تمت إضافة الدعم لوحدات ES6، والكلمة المفتاحية namespace، و for…of، والديكورات.
• في نوفمبر 2016، تمت إضافة أنواع الخرائط، وأنواع المفاتيح والبحث، وراحة الكائنات وانتشارها.
• في 27 مارس 2018، تمت إضافة الأنواع الشرطية و keyof المحسّن مع أنواع التقاطع.
• TypeScript الإصدار 5.0، الذي صدر في مارس 2023، قام بتحديث الديكورات وتقليل حجم الحزمة.
• TypeScript وصل الإصدار 6.0 في مارس 2026 كإصدار نهائي مبني على Javaقاعدة بيانات التعليمات البرمجية النصية.
• TypeScript ينقل الإصدار 7.0 المُصرّف إلى تطبيق أصلي للغة Go، وهو ما Microsoft تشير التقارير إلى أنها أسرع بعشر مرات تقريبًا من الإصدار 6.0.

من يستخدم TypeScript?

TypeScript لم يعد خيارًا متخصصًا. فهو يدعم العديد من أدوات الواجهة الأمامية والخلفية الأكثر استخدامًا، والقائمة أدناه توضح أين من المرجح أن يصادفه المبتدئ.

• الزاوي: إطار عمل Angular مكتوب بلغة TypeScriptومن المتوقع أن تتم كتابة كود التطبيق فيه أيضاً.
• مشاريع React و Vue: كلا النظامين البيئيين يشحنان رسمياً TypeScript القوالب، ومعظم البرامج الحديثة تُفعّل هذه الميزة افتراضيًا.
• واجهات Node.js الخلفية: تم بناء أطر عمل الخادم مثل NestJS حول TypeScript فصول دراسية ومصممو ديكور.
• أدوات التحرير: Visual Studio Code وهي بحد ذاتها كبيرة TypeScript قاعدة البيانات، وهذا هو السبب في أن دعمها للغات كامل للغاية.
• واجهات المستخدم للشركات الكبيرة: تعتمد الفرق التي تعمل مع العديد من المساهمين هذه الطريقة لاكتشاف أخطاء التكامل قبل النشر.

كيفية تنزيل وتثبيت TypeScript

فيما يلي عملية التنزيل والتثبيت خطوة بخطوة TypeScript:

الخطوة 1) تنزيل وتثبيت Nodejs

انتقل إلى الموقع الرسمي لـ Node.js، https://nodejs.org/en/download/ثم قم بتنزيل وتثبيت Node.js لنظام التشغيل الخاص بك. تتوفر تعليمات مفصلة في الدليل الموجود على كيفية تنزيل وتثبيت Node.js.

الخطوة 2) التحقق من إصدار Nodejs وnpm

للتحقق مما إذا كان Nodejs و npm مثبتين، تحقق من الإصدار في موجه الأوامر الخاص بك.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

أي إصدار حالي من Node LTS يعمل. TypeScript لا يتطلب الأمر سوى إصدار مدعوم من Node لتشغيل المُترجم.

الخطوة 3) TypeScript التركيب

أنشئ مجلد مشروعك typeproject\ وقم بتشغيل npm init، كما هو موضح في الأمر أدناه:

npm init

الخطوة 4) ابدأ التثبيت

يؤدي هذا إلى إنشاء ملف package.json، الذي سيخزن تبعيات مشروعنا.

بمجرد الانتهاء ، قم بالتثبيت TypeScript كما يلي:

npm -g install typescript

سوف يعتني الأمر أعلاه بالتثبيت TypeScript. إضافة "-g" إلى npm install سيؤدي إلى التثبيت TypeScript على مستوى العالم. ميزة استخدام الخيار -g هي أنه يمكنك استخدام TypeScript TSC يمكنك تنفيذ الأمر من أي مجلد، حيث أنه مثبت عالميًا. في حال كنت لا ترغب في التثبيت TypeScript على مستوى العالم، استخدم الأمر التالي:

npm install --save-dev typescript

أنشئ مجلدًا باسم src\ في دليل مشروعك، ثم أنشئ داخله ما يلي: TypeScript قم بملف test.ts واكتب الكود الخاص بك.

مثال: test.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

جمع TypeScript رمز ل Javascript

لتجميع الكود أعلاه، استخدم الأمر التالي.

If TypeScript إذا تم تثبيته عالميًا، استخدم الأمر التالي:

tsc test.ts

If TypeScript إذا تم تثبيته محليًا في مشروعك، فأنت بحاجة إلى استخدام مسار TypeScript من مجلد node_modules، كما هو موضح، أو قم بتشغيله من خلال npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

سيؤدي الأمر أعلاه إلى إنشاء ملف test.js الذي سيحتوي على الكود المُجمَّع إلى Javaالنصي.

مثال: test.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

تنفيذ Javascript باستخدام Nodejs

سنقوم الآن بتنفيذ ملف test.js في Node.js على النحو التالي:

D:\typeproject\src>node test.js
15

يتم عرض القيمة التي تم تمريرها إلى console.log عند تشغيل test.js.

تنفيذ Javaالبرنامج النصي في المتصفح

على سبيل المثال:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

جمع TypeScript رمز ل Javascript باستخدام نسخة EcmaScript

TypeScript يدعم هذا الإصدار جميع ميزات ECMAScript المُتاحة، ويمكن للمطورين استخدامها أثناء البرمجة. ولكن لا تدعم المتصفحات القديمة جميع الميزات الجديدة، لذا قد تحتاج إلى تجميع البرنامج باستخدام إصدار أقدم من ECMAScript. TypeScript يوفر خيارات للمترجم تقوم بذلك بالضبط.

مثال: test.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

للتجميع إلى إصدار ES الذي تختاره، يمكنك استخدام الخيار target أو t في الأمر كما يلي:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

افتراضيًا، يكون الهدف هو ES3 للمترجم الكلاسيكي. إذا كنت ترغب في تغييره، يمكنك استخدام الأمر المذكور أعلاه.

سنستخدم حاليًا ES6 كهدف:

tsc --target ES6  test.ts

test.ts إلى test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

يبقى الكود كما هو، لأن دالة السهم التي استخدمتها هي ميزة من ميزات ES6 ولا تتغير عند تجميعها إلى ES6.

بشكل افتراضي، يكون الهدف هو ES3، لذا بدون تحديد هدف، ستحصل على ملف test.js كالتالي:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

لذا هنا، يتم تغيير السهم السميك إلى دالة مجهولة عادية.

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

المتغيرات تُستخدم لتخزين القيم، ويمكن أن تكون القيمة سلسلة أو رقمًا أو منطقيًا أو تعبيرًا. عندما يتعلق الأمر بالمتغيرات في TypeScript، فهي تشبه Javaسيناريوفلنتعلم إذن كيفية تعريف المتغيرات وتعيين قيمة لها في TypeScript.

لا يمكن استخدام المتغيرات في التعليمات البرمجية دون تعريفها. لتعريف متغير، يمكنك استخدام

فار كلمة رئيسية

اسمحوا الكلمة

CONST الكلمة

العمل مع المتغيرات في TypeScript يشبه Javaالبرنامج النصي، والمستخدمون المطلعون على Javaسيجد البرنامج النصي ذلك سهلاً للغاية. في البرمجة الحديثة، اسمحوا و CONST مفضلة على فار، لأن نطاق كتلتها يمنع فئة كاملة من الأخطاء.

الإعلان عن المتغيرات باستخدام var

بناء الجملة:

var firstname = "Roy";

دعونا نلقي نظرة على بعضها TypeScript أمثلة لفهم آلية عمل الكلمة المفتاحية var ونطاق المتغيرات المُعلنة باستخدامها فار الكلمة.

مثال 1:

var k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    return k++;
}

test(); // output as 1
test(); // output as 2
alert(c); // will throw error, Uncaught ReferenceError: c is not defined

مثال 2:

var t = 0; // variable t is declared in global scope
function test() {
    var t = 10; // t is redeclared inside the function, so changes stay local
    return t;
}
test(); // will return 10
console.log(t); // will console 0

مثال 3:

var i = 0;
function test() {
    if (i > 0) {
      var t = 1;
    }
    return t;
}

test(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

الإعلان عن المتغيرات باستخدام Let

استخدم TypeScript بناء جملة Let كما هو موضح أدناه:

بناء الجملة:

let name = "Roy";

عمل اسمحوا المتغير يكاد يكون مطابقًا لـ فارولكن مع اختلاف مهم واحد، وهو ما يوضحه المثال أدناه.

على سبيل المثال:

let i = 1;
function test() {
    if (i > 0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error: Cannot find name 't'

ما سبق TypeScript يُظهر المثال خطأً، لكن نفس الكود كان سيعمل مع فار الكلمة المفتاحية. المتغيرات المُعلنة باستخدام اسمحوا لا تتوفر هذه المتغيرات إلا داخل الكتلة التي تم تعريفها فيها. في هذا المثال، يوجد المتغير t داخل كتلة if فقط، وليس في الدالة بأكملها.

ينطبق الأمر نفسه داخل أي دالة، أو حلقة تكرار (for)، أو حلقة تكرار (while)، أو كتلة تبديل (switch). لا يمكن الوصول إلى متغير let إلا داخل تلك الكتلة، ومحاولة الوصول إليه من خارجها تُسبب خطأً. هذا هو الفرق الرئيسي بين var و let.

الإعلان عن المتغيرات باستخدام const

تعني كلمة "const" المتغيرات الثابتة. وهي تشبه متغيرات "let"، مع اختلاف أنه بمجرد إسناد قيمة لها، لا يمكن تغييرها. لذلك، يجب تهيئة تعريف "const" في نفس السطر.

بناء الجملة:

const name = "Roy";

على سبيل المثال:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

لذا استخدم const عندما تعلم أن القيمة المُسندة لن تُعاد إسنادها. لاحظ أن const يمنع إعادة إسناد الربط، وليس تعديل الكائن الذي يشير إليه.

أنواع في TypeScript

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

فيما يلي الأنواع الأساسية:

رقم الهاتف

يقبل فقط الأعداد الصحيحة، والأعداد العشرية، والكسور، والقيم العددية المماثلة.

بناء الجملة:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

فيما يلي بعض الطرق المهمة التي يمكن استخدامها مع أنواع الأرقام:

للتصليح() – سيقوم بتحويل الرقم إلى سلسلة نصية مع الاحتفاظ بالمنازل العشرية المحددة للطريقة.

إلى سلسلة() – ستقوم هذه الطريقة بتحويل الرقم إلى سلسلة نصية.

قيمة ال() - هذه الطريقة ستعيد القيمة الأولية للرقم.

إلى الدقة () – ستقوم هذه الطريقة بتنسيق الرقم بطول محدد.

مثال: مع جميع طرق الأرقام

let _num :number = 10.345;
_num.toFixed(2);      // "10.35"
_num.valueOf();      // 10.345
_num.toString();     // "10.345"
_num.toPrecision(2); // "10"

خيط

سلسلة نصية: قيم نصية فقط.

بناء الجملة:

let str :string = "hello world";

فيما يلي بعض الطرق المهمة التي يمكن استخدامها مع أنواع السلاسل النصية:

• انقسم() – ستقوم هذه الطريقة بتقسيم السلسلة إلى مصفوفة.
• شارات() – ستعطي هذه الطريقة الحرف الموجود في الفهرس المحدد.
• دليل ل() – ستعطي هذه الطريقة موضع أول ظهور للقيمة المعطاة لها.
• يحل محل() – تأخذ هذه الطريقة سلسلتين نصيتين. تبحث عن القيمة الأولى في السلسلة النصية، وإذا كانت موجودة، فإنها تستبدلها بالقيمة الثانية، مما ينتج عنه سلسلة نصية جديدة.
• تقليم() – ستزيل هذه الطريقة المسافات البيضاء من كلا جانبي السلسلة.
• SUBSTR() – ستعطي هذه الطريقة جزءًا من السلسلة، اعتمادًا على موضع البداية والطول المحدد.
• سلسلة فرعية() – ستُعطي هذه الطريقة جزءًا من السلسلة، اعتمادًا على موضعَي البداية والنهاية. يتم استبعاد الحرف الموجود في موضع النهاية.
• إلى الحالة العليا() – سيقوم بتحويل السلسلة إلى أحرف كبيرة.
• toLowerCase() - سيتم تحويل السلسلة إلى أحرف صغيرة.

على سبيل المثال:

let _str:string = "Typescript";

_str.charAt(1);                // y
_str.split("");                // ["T","y","p","e","s","c","r","i","p","t"]
_str.indexOf("s");             // 4, gives -1 if the value does not exist
_str.replace("Type", "Coffee"); // "Coffeescript"
_str.trim();                    // "Typescript"
_str.substr(4, _str.length);   // "script"
_str.substring(4, 10);         // "script"
_str.toUpperCase();             // "TYPESCRIPT"
_str.toLowerCase();             // "typescript"

منطقية

لا تقبل القيمة المنطقية (boolean) إلا القيمتين المنطقيتين "صحيح" و"خطأ". على عكس القيمة المنطقية العادية (plain). Javaفي لغة البرمجة النصية، لا يتم قبول الأرقام 0 و 1، لأنها من نوع رقم.

بناء الجملة:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

اي

بناء الجملة:

let a :any = 123
a = "hello world"; // changing type will not give any error.

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

باطل

يُستخدم النوع الفارغ في الغالب كنوع إرجاع لدالة لا تُرجع أي شيء.

بناء الجملة:

function testfunc():void{
 //code here
}

TypeScript مجموعة

An مجموعة in TypeScript هو نوع بيانات يمكنك من خلاله تخزين قيم متعددة. دعونا نتعلم كيفية تعريف القيم وتعيينها لعمليات المصفوفات في TypeScript.

منذ TypeScript بما أنها لغة ذات كتابة قوية، يجب عليك تحديد نوع بيانات القيم في المصفوفة. وإلا، فسيتم التعامل معها على أنها من النوع أي نوع.

قم بإعلان وتهيئة صفيف

بناء الجملة:

let nameofthearray : Array<typehere>

مثال

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; // array with all string values

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; // array with all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; // mixed

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

طرق مختلفة للوصول إلى العناصر من مصفوفة

للحصول على العناصر من مصفوفة، تبدأ القيم من الفهرس 0 حتى طول المصفوفة ناقص واحد.

let years: Array<number> = [2016, 2017, 2018, 2019];
years[0]; // output will be 2016
years[1]; // output will be 2017
years[2]; // output will be 2018
years[3]; // output will be 2019

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

باستخدام TypeScript لحلقة

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i = 0; i < years.length; i++) {
     console.log(years[i]);
}

الإخراج:

2016
2017
2018
2019

باستخدام حلقة for-in

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i in years) {
     console.log(years[i]);
}

الإخراج:

2016
2017
2018
2019

باستخدام حلقة for-of

let years: Array<number> = [2016, 2017, 2018, 2019];
for (let i of years) {
     console.log(i);
}

الإخراج:

2016
2017
2018
2019

استخدام حلقة forEach

let years: Array<number> = [2016, 2017, 2018, 2019];
years.forEach(function(yrs, i) {
  console.log(yrs);
});

الإخراج:

2016
2017
2018
2019

TypeScript طرق المصفوفة

استخدم TypeScript يحتوي كائن المصفوفة على العديد من الخصائص والأساليب التي تُسهّل على المطورين التعامل مع المصفوفات بكفاءة وسلاسة. يمكنك الحصول على قيمة خاصية ما بتحديد arrayname.property، ومخرجات أسلوب ما بتحديد arrayname.method().

مثال على خاصية الطول

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

console.log(months.length);  // 12

مثال للطريقة العكسية

console.log(months.reverse());
// ["Dec","Nov","Oct","Sept","Aug","July","June","May","April","March","Feb","Jan"]

مثال على طريقة الفرز

console.log(months.sort());
// ["April","Aug","Dec","Feb","Jan","July","June","March","May","Nov","Oct","Sept"]

مثال على طريقة البوب

console.log(months.pop()); // Dec

مثال لطريقة التحويل

console.log(months.shift()); // Jan

مثال على طريقة الدفع

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
years.forEach(function(yrs, i) {
  console.log(yrs); // 2015, 2016, 2017, 2018, 2019, 2020
});

مثال على طريقة concat

let array1: Array<number> = [10, 20, 30];
let array2: Array<number> = [100, 200, 300];
console.log(array1.concat(array2)); // [10, 20, 30, 100, 200, 300]

فئة في TypeScript

TypeScript هي مجموعة شاملة من Javaالنص البرمجي، لذا كل ما هو ممكن في Javaالنص ممكن أيضًا في TypeScriptتُعدّ الفئة ميزة أُضيفت بدءًا من ES6 فصاعدًا. في السابق Javaتم تحقيق وظائف شبيهة بالبرمجة النصية باستخدام دالة ذات أساليب نموذجية لإعادة استخدام الكود. باستخدام الفئات، يمكن أن يقترب الكود الخاص بك من لغات مثل... Java، سي#، و Pythonحيث يمكن إعادة استخدام الكود بسهولة.

تعريف فئة في TypeScript

فيما يلي الصيغة الأساسية للفئة في TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class
}

مثال: مثال عملي على الفصل

class Students {
    age : number;
    name : string;
    roll_no : number;

    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

في المثال أعلاه، لديك فئة تسمى الطلاب. تحتوي هذه الفئة على الخصائص التالية: العمر، الاسم، ورقم التسجيل.

البناء في أ TypeScript الفئه

يحتوي الصنف Students المعرّف أعلاه على دالة إنشاء كما هو موضح أدناه:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

تحتوي دالة البناء على المعاملات age و name و roll_no. تتولى دالة البناء تهيئة الخصائص عند إنشاء نسخة من الصنف. يتم الوصول إلى الخصائص باستخدام يمكنك استخدام الكلمات المفتاحية، على سبيل المثال this.age للوصول إلى العمر و this.roll_no للوصول إلى رقم التسجيل. كما يمكنك استخدام مُنشئ افتراضي، كما هو موضح أدناه:

constructor () {}

طرق داخل أ TypeScript الفئه

في فئة الطلاب توجد طرق محددة، على سبيل المثال getRollNo() و getName() و getAge()، والتي تُرجع قيم الخصائص roll_no و name و age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

إنشاء نسخة من فئة في TypeScript

In TypeScriptلإنشاء نسخة من فئة ما، استخدم عامل التشغيل new. عند إنشاء نسخة باستخدام new، ستحصل على كائن يمكنه الوصول إلى خصائص وأساليب الفئة، كما هو موضح أدناه:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge();  // 15
student_details.getName(); // Harry John

تجميع TypeScript فئة ل Javaسيناريو

يمكنك استخدام أمر tsc كما هو موضح أدناه للتجميع إلى Javaالنصي.

Command: tsc  Students.ts

خرج ملف Javaيظهر رمز البرنامج النصي عند التجميع كما هو موضح أدناه:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Javaفي البرنامج النصي، يتم تحويل الفئة إلى دالة يتم استدعاؤها ذاتيًا.

الوراثة الطبقية

يمكن وراثة الفصول باستخدام يمتد الكلمة الرئيسية في TypeScript.

بناء جملة وراثة الفئة:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }

   //define methods for class

}

الفئة ب سوف تكون قادرة على المشاركة فئة أ الأساليب والخصائص.

إليك مثال عملي لفئة تستخدم الوراثة:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge();      // output is 24
_std1.setMarks(500);
_std1.getMarks();    // output is 500

لديك فئتان، Person و Student. ترث فئة Student من فئة Person، ويمكن للكائن الذي تم إنشاؤه من فئة Student الوصول إلى أساليبه وخصائصه الخاصة بالإضافة إلى تلك الخاصة بالفئة التي ترث منها.

والآن دعونا نضيف بعض التغييرات إلى الفئة أعلاه.

على سبيل المثال:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge();   // output is 24
_std1.getMarks(); // output is 500

يتمثل التغيير مقارنةً بالمثال السابق في تعريف دالة إنشاء في الصنف Student. تأخذ دالة الإنشاء نفس المعاملات التي يأخذها الصنف الأساسي، بالإضافة إلى أي معاملات إضافية خاصة بها.

In TypeScript يجب استدعاء الدالة الأصلية (super) مع جميع معاملات الفئة الأساسية. يجب أن يكون هذا أول سطر داخل الدالة البانية، لأن الدالة الأصلية (super) تُنفّذ الدالة البانية للفئة المشتقة. أي خاصية مُعلنة في الفئة المشتقة، مثل tmarks، يجب تعيين قيمتها صراحةً، وإلا ستُرجع الدالة getMarks قيمة غير مُعرّفة (undefined).

معدّلات الوصول في TypeScript

TypeScript يدعم هذا النظام مُعدِّلات الوصول العامة والخاصة والمحمية على الدوال والخصائص. افتراضيًا، إذا لم يُحدَّد مُعدِّل وصول، تُعتبر الدالة أو الخاصية عامة ويمكن الوصول إليها بسهولة من كائن الفئة.

في حالة مُعدِّلات الوصول الخاصة، لا تكون العناصر متاحة من كائن الفئة، وإنما تُستخدم داخل الفئة فقط. وهي غير متاحة للفئة الموروثة.

في حالة مُعدِّلات الوصول المحمية، يُقصد استخدام الأعضاء داخل الفئة والفئة الموروثة، ولا يمكن الوصول إليها من كائن الفئة.

على سبيل المثال:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is " + this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
        this.tmarks = tmarks;
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks();    // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails();  // output is Name is Sheena

واجهة في TypeScript

واحدة من الميزات الأساسية ل TypeScript هي الواجهات. الواجهة عبارة عن مجموعة من القواعد التي يجب على الكيان الذي يستخدمها تطبيقها. يمكن أن يكون الكيان فئة أو دالة أو متغيرًا. تتكون الواجهة من خصائص وأساليب. يمكنك تحديد خاصية أو أسلوب على أنه اختياري باستخدام علامة الاستفهام "?". تضيف الواجهة فحصًا قويًا للنوع لأي دالة أو متغير أو فئة تُطبّقها.

بناء جملة الواجهة في TypeScript

interface Dimension {
    width: string;
    height: string;
}

لقد قمت بتعريف واجهة باسم Dimension تحتوي على الخاصيتين width و height، وكلاهما من نوع سلسلة نصية.

يمكن الآن تطبيق هذه الواجهة باستخدام متغير أو دالة أو فئة. إليك مثال على متغير يُطبّق واجهة البُعد.

على سبيل المثال:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

يحتوي توقيع واجهة Dimension على العرض والارتفاع، وكلاهما إلزامي. في حال فقدان أي خاصية، أو تغيير نوع، فسيحدث خطأ أثناء ترجمة الكود. Javaالنصي.

الكود أعلاه، عند تجميعه إلى Javaالنص البرمجي، يبدو كالتالي:

var _imagedim = {
    width: "100px",
    height: "200px"
};

دعونا الآن نرى كيفية استخدام واجهة مع وظيفة.

استخدام واجهة على دالة كنوع إرجاع

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

في المثال أعلاه، تُستخدم الواجهة Dimension كنوع إرجاع للدالة getDimension(). يجب أن تتطابق قيمة الإرجاع مع الخصائص والأنواع المُعلنة في الواجهة.

المترجمة Javaسيكون رمز البرنامج النصي كما يلي:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

أثناء عملية التجميع، إذا لم يتطابق نوع الإرجاع مع الواجهة، فسيتم طرح خطأ.

الواجهة كمعامل دالة

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width + "-" + dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // "300px-250px"

في المثال أعلاه، استخدمتَ الواجهة Dimension كمعامل للدالة getDimension(). عند استدعاء الدالة، يجب أن يتطابق المعامل المُمرَّر إليها مع القواعد المُحدَّدة بواسطة الواجهة.

المترجمة Javaسيكون رمز البرنامج النصي كما يلي:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

فئة تُنفذ واجهة

لاستخدام واجهة مع فئة، تحتاج إلى استخدام الكلمة المفتاحية الأدوات.

صيغة بناء جملة لفئة تُنفذ واجهة:

class NameofClass implements InterfaceName {
}

يوضح المثال التالي كيفية عمل واجهة مع فئة.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string;
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

في المثال أعلاه، قمت بتعريف الواجهة Dimension مع الخصائص width و height، وكلاهما من نوع سلسلة نصية، وطريقة تسمى getWidth() والتي تُرجع سلسلة نصية.

المترجمة Javaسيكون رمز البرنامج النصي كما يلي:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

وظائف في TypeScript

الوظائف هي مجموعات من التعليمات التي تُنفذ لإنجاز مهمة ما. Javaفي البرمجة النصية، يُكتب معظم الكود على شكل دوال، وتلعب هذه الدوال دورًا رئيسيًا. TypeScript تتوفر لديك الفئات والواجهات والوحدات النمطية ومساحات الأسماء، لكن الدوال لا تزال تلعب دورًا مهمًا. الفرق بين الدالة في Javaالبرنامج النصي و TypeScript هل تتوفر أنواع المعاملات والإرجاع مع TypeScript وظيفة.

Javaوظيفة النص:

function add (a1, b1) {
   return a1+b1;
}

TypeScript وظيفة:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

في الدالة أعلاه، اسم الدالة هو add، والمعاملات هي a1 و b1كلاهما من نوع عدد، ونوع القيمة المُعادة هو أيضًا عدد. إذا مررت سلسلة نصية إلى الدالة، فستُظهر خطأً أثناء الترجمة. Javaالنصي.

إجراء استدعاء للدالة: إضافة

let x = add(5, 10);   // will return 15
let b = add(5);       // error TS2554: Expected 2 arguments, but got 1
let c = add(3,4,5);   // error TS2554: Expected 2 arguments, but got 3
let t = add("Harry", "John");
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'

المعلمات a1 و b1 تُعدّ هذه البيانات إلزامية، وسيؤدي عدم تحديدها إلى حدوث خطأ. تُعتبر أنواع المعاملات ونوع القيمة المُعادة على نفس القدر من الأهمية، ولا يمكن تغييرها بعد تحديدها.

المعلمات الاختيارية للوظيفة

In Javaفي لغة البرمجة النصية، جميع معاملات الدوال اختيارية وتُعتبر غير مُعرّفة إذا لم يتم تمريرها. الأمر ليس كذلك في TypeScriptبعد تحديد المعلمات، يجب عليك إدخالها. إذا كنت ترغب في جعل إحدى المعلمات اختيارية، فأضف علامة استفهام بعد اسم المعلمة، كما هو موضح أدناه:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3

يرجى ملاحظة أنه يجب تعريف المعاملات الاختيارية في النهاية. لا يمكنك جعل المعامل الأول اختياريًا والثاني إلزاميًا، لأن المترجم لن يعرف القيمة المُدخلة.

تعيين القيم الافتراضية إلى المعلمات

يمكنك تعيين قيم افتراضية للمعلمات كما هو موضح أدناه:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John");      // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

على غرار المعلمات الاختيارية، يجب أيضًا الاحتفاظ بالمعلمات التي تم تهيئتها افتراضيًا في نهاية قائمة المعلمات.

معلمات الراحة

لقد رأيت كيف TypeScript يتعامل مع المعاملات الإلزامية والاختيارية ومعاملات القيمة الافتراضية. الآن سنلقي نظرة على معاملات الباقي. معاملات الباقي هي مجموعة من المعاملات الاختيارية المُعرَّفة معًا، باستخدام ثلاثة النقاط (...) متبوعًا باسم المعامل، وهو عبارة عن مصفوفة.

بناء جملة معلمات الراحة:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

كما هو موضح أعلاه، فإنّ المعامل المتبقي عبارة عن مصفوفة مسبوقة بثلاث نقاط. ستحتوي هذه المصفوفة على جميع الوسائط المتبقية التي تم تمريرها إلى الدالة.

على سبيل المثال:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is MondayTuesdayWednesdayThursday

وظائف السهم

تعد وظيفة السهم إحدى الميزات المهمة التي تم إصدارها في ES6، وهي متوفرة في TypeScript أيضًا. يحتوي التركيب النحوي على سهم سميك، ومن هنا جاء الاسم.

بناء جملة دالة السهم:

var nameoffunction = (params) => {
 // code here
}

ما فائدة دالة السهم؟

دعونا نلقي نظرة على مثال لفهم حالة استخدام دالة السهم.

على سبيل المثال:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

لقد أنشأتَ دالةً تحتوي على خاصية score مُهيأة إلى 0، ودالةً getScore تستخدم داخليًا setTimeout، وبعد ثانية واحدة، تُسجِّل this.score. القيمة المُسجَّلة غير مُعرَّفة على الرغم من أن this.score مُعرَّفة ومُهيَّأة. تكمن المشكلة في الكلمة المفتاحية. الدالة الموجودة داخل setTimeout لها متغيرها الخاص this، وبما أن score غير مُعرّف فيه، فإن النتيجة غير مُعرّفة.

ويمكن التعامل مع الأمر نفسه باستخدام دالة السهم، كما هو موضح أدناه:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(() => {
            console.log(this.score);   // you get 0
        }, 1000);
    }
}

var a = new ScoreCard();
a.getScore();

وظيفة السهم ليس لها خاصيتها وبدلاً من ذلك، تشارك هذه الدالة القيمة الموجودة في نطاقها الأصلي، لذا يمكن الوصول إلى المتغيرات المُعلنة خارج نطاقها باستخدام هذه القيمة داخل دالة السهم. وتُعدّ هذه الدوال مفيدةً نظرًا لاختصار صيغتها، بالإضافة إلى استخدامها في دوال الاستدعاء، ومعالجات الأحداث، ودوال التوقيت.

TypeScript تتضمن التعدادات

A TypeScript enum هو كائن يحتوي على مجموعة من القيم المرتبطة المخزنة معًا. Javaلا يدعم البرنامج النصي التعدادات بشكل أصلي. معظم لغات البرمجة مثل Java، ج، و C++ يدعم التعدادات، و TypeScript كما أنها متاحة أيضًا. يتم تعريف التعدادات باستخدام الكلمة المفتاحية enum.

كيفية إعلان التعداد؟

بناء الجملة:

enum NameofEnum {
   value1,
   value2,
    ..
}

مثال: التعداد

enum Directions {
    North,
    South,
    East,
    West
}

في المثال أعلاه، قمت بتعريف نوع بيانات تعدادي يُسمى "الاتجاهات" بقيم: شمال، جنوب، شرق، وغرب. يتم ترقيم القيم بدءًا من 0 للقيمة الأولى، وتزداد بمقدار 1 لكل قيمة لاحقة.

قم بتعريف نوع بيانات تعدادي (Enum) بقيمة عددية.

بشكل افتراضي، إذا لم يتم إعطاء قيمة لعضو في التعداد، فإنه يأخذ رقمًا يبدأ من 0. يوضح المثال التالي تعدادًا بقيم عددية صريحة.

enum Directions {
North = 0,
South = 1,
East = 2,
West = 3
}

يمكنك أيضًا تعيين قيمة ابتدائية، وستتلقى العناصر التالية قيمًا متزايدة. على سبيل المثال:

enum Directions {
North = 5,
South, // will be 6
East,  // 7
West   // 8
}

الآن يبدأ الشمال من 5، لذا فإن الجنوب هو 6، والشرق هو 7، والغرب هو 8.

يمكنك أيضًا تعيين قيم من اختيارك بدلاً من القيم الافتراضية. على سبيل المثال:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

كيفية الوصول إلى التعداد؟

يوضح المثال التالي كيفية استخدام تعداد (enum) في التعليمات البرمجية الخاصة بك:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North);      // output is 0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]);       // output is North

المترجمة Javaالنص كالتالي:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

منذ Javaلا يدعم البرنامج النصي التعدادات، حيث يقوم المترجم بتحويل التعداد إلى دالة ذاتية الاستدعاء، كما هو موضح أعلاه. إن عملية الإسناد المزدوج هي التي تُنشئ الخريطة العكسية.ping من الرقم إلى الاسم.

قم بتعريف نوع بيانات تعدادي (Enum) بقيمة نصية.

يمكنك تعيين قيم نصية من اختيارك، كما هو موضح في المثال أدناه.

على سبيل المثال:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North);      // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]);       // output is undefined

المترجمة Javaالنص كالتالي:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

ما هي الوحدات في TypeScript?

الملفات التي تم إنشاؤها في TypeScript تتمتع هذه المتغيرات بإمكانية الوصول العام، مما يعني إمكانية الوصول إلى المتغيرات المُعلنة في ملف ما من ملف آخر. قد تتسبب هذه الطبيعة العامة في حدوث تعارضات برمجية ومشاكل أثناء التشغيل. يمكن استخدام وظائف تصدير واستيراد الوحدات لتجنب تعارضات المتغيرات والدوال العامة. وقد ظهرت هذه الميزة في Javaيدعم هذا البرنامج النصي إصدار ES6، كما أنه مدعوم أيضًا في TypeScript.

لماذا تحتاج إلى وحدات في TypeScript?

يوضح المثال التالي المشكلة بدون وحدات نمطية.

مثال test1.ts

let age : number = 25;

لقد قمت بتحديد عمر متغير لرقم النوع في test1.ts.

مثال test2.ts

في ملف test2.ts يمكنك الوصول إلى المتغير السن تم تعريفها في ملف test1.ts، ويمكنك أيضًا تعديلها، كما هو موضح أدناه:

age = 30; // changed from 25 to 30.
let _new_age = age;

قد يؤدي هذا إلى الكثير من المشاكل، حيث أن المتغيرات متاحة عالميًا ويمكن تعديلها من أي مكان.

مع نماذجيبقى الكود المكتوب محليًا داخل الملف ولا يمكن الوصول إليه من خارجه. لمشاركة أي شيء من ملف، يجب تصديره باستخدام الكلمة المفتاحية export. تصدير يُستخدم هذا عندما تريد استخدام متغير أو فئة أو دالة أو واجهة في ملف آخر. استيراد يُستخدم هذا الأسلوب عند الرغبة في الوصول إلى عنصر مُصدَّر. ويحافظ هذا الأسلوب على سلامة الكود داخل الملف، وحتى في حال تعريف نفس أسماء المتغيرات، فلن يحدث أي خلط بينها.

باستخدام التصدير والاستيراد

توجد طرق عديدة للتصدير والاستيراد. سنتناول الصيغة الأكثر شيوعًا.

بناء جملة الاستيراد والتصدير 1:

export  nameofthevariable or class name or interface name etc

//To import the above variable or class name or interface you have to use import as shown below:

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

فيما يلي مثال عملي باستخدام التصدير والاستيراد.

test1.ts

export let age: number = 25;

تُستخدم الكلمة المفتاحية export لمشاركة متغير العمر مع ملف آخر.

test2.ts

import { age } from "./test1"
let new_age :number = age;

تُستخدم الكلمة المفتاحية import للوصول إلى السن متغير، وتحتاج إلى تحديد موقع الملف كما هو موضح أعلاه.

صيغة الاستيراد والتصدير 2:

هناك طريقة أخرى للتصدير والاستيراد، وصيغتها كما هو موضح أدناه:

export = classname;

import classname = require("file path of modulename")

عندما تستخدم تصدير = لتصدير الوحدة النمطية الخاصة بك، يجب أن يستخدم الاستيراد require("مسار ملف اسم الوحدة النمطية").

إليك مثال عملي يوضح هذه الحالة.

Customer.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

محمل الوحدة النمطية

لا يمكن للوحدات البرمجية أن تعمل بمفردها، لذا فأنت بحاجة إلى مُحمِّل وحدات برمجية لتحديد تبعيات الاستيراد، كما هو موضح في TypeScript الأمثلة المذكورة أعلاه. مُحمّلات الوحدات النمطية المتاحة هي CommonJS لـ Nodejs و Require.js للتشغيل في المتصفح.

لتجميع التعليمات البرمجية باستخدام تنسيق وحدة CommonJS، استخدم الأمر التالي:

tsc --module commonjs testCustomer.ts

لتجميع التعليمات البرمجية باستخدام تنسيق وحدة Requirejs، استخدم الأمر التالي:

tsc --module amd testCustomer.ts

سيتم تحويل الملفات التابعة إلى ملفات جافا سكريبت باستخدام الأمر أعلاه.

مثال لتحويل ملف testCustomer.ts إلى ملف testCustomer.js باستخدام Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

مثال: تحويل ملف Customer.ts إلى ملف Customer.js باستخدام Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

لاختباره باستخدام require.js، تحتاج إلى إنشاء ملف يسمى main.js يشير إلى التبعيات كما هو موضح.

هنا هو هيكل المجلد:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

main.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

test.html

<!DOCTYPE html>
<html>
<head>
    <title>TypeScript Module testing using Requirejs</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    <h3>Testing modules using Requirejs</h3>
</body>
</html>

مساحات الأسماء في TypeScript

يحتوي نطاق الاسم على مجموعة من الفئات والواجهات والمتغيرات والوظائف معًا في ملف واحد.

بناء جملة مساحة الاسم

namespace name{

export class {
}

export interface {
}

export const constname;

}

الكود ذو الصلة متاح ضمن نطاق اسم واحد.

مثال عمل مساحة الاسم: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

اسم مساحة الاسم هو إعداد الطالب، وقد أضفت واجهة StudDetails، ودالة addSpace، وفئة تسمى Student.

الوصول إلى مساحة اسم

فيما يلي الكود الذي تستخدم فيه مساحة الاسم إعداد الطالب.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

يجب الإشارة إلى الفئة أو الواجهة أو الدالة المتاحة داخل مساحة اسم باستخدام اسم مساحة الاسم، على سبيل المثال StudentSetup.addSpace للوصول إلى الوظيفة و StudentSetup.Student للوصول إلى الفصل.

يمكنك دمج كلا الملفين في ملف جافا سكريبت واحد كما هو موضح أدناه:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

تحقق من المخرجات في موجه الأوامر باستخدام الأمر التالي:

node namespace.js

الإخراج:

The name is :H a r r y

الإعلانات المحيطة في TypeScript

TypeScript يتيح لك استخدام جهات خارجية Javaملفات البرمجة النصية التي تستخدم تعريفات عامة. ميزة هذه الخاصية هي أنك لست مضطرًا لإعادة كتابة المكتبة، ومع ذلك يمكنك استخدام جميع ميزاتها مع التحقق من النوع. TypeScript.

بناء الجملة المحيطة

لتعريف وحدة محيطية:

declare module moduleName {
   //code here
}

يجب حفظ ملف الصوت المحيطي باسم:

filename.d.ts

لاستخدام الملف اسم الملف.d.ts في ملف .ts الخاص بك، يجب عليك الإشارة إليه على النحو التالي:

/// <reference path="filename.d.ts"/>

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

الطرف الثالث Javaملف البرنامج النصي: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

لديك كائن يسمى StringChecks يحتوي على الدوال isString و convertToUpperCase و convertToLowerCase و convertToStringBold.

إنشاء وحدة محيطة في TypeScript

سنقوم الآن بإنشاء وحدة محيطة تشير إلى Javaيقوم البرنامج النصي بوظائف ما سبق ويضيف عمليات التحقق من النوع حسب الحاجة.

اسم الملف: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

تقوم بتعريف وحدة باسم TestString وتصدير الواجهة StringsFunc. يحدد كل توقيع ما تقبله الدالة وما تُرجعه:

• isString(str:string): منطقية تأخذ هذه الدالة سلسلة نصية وتعيد قيمة منطقية. أما تمرير رقم أو أي نوع آخر فيؤدي إلى خطأ أثناء الترجمة.
• convertToUpperCase(str: string): string - يأخذ سلسلة نصية ويعيد سلسلة نصية.
• convertToLowerCase(str: string): string - يأخذ سلسلة نصية ويعيد سلسلة نصية.
• تحويل ToStringBold (سلسلة: سلسلة): سلسلة - يأخذ سلسلة نصية ويعيد سلسلة نصية.

منذ Javaيعرض ملف البرنامج النصي اسم الكائن StringChecks، ونشير في النهاية إلى نفس الاسم في ملف .d.ts:

declare var StringChecks: TestString.StringsFunc;

استخدام وحدة Ambient في TypeScript

هذا هو ملف test.ts الذي يستخدم ملف tstring.d.ts المحيط.

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

قم بتجميع الملف test.ts باستخدام الأمر tsc لإنتاج الملف test.js:

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

يمكنك الآن استخدام ملف test.js في ملف HTML مع ملف المكتبة testString.js.

<html>
<head>
    <title>Test TypeScript Ambient</title>
    <script src="testString.js"></script>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

الإخراج:

true
HELLO WORLD
hello
<b>Hello World</b>

للمتابعة، قارن اللغتين مباشرة في TypeScript vs Javaسيناريو، إعادة النظر Javaأساليب مصفوفة البرنامج النصي للاطلاع على المكافئات غير المكتوبة المستخدمة هنا، ودراسة حلقات في Javaسيناريو و داخلي وخارجي Javaسيناريو بالنسبة لأساسيات المتصفح التي يعتمد عليها الناتج المُجمَّع.

الأسئلة الشائعة