Se63/typescript/started - ประวัติรุ่นแก้ไข

Jittat: /* Class */

2020-07-13T02:57:15Z

Class

Jittat: /* Type alias */

2020-07-12T20:19:08Z

Type alias

Jittat: /* Inheritance */

2020-07-12T20:15:19Z

Inheritance

Jittat เมื่อ 20:04, 12 กรกฎาคม 2563

2020-07-12T20:04:36Z

Jittat: /* Inheritance */

2020-07-12T20:01:21Z

Inheritance

Jittat: /* Interface */

2020-07-12T19:59:48Z

Interface

Jittat เมื่อ 19:57, 12 กรกฎาคม 2563

2020-07-12T19:57:36Z

Jittat: /* Interface */

2020-07-12T19:41:38Z

Interface

Jittat เมื่อ 19:40, 12 กรกฎาคม 2563

2020-07-12T19:40:34Z

Jittat เมื่อ 19:35, 12 กรกฎาคม 2563

2020-07-12T19:35:57Z

@@ แถว 98: / แถว 98: @@
 console.log('Circle is at', c.x, c.y);
-console.log(c.inside({ x: 10, y: 40 });
+console.log(c.inside({ x: 10, y: 40 }));
 </syntaxhighlight>

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 20:19, 12 กรกฎาคม 2563
แถว 150:		แถว 150:

	=== Type alias ===		=== Type alias ===
		+	แทนที่จะสร้าง interface เราสามารถกำหนดชื่อให้กับ type ได้โดยตรง เช่น
		+
		+	<syntaxhighlight lang="typescript">
		+	type Name = string;
		+	type Person = {
		+	firstName: string;
		+	lastName: string;
		+	};
		+	</syntaxhighlight>
		+
		+	ลักษณะการใช้งานจะคล้ายกับ interface แต่มีความแตกต่างอยู่ เมื่อทำงานกับ react เราจะใช้ type alias เวลาระบุ type ของ props

@@ แถว 144: / แถว 144: @@
 object ที่เป็น instance ของ ExpandableCircle จะเป็น Circle อยู่ และสามารถขยายได้ โดยสั่งเช่น obj.expand(10)
 == เรื่องอื่น ๆ ==
 === Type alias ===

@@ แถว 1: / แถว 1: @@
 สิ่งที่ TypeScript เพิ่มให้กับ javascript คือระบบ type (type system) ที่ยืดหยุ่น และช่วยในการตรวจสอบโปรแกรม
@@ แถว 5: / แถว 7: @@
 <syntaxhighlight lang="typescript">
 function insideCircle(circle, point) {
-  let dx = (circle.x - point.x);
+    let dx = (circle.x - point.x);
-  let dy = (circle.y - point.y);
+    let dy = (circle.y - point.y);
-  return (circle.r * circle.r) >= (dx * dx + dy * dy);
+    return (circle.r * circle.r) >= (dx * dx + dy * dy);
+}
 </syntaxhighlight>
@@ แถว 29: / แถว 31: @@
 <syntaxhighlight lang="typescript">
 interface Circle {
-  x: number;
+    x: number;
-  y: number;
+    y: number;
-  r: number;
+    r: number;
+}
 interface Point {
-  x: number;
+    x: number;
-  y: number;
+    y: number;
+}
 </syntaxhighlight>
@@ แถว 44: / แถว 46: @@
 <syntaxhighlight lang="typescript">
 function insideCircle(circle: Circle, point: Point) {
-  // ...
+    // ...
+}
 </syntaxhighlight>
@@ แถว 53: / แถว 55: @@
 <syntaxhighlight lang="typescript">
 interface Circle {
-  x: number;
+    x: number;
-  y: number;
+    y: number;
-  r: number;
+    r: number;
-  color?: number;
+    color?: number;
+}
 </syntaxhighlight>
@@ แถว 132: / แถว 134: @@
 เราสามารถขยายความสามารถของคลาสโดยการ extend เช่น
 == เรื่องอื่น ๆ ==
 === Type alias ===

@@ แถว 130: / แถว 130: @@
 == Inheritance ==
 == เรื่องอื่น ๆ ==
 === Type alias ===

@@ แถว 47: / แถว 47: @@
+}
 </syntaxhighlight>
 == Class ==

@@ แถว 11: / แถว 11: @@
 </syntaxhighlight>
-ทดลองนำไปใส่ใน typescript playground  จะเห็นการเตือนว่าทั้ง circle และ point มี type เป็น <tt>any</tt> (นั่นคือเป็นอะไรก็ได้)
+ทดลองนำไปใส่ใน [https://www.typescriptlang.org/play/ typescript playground]  จะเห็นการเตือนว่าทั้ง circle และ point มี type เป็น <tt>any</tt> (นั่นคือเป็นอะไรก็ได้)
 เพิ่มบรรทัดต่อไปนี้
@@ แถว 22: / แถว 22: @@
 สังเกตว่าโปรแกรมสามารถทำงานได้และมีผลลัพธ์ แต่นี่เป็นสิ่งที่เราต้องการหรือเปล่า?  จากตัวอย่างนี้ อาจจะพอเห็นได้ว่ามีการส่งข้อมูลผิดพลาด แต่ถ้าโค้ดส่วนนี้อยู่ในโปรแกรมใหญ่ ๆ เราจะไม่ทราบเลยว่าอาจจะมีความผิดพลาดมาจากการส่งค่าจากที่อื่น เช่น ใช้ตัวแปรผิดตัว (หรือพิมพ์ชื่อผิด) เป็นต้น

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 19:35, 12 กรกฎาคม 2563
แถว 20:		แถว 20:

	แล้วลองเรียกใช้งาน จะพบผลลัพธ์ที่ console ของ browser (ให้ลองหาวิธีแสดง console ดู อาจจะกด inspect element ก่อน แล้วค่อยเลือก console ก็ได้)		แล้วลองเรียกใช้งาน จะพบผลลัพธ์ที่ console ของ browser (ให้ลองหาวิธีแสดง console ดู อาจจะกด inspect element ก่อน แล้วค่อยเลือก console ก็ได้)
		+
		+	สังเกตว่าโปรแกรมสามารถทำงานได้และมีผลลัพธ์ แต่นี่เป็นสิ่งที่เราต้องการหรือเปล่า? จากตัวอย่างนี้ อาจจะพอเห็นได้ว่ามีการส่งข้อมูลผิดพลาด แต่ถ้าโค้ดส่วนนี้อยู่ในโปรแกรมใหญ่ ๆ เราจะไม่ทราบเลยว่าอาจจะมีความผิดพลาดมาจากการส่งค่าจากที่อื่น เช่น ใช้ตัวแปรผิดตัว (หรือพิมพ์ชื่อผิด) เป็นต้น