ผลต่างระหว่างรุ่นของ "Se63/typescript/started"
Jittat (คุย | มีส่วนร่วม) |
Jittat (คุย | มีส่วนร่วม) |
||
| แถว 11: | แถว 11: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | ทดลองนำไปใส่ใน typescript playground จะเห็นการเตือนว่าทั้ง circle และ point มี type เป็น <tt>any</tt> (นั่นคือเป็นอะไรก็ได้) | + | ทดลองนำไปใส่ใน [https://www.typescriptlang.org/play/ typescript playground] จะเห็นการเตือนว่าทั้ง circle และ point มี type เป็น <tt>any</tt> (นั่นคือเป็นอะไรก็ได้) |
เพิ่มบรรทัดต่อไปนี้ | เพิ่มบรรทัดต่อไปนี้ | ||
| แถว 22: | แถว 22: | ||
สังเกตว่าโปรแกรมสามารถทำงานได้และมีผลลัพธ์ แต่นี่เป็นสิ่งที่เราต้องการหรือเปล่า? จากตัวอย่างนี้ อาจจะพอเห็นได้ว่ามีการส่งข้อมูลผิดพลาด แต่ถ้าโค้ดส่วนนี้อยู่ในโปรแกรมใหญ่ ๆ เราจะไม่ทราบเลยว่าอาจจะมีความผิดพลาดมาจากการส่งค่าจากที่อื่น เช่น ใช้ตัวแปรผิดตัว (หรือพิมพ์ชื่อผิด) เป็นต้น | สังเกตว่าโปรแกรมสามารถทำงานได้และมีผลลัพธ์ แต่นี่เป็นสิ่งที่เราต้องการหรือเปล่า? จากตัวอย่างนี้ อาจจะพอเห็นได้ว่ามีการส่งข้อมูลผิดพลาด แต่ถ้าโค้ดส่วนนี้อยู่ในโปรแกรมใหญ่ ๆ เราจะไม่ทราบเลยว่าอาจจะมีความผิดพลาดมาจากการส่งค่าจากที่อื่น เช่น ใช้ตัวแปรผิดตัว (หรือพิมพ์ชื่อผิด) เป็นต้น | ||
| + | |||
| + | == Interface == | ||
| + | |||
| + | เราสามารถระบุว่า object ที่จะส่งให้ฟังก์ชัน หรือตัวแปรต่าง ๆ ต้องมี '''interface''' ตามที่ต้องการได้โดยประกาศ <tt>interface</tt> (อ่านเพิ่มได้ที่ [https://www.typescriptlang.org/docs/handbook/interfaces.html handbook]) ดังนี้ | ||
| + | |||
| + | <syntaxhighlight lang="typescript"> | ||
| + | interface Circle { | ||
| + | x: number; | ||
| + | y: number; | ||
| + | r: number; | ||
| + | } | ||
| + | |||
| + | interface Point { | ||
| + | x: number; | ||
| + | y: number; | ||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | และเพิ่ม type ให้กับพารามิเตอร์ของ <tt>insideCircle</tt> | ||
| + | |||
| + | <syntaxhighlight lang="typescript"> | ||
| + | function inSideCircle(circle: Circle, point: Point) { | ||
| + | // ... | ||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | |||
| + | == Class == | ||
| + | |||
| + | == Inheritance == | ||
| + | |||
| + | == เรื่องอื่น ๆ == | ||
| + | |||
| + | === Type alias === | ||
รุ่นแก้ไขเมื่อ 19:40, 12 กรกฎาคม 2563
สิ่งที่ TypeScript เพิ่มให้กับ javascript คือระบบ type (type system) ที่ยืดหยุ่น และช่วยในการตรวจสอบโปรแกรม
ลองดูตัวอย่างฟังก์ชันที่ตรวจสอบว่าจุดอยู่ในวงกลมหรือไม่
function inSideCircle(circle, point) {
let dx = (circle.x - point.x);
let dy = (circle.y - point.y);
return (circle.r * circle.r) >= (dx * dx + dy * dy);
}
ทดลองนำไปใส่ใน typescript playground จะเห็นการเตือนว่าทั้ง circle และ point มี type เป็น any (นั่นคือเป็นอะไรก็ได้)
เพิ่มบรรทัดต่อไปนี้
console.log(inSideCircle({ r: 20 }, {}));
แล้วลองเรียกใช้งาน จะพบผลลัพธ์ที่ console ของ browser (ให้ลองหาวิธีแสดง console ดู อาจจะกด inspect element ก่อน แล้วค่อยเลือก console ก็ได้)
สังเกตว่าโปรแกรมสามารถทำงานได้และมีผลลัพธ์ แต่นี่เป็นสิ่งที่เราต้องการหรือเปล่า? จากตัวอย่างนี้ อาจจะพอเห็นได้ว่ามีการส่งข้อมูลผิดพลาด แต่ถ้าโค้ดส่วนนี้อยู่ในโปรแกรมใหญ่ ๆ เราจะไม่ทราบเลยว่าอาจจะมีความผิดพลาดมาจากการส่งค่าจากที่อื่น เช่น ใช้ตัวแปรผิดตัว (หรือพิมพ์ชื่อผิด) เป็นต้น
Interface
เราสามารถระบุว่า object ที่จะส่งให้ฟังก์ชัน หรือตัวแปรต่าง ๆ ต้องมี interface ตามที่ต้องการได้โดยประกาศ interface (อ่านเพิ่มได้ที่ handbook) ดังนี้
interface Circle {
x: number;
y: number;
r: number;
}
interface Point {
x: number;
y: number;
}
และเพิ่ม type ให้กับพารามิเตอร์ของ insideCircle
function inSideCircle(circle: Circle, point: Point) {
// ...
}
