Typescript
Typescript
TypeScript هي إضافة للجافا سكريبت ، لذا يجب أن نكون على معرفة بأساسيات JavaScript أولاً قبل التقدم لتعلم TypeScript. تحتوي اللغة على مُصَرف (Compiler) خاص يقوم بتحويل أكواد TypeScript إلى أكواد JavaScript
ولهذه اللغة Compiler خاص يقوم بتحويل اكواد TypeScript إلى لغة JavaScript
لماذا TypeScript إن كانت JavaScript تفي بنفس الغرض؟
TypeScript هي لغة برمجة مبنية على JavaScript (تُعتبر مجموعة شاملة فوق JavaScript)، صُممت لمعالجة تحديات تطوير التطبيقات الكبيرة والمعقدة. بينما يمكن لـ JavaScript أداء نفس المهام تقنيًا، تقدم TypeScript ميزات إضافية أهمها نظام الأنواع الثابتة الاختيارية (optional static typing) الذي:
يكتشف الأخطاء أثناء التطوير بدلاً من اكتشافها أثناء تشغيل البرنامج
يحسن قابلية الصيانة في المشاريع الكبيرة وفرق العمل المتعددة
يعزز تجربة المطور من خلال الإكمال التلقائي المتقدم والتنقل السهل بين الكود
يسهل التعاون من خلال توثيق الشيفرة عبر الأنواع المحددة
عند البناء (compilation)، يتحول كود TypeScript إلى JavaScript عادي يمكن تنفيذه في أي بيئة تدعم JavaScript. هذا يعني أن TypeScript لا تضيف إمكانيات جديدة وقت التشغيل، بل تضيف طبقة تحقق ومراقبة أثناء مرحلة التطوير.
يمكن استخدام TypeScript مع معظم أطر عمل JavaScript الشائعة مثل React، Angular، Vue.js، وكذلك في تطوير تطبيقات الخادم باستخدام Node.js. كما تدعم تضمين كود JavaScript مباشرة دون حاجة لتحويله.
ملاحظة: الرابط الصحيح للتجربة هو: TS Playground - An online editor for exploring TypeScript and JavaScript
لنبدأ باللغة من :
اولا - تعريف المتغيرات :
لتعريف المتغيرات بلغة التايب سكريبت نقوم بتعريفه مثل الجافا سكريبت ونضيف اليه نقطتان و نوع المتغير اما number or string ولنا الحرية بإسناد القيم
Var num1:number=10;
Var str:string=”hello world”;
ثانيا - المقارنات :
ليكن لدينا المثال التالي لتوضيح المقارنات :
نعرف متغيرين من نوع رقمي و نعرف متغير من دون تحديد نوعه ونسند عملية المقارنة له فتكون النتيجة النهائية أما true or false
Var num1:number=10;
Var num2:number=10;
Var result=num1>num2 ;
Alert(“number 1 greater than number 2 :”+result);
و بالنسبة لبقية الرموز الباقية
Var res=num1<num2;
Var res=num1>=num2;
Var res=num1<=num2;
Var res=num1==num2;
Var res=num1!=num2;
ثالثا - عمليات الاسناد :
مثل عملية إسناد بالجافا سكريبت
+ , - , =+ , =- , =* , =% , =/
رابعا - الشروط :
1- switch :
ليكن لدينا المثال التالي :
var grade:string = "A";
switch(grade) {
case "A": {
console.log("Excellent");
break;
}
case "B": {
console.log("Good");
break;
}
case "C": {
console.log("Fair");
break;
}
case "D": {
console.log("Poor");
break;
}
default: {
console.log("Invalid choice");
break;
}
}
2 - If Statement :
ليكن لدينا المثال التالي :
var num:number = 5
if (num > 0) {
console.log("الرقم موجب أكبر من الصفر")
}
3 - If…else Statement :
المثال التالي يوضح الفكرة :
var num:number = 5;
if (num > 0) {
console.log("number is p");
}else
{
console.log("number is n") ;
}
4- if…else…if and else statements :
var num:number = 2
if(num > 0) {
console.log(num+" is positive")
} else if(num < 0) {
console.log(num+" is negative")
} else {
console.log(num+" is neither positive nor negative")
}
خامسا - الحلقات :
1 - for loop :
لدينا المثال التالي :
var num:number = 5;
var i:number;
var factorial = 1;
for(i = num;i>=1;i--) {
factorial *= i;
}
console.log(factorial)
2 - While Loop :
مثال :
var num:number = 5;
var factorial:number = 1;
while(num >=1) {
factorial = factorial * num;
num--;
}
console.log("The factorial is "+factorial);
3 - do…while loop :
مثال :
var n:number = 10;
do {
console.log(n);
n--;
} while(n>=0);
سادسا - ال function :
هي مجموعة من الاكواد التي لها اسم ويتم استدعائها
function message ( msg : string ) : string {
Return msg;
}
Alert ( message (“ hello “ )) ;
شكل الكود مع وجود بارامترات :
function message(msg: string, priority?: number): string {
if (priority == undefined)
return msg;
else
return msg + " " + priority;
}
alert(message("hello"));
alert(message("hello", 1));
تمرير عدد غير محدد من البارامترات :
Function addnumber (. . . . nums : number[] ) {
Var I ;
Var sum : number = 1 ;
For ( I = 0 ; nums . length ; I + + ) {
Sum = sum + nums[i] ;
}
Alert ( “ sum of the numbers : “ + sum )
}
Addnumber ();
Addnumber (1);
Addnumber (1,2,3);
Addnumber (1,2,3,4,5,6,7,8);
تعيين باراميتر افتراضي في حال عدم إدخال بارامترات :
function message ( msg : string = “ hello “ ) : string {
Return msg;
}
Alert ( message ()); // output hello
Alert ( message (“ hello world“ )) ; // output hello world
الدالة المجهولة anonymous function :
Var message = function ( msg : string ) {
Return msg ;
}
Alert ( message (“hello”));
سابعا - سوف نتعرف الان على كل من كلاسي ال number , string
Number :
اعطاء اكبر قيمة للكلاس Number.MAX_VALUE
إعطاء أصغر قيمة للكلاس Number.MIN_VALUE
أمثلة على باقي ال method
Var num=123,43432
Num.tofixed() // تحديد الأرقام بعد الفاصلة
Num.toprecision()// تحديد عدد الأرقام الكلي
toprecision() : اذا مررنا له طول فإنه يتقيد بالرقم المحدد ضمن القوسين
String :
Var text1 = new string (“hello world the earth is to end”);
Text1.length //يعطي قيمة طول السلسلة النصية
Text1.charat() //تعيد الحرف الموجود في مكان معين من النص
Var index = text1 .indexof(“is”);// تعيد موضع نص معين من الجملة
Alert(index);
Tolowercase() // تحويل الأحرف إلى صغيرة
Touppercase() // تحويل الأحرف إلى كبيرة
ثامنا - المصفوفات :
Var alpha:string [] = [“a”,”b”,”c”,”d”];
Alert(alpha [1]);
المصفوفة المتعددة :
Var ms:number[][]=[[1,2,3,4],[22,33,44],[8,5,8]]
Ms[n][n];// n=رقم ما ضمن حدود المصفوفة
تاسعا - Union تعريف متغير من اكثر من نوع :
Var value1:string|number
Value1=12
Alert(value1)
Value=”hello”
Alert(value1)
////
بالنسبة أيضا لتعريف المتغيرات ضمن الـ function
///
Function emp (info:string|string[]|number){}
Emp(123)
Emp(“esss”)
Emp([“ewew”,”asdf”,”kjhg”])
عاشرا - interfaces :
تحدد الواجهة الخصائص و methods والأحداث والتي هي أجزاء رئيسية للواجهة و الواجهة تحتوي فقط على تعريف الاجزاء ولا يجب اسناد اي قيمة لها.
وتقع على عاتق الكائنات المرتبطة به مسؤولية تعريف الاجزاء ويفيد بأنه يساعد في توفير هيكل موحد تتبعه الكائنات المرتبطة به
وليكن لدينا الشكل التالي لتوضيح الفهم :
قمنا بإنشاء واجهة من نوع ما سميناها iperson واضفنا لها الخصائص الاسم الاول والاسم الاخير و اضفنا له الميثود sayhi ويكون قيمة الخرج لها على شكل نص
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
بعدها نقوم باشتقاقها :
اي قمنا بتعريف متغير customer من نوع IPerson الذي أنشأناه فيأخذ جميع خواصه وصفاته و الأحداث
ويقبل اضافة قيم له ولا تؤثر الثيم على الكائن الرئيسي ويظهر لنا هذا الكود رسالة Hi there
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
اذا اردنا الوصول الى بيانات المتغير الذي انشأناه نكتب ما يلي :
السطر الاخير أدناه يظهر الرسالة الموجودة في الميثود
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())
تعريف Interface مع النمط المتعدد ( Union ) :
interface RunOptions {
program:string;
commandline:string[]|string|(()=>string);
}
نقوم بالاشتقاق و اسناد قيم متغيرة لنبين النمط الذي اضفناه :
الجزء الاول ادناه commandline as string فيقوم بإظهار Hello
الجزء الثاني commandline as a string array فيقوم بإظهار Hello , World كل واحدة بسطر حسب ما كتب بالكود
الجزئ الثالث و الاخير commandline as a function expression فيقوم باظهار **Hello World**
//commandline as string
var options:RunOptions = {program:"test1",commandline:"Hello"};
console.log(options.commandline)
//commandline as a string array
options = {program:"test1",commandline:["Hello","World"]};
console.log(options.commandline[0]);
console.log(options.commandline[1]);
//commandline as a function expression
options = {program:"test1",commandline:()=>{return "**Hello World**";}};
var fn:any = options.commandline;
console.log(fn());
الوراثة :
الشكل العام للوراثة
Child_interface_name extends super_interface_name
الاب علامة الوراثة الابن
الشكل العام للوراثة المتعددة :
Child_interface extends super_interface1 ,
super_interface2 , … ,super_interfaceN
ليكن المثال التالي لتوضيح الفكرة
interface Person {
age:number
}
interface Musician extends Person {
instrument:string
}
var drummer = <Musician>{};
drummer.age = 27
drummer.instrument = "Drums"
console.log("Age: "+drummer.age)
console.log("Instrument: "+drummer.instrument)
الشرح :
قمنا بإنشاء انترفيس باسم Person وبعدها نقوم بإنشاء انترفيس ثانية باسم موسيقي ولكن تكون ابن للانترفيس Person بتعليمة extends ولها خاصية ما
وعرفنا متغير واسندنا له الانترفيس الموسيقي اسم المتغير drummer فإننا من هذا المتغير نستطيع الوصول إلى الخواص بال Person والخواص بال musician
فيكون الخرج للكود المكتوب كالتالي :
Age: 27
Instrument: Drums
ومثال على الوراثة المتعددة :
interface IParent1 {
v1:number
}
interface IParent2 {
v2:number
}
interface Child extends IParent1, IParent2 { }
var Iobj:Child = { v1:12, v2:23}
console.log("value 1: "+this.v1+" value 2: "+this.v2)
وخرج الكود :
value 1: 12 value 2: 23
ليست هناك تعليقات: