TypeScript البرنامج التعليمي: ما هو، واجهة، التعداد، صفيف مع مثال

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

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

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

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

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

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

انتقل إلى الموقع الرسمي لـnodejs: https://nodejs.org/en/download/ وتنزيل وتثبيت nodejs وفقًا لنظام التشغيل الخاص بك. التعليمات التفصيلية حول كيفية تنزيل nodejs متوفرة هنا: https://www.guru99.com/download-install-node-js.html

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

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

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

لقد قمت بتثبيت Nodejs v10 و npm 6.

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

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

npm init

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

الآن، سنقوم بإنشاء الحزمة .json التي ستقوم بتخزين التبعيات لمشروعنا.

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

npm -g install typescript

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

npm --save install typescript

قم بإنشاء مجلد src/ في دليل المشروع الخاص بك وقم بإنشاء مجلد 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 كما هو موضح:

node_modules/typescript/bin/tsc test.ts

سيقوم الأمر أعلاه بإنشاء ملف test.js وسيتم تجميع التعليمات البرمجية إلى جافا سكريبت.

مثال: test.js

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

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

في هذا TypeScript البرنامج التعليمي، سنقوم بتنفيذ test.js في العقدة كما يلي:

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

يتم عرض القيمة consoled عند تنفيذ test.js

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

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

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

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

TypeScript يدعم جميع ميزات Ecmascript التي تم إصدارها، ويمكن للمطورين استخدام نفس الميزات أثناء الترميز. ولكن لا يتم دعم جميع الميزات الجديدة على المتصفحات القديمة، ولهذا السبب تحتاج إلى تجميع javascript إلى إصدار أقدم من 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 في هذا TypeScript البرنامج التعليمي كهدف:

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 يشبه جافا سكريبت، وسيجد المستخدمون الذين يعرفون جافا سكريبت الأمر سهلاً للغاية. فقط المتغيرات مثل اسمحوا و 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 variable and will be accessible inside function test, it will not be available outside the function.
    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; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    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(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

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

(أراضي البوديساتفا) TypeScript بناء جملة Let كما هو موضح أدناه:

بناء الجملة:

let name="Roy";

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

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

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

test(); // throws an error : Uncaught ReferenceError: t is not defined.

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

أيضًا إذا قمت بإعلان متغير داخل أي دالة، أو for-loop، while-loop، TypeScript تبديل الكتلة، سيكون متاحًا لك فقط داخل تلك الكتلة ولا توجد إشارة إليها خارج الكتلة، وسيؤدي إلى حدوث خطأ إذا تم استخدام المتغير خارج الكتلة. هذا هو الفرق الرئيسي بين المتغيرات المعلنة للكلمة الرئيسية var و Let.

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

Const يعني المتغيرات الثابتة. إنها تشبه متغيرات Let، مع الاختلاف الوحيد، وهو أنه بمجرد تعيين قيمة لها، لا يمكن تغييرها.

بناء الجملة:

const name;

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

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

لذلك يمكن للمستخدمين استخدام متغيرات const فقط في الحالات التي يعلمون فيها أنه ليس عليهم تغيير القيم المخصصة لها.

أنواع في TypeScript

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

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

رقم الهاتف
خيط
منطقية
اي
باطل

رقم الهاتف

يأخذ فقط الأعداد الصحيحة، والعوامات، والكسور، وما إلى ذلك.

بناء الجملة:

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 is the value does not exist in the string.
_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"

منطقية

سيقبل القيم المنطقية مثل true وfalse و0 و1.

بناء الجملة:

let bflag :boolean = 1;
let status :boolean = true;

اي

بناء الجملة:

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

المتغيرات المعلنة باستخدام أي وقت type يمكن أن يأخذ المتغير كسلسلة أو رقم أو مصفوفة أو منطقية أو فارغة. TypeScript لن يلقي أي خطأ في وقت الترجمة؛ وهذا مشابه للمتغيرات المعلنة في Javaاستخدم أي متغير من أي نوع فقط عندما لا تكون متأكدًا من نوع القيمة التي سيتم ربطها بهذا المتغير.

باطل

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

بناء الجملة:

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

TypeScript مجموعة

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

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

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

بناء الجملة:

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 will all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

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

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

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

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
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]);
}
Output:
2016
2017
2018
2019

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

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

Output:
2016
2017
2018
2019

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

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

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

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

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

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

خاصية الطول

=> إذا كنت تريد معرفة عدد العناصر في المصفوفة، فيمكنك استخدام خاصية الطول.

Revطريقة أخرى

=> يمكنك عكس ترتيب العناصر في المصفوفة باستخدام الطريقة العكسية.

طريقة الفرز

=> يمكنك فرز العناصر في مصفوفة باستخدام طريقة الفرز.

طريقة البوب

=> يمكنك إزالة العنصر الأخير من المصفوفة باستخدام طريقة pop.

Shift طريقة

=> يمكنك إزالة العنصر الأول من المصفوفة باستخدام طريقة shift.

طريقة الدفع

=> يمكنك إضافة قيمة كعنصر أخير في المصفوفة.

طريقة concat

=> يمكنك ضم صفيفين في عنصر صفيف واحد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
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 وc# وpython وما إلى ذلك، حيث يمكن إعادة استخدام الكود. مع ميزة الفئة في TypeScript/Javaالنص، فهو يجعل اللغة قوية جدًا.

تعريف فئة في 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;
    }
}

في المثال أعلاه، لديك فصل يسمى الطلاب. لديها خصائص العمر، الاسم، وroll_no.

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

مثال طلاب الفصل الذي حددناه أعلاه، يحتوي على مُنشئ كما هو موضح أدناه:

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

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

constructor () {}

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

يوجد في فئة Students على سبيل المثال طرق محددة مثل 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 لإنشاء مثيل لفئة ما، تحتاج إلى استخدام عامل التشغيل الجديد. عندما ننشئ مثيلًا لفئة ما باستخدام عامل التشغيل الجديد، نحصل على الكائن الذي يمكنه الوصول إلى خصائص وأساليب الفئة كما هو موضح أدناه:

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

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

يمكنك استخدام الأمر tsc كما هو موضح أدناه للترجمة إليه Javascript.

Command: tsc  Students.ts

إخراج Javascript الكود الموجود على التجميع كما هو موضح أدناه:

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 Javascript، يتم تحويل الفئة إلى وظيفة يتم استدعاؤها ذاتيًا.

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

يمكن وراثة الفصول باستخدام مد الكلمة الرئيسية في 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

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

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

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

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);
    }
    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 will لجميع المعلمات باعتبارها المعلمات الأساسية فيه. يجب أن يكون هذا هو أول شيء يجب القيام به داخل المنشئ. سيقوم super بتنفيذ مُنشئ الفئة الموسعة.

معدّلات الوصول في 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 والتي لها خصائص العرض والارتفاع، وكلاهما له كتابة كسلسلة.

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

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

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

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

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

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

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
    }
}

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

الكود المترجم إلى Javascript سوف يكون على النحو التالي:

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"}); // will get "300px-250px"

لذا، في المثال أعلاه، استخدمت Interface Dimension كمعلمة للوظيفة getDimension(). عند استدعاء الوظيفة، تحتاج إلى التأكد من أن المعلمة التي تم تمريرها إليها تتوافق مع قاعدة الواجهة المحددة.

الكود المترجم إلى Javascript سوف يكون على النحو التالي:

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;
    }
}

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

الكود المترجم إلى Javascript سوف يكون على النحو التالي:

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

وظائف في TypeScript

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

Javaوظيفة النص:

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

TypeScript وظيفة:

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

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

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

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

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

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

في جافا سكريبت، تكون جميع معلمات الوظائف اختيارية وتعتبر غير محددة إذا لم يتم تمريرها. ولكن الأمر ليس كذلك مع TypeScript، بمجرد تحديد المعلمات التي تحتاج إلى إرسالها أيضًا، ولكن في حالة رغبتك في الاحتفاظ بأي معلمة اختيارية، يمكنك القيام بذلك باستخدام؟ مقابل الاسم المعلمة كما هو موضح أدناه:

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

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return 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("");
}

كما هو موضح أعلاه، يتم تعريف المعلمات المتبقية باستخدام (...param-name)؛ المعلمة الباقية عبارة عن مصفوفة مسبوقة بثلاث نقاط. سيتم تمرير جميع المعلمات إلى المصفوفة. يمكنك استدعاء الدالة كما هو موضح في المثال أدناه:

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

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as 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();

لقد قمت بإنشاء وظيفة مجهولة لها خاصية هذه. تهيئة النتيجة إلى 0 وطريقة getScore التي تحتوي داخليًا على setTimeout، وفي ثانية واحدة تقوم بوحدة التحكم this.score. تعطي القيمة المعزية قيمة غير محددة على الرغم من تحديد this.score وتهيئته. المشكلة هنا مع ثis الكلمة الرئيسية. الوظيفة الموجودة داخل setTimeout لها هذا الخاص بها، وتحاول إحالة النتيجة داخليًا، وبما أنها غير محددة، فإنها تعطي غير محدد.

يمكن القيام بنفس الشيء باستخدام وظيفة السهم كما هو موضح أدناه:

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

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

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

لقد قمت بتغيير الوظيفة داخل setTimeout إلى وظيفة سهم كما هو موضح أدناه:

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

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

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

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

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

بناء الجملة:

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

الكود المترجم إلى جافا سكريبت هو كما يلي:

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]);

منذ Javascript لا يدعم التعدادات، فهو يحول التعداد إلى وظائف يتم استدعاؤها ذاتيًا كما هو موضح أعلاه.

قم بتعريف التعداد بقيمة سلسلة

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

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

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 North

الكود المترجم إلى جافا سكريبت هو كما يلي:

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;

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

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

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

هناك طرق عديدة للتصدير والاستيراد. لذلك سوف نناقش هنا بناء الجملة الذي يتم استخدامه في الغالب.

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

export  nameofthevariable or class name or interface name etc

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

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

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

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

test1.ts

export let age: number = 25;

يتم استخدام الكلمة الأساسية للتصدير لمشاركة متغير العمر في ملف آخر.

test2.ts

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

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

بناء الجملة للاستيراد والتصدير 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

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

مثال 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.

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

فيما يلي الكود الذي تستخدم فيه مساحة الاسم StudentSetup.

testStudentSetup.ts

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

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

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

يمكنك تجميع كلا الملفين في ملف js واحد كما هو موضح أدناه:

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

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

node namespace.js

سيتم عرض الإخراج على النحو التالي:

The name is: H a r r y

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

TypeScript يسمح لك باستخدام ملفات javascript الخاصة بجهات خارجية باستخدام إعلان ambient. تتمثل ميزة هذه الميزة في أنه لا يتعين عليك إعادة الكتابة واستخدام جميع ميزات المكتبة في TypeScript.

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

للإعلان عن الوحدة المحيطة:

declare module moduleName {
   //code here
}

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

filename.d.ts

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

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

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

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

على سبيل المثال: 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، وconverToStringBold.

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

سيتم الآن إنشاء وحدة نمطية محيطة والتي ستشير إلى وظائف js المذكورة أعلاه وستضيف أيضًا التحقق من النوع وفقًا لمتطلباتنا.

اسم الملف: 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): منطقية

=> سيأخذ هذا المعلمة كسلسلة وسيكون نوع الإرجاع منطقيًا. عند استخدام ملف .ts الخاص بك في حالة قيامك بتمرير المعلمة كرقم أو أي شيء آخر غير السلسلة، فسوف يعطيك خطأ في نوع الترجمة.

ConvertToUpperCase(str:string): سلسلة

=> سيأخذ هذا الوسيطة كسلسلة ويعيد سلسلة. وينطبق الشيء نفسه على تحويل ToLowerCase (سلسلة: سلسلة)
: خيط؛ و تحويل ToStringBold (سلسلة: سلسلة): سلسلة
;

نظرًا لأن اسم الكائن في ملف جافا سكريبت هو StringChecks، فإننا نحتاج أخيرًا إلى الإشارة إلى نفس الشيء في ملف .d.ts والذي يتم على النحو التالي:

declare var StringChecks: TestString.StringsFunc;

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

الآن هنا ملف test.ts حيث سيتم استخدام الملف المحيط tstring.d.ts

على سبيل المثال: test.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);

جمع TypeScript tsc test.ts إلى 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="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

هذا هو الإخراج الذي يظهر في وحدة التحكم:

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

TypeScript تاريخنا

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

بعد عامين من التطوير الداخلي في Microsoft. TypeScript 0.9، صدر في عام 2013
دعم إضافي للأدوية TypeScript تم إصدار الإصدار 1.0 في Build 2014
في يوليو 2014 ، جديد TypeScript لقد جاء المترجم الذي أصبح أسرع بخمس مرات من الإصدار السابق.
في يوليو 2015، دعم وحدات ES6، الكلمة الأساسية لمساحة الاسم، لدعم الديكورات.
في نوفمبر 2016، تمت إضافة ميزة مثل أنواع المفاتيح والبحث عن الأنواع المعينة والباقي.
في 27 مارس 2018، تمت إضافة الأنواع الشرطية والمفتاح المحسّن مع أنواع التقاطع المدعومة في TypeScript.

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

فيما يلي إيجابيات/فوائد مهمة للاستخدام TypeScript

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

من يستخدم TypeScript?

فيما يلي بعض التطبيقات الأكثر شيوعًا لـ TypeScript:

يستخدم الفريق الزاوي TypeScript.
تثبيت NodeJS وNPM
TypeScript التثبيت
جمع TypeScript رمز ل Javascript
تنفيذ التعليمات البرمجية باستخدام Nodejs
تنفيذ Javascript في المتصفح
جمع TypeScript رمز ل Javascript باستخدام نسخة EcmaScript
يمكنك بسهولة تجميع التعليمات البرمجية المكتوبة TypeScript إلى Javaالبرنامج النصي باستخدام NodeJS.
حتى تعمل مع TypeScript تحتاج أولاً إلى تنزيل NodeJS وتثبيته.

ملخص

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

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

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

جمع TypeScript رمز ل Javascript

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

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

ذات المواد

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

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

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

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

أنواع في TypeScript

رقم الهاتف

خيط

منطقية

اي

باطل

TypeScript مجموعة

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

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

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

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

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

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

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

خاصية الطول

Revطريقة أخرى

طريقة الفرز

طريقة البوب

Shift طريقة

طريقة الدفع

طريقة concat

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

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

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

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

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

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

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

فئة في TypeScript

تعريف فئة في TypeScript

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

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

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

إنشاء مثيل للفئة في TypeScript

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

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

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

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

واجهة في TypeScript

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

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

واجهة كمعلمة وظيفة

واجهة تنفيذ الفصل

وظائف في TypeScript

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

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

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

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

وظائف السهم

ما هو استخدام وظيفة السهم؟

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

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

قم بتعريف Enum بقيمة رقمية

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

قم بتعريف التعداد بقيمة سلسلة

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

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

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

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

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

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

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

مثال Customer.ts إلى Customer.js باستخدام Requirejs

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

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

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

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

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

للإعلان عن الوحدة المحيطة:

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