การสร้าง Interface
Interface จะเป็นตัวกำหนดว่า Object หรือ Class จะมีหน้าตาอย่างไรบ้าง ยกตัวอย่างดังนี้
1
let person = {
2
name: "Tu",
3
age: 66,
4
sayHi: () => "สวัสดีพ่อแม่พี่น้อง",
5
}
Copied!
Type ของ person จะเป็นดังนี้
1
{
2
name: string,
3
age: number,
4
sayHi: () => string, // Function ที่คืนค่าเป็น String
5
}
Copied!
หากเราต้องการใช้ค่าเหล่านี้ซำ้ ให้ทำการสร้าง Interface ขึ้นมา แล้วจึงใช้ Interface ที่สร้างไว้ กำหนด Type ของตัวแปรออปเจกต์ ดังนี้
1
interface Person { // ใช้ตัวพิมพ์ใหญ่
2
name: string; // สังเกตว่าใช้ ; ท้ายบรรทัด ซึ่งจะมีหรือไม่มีก็ได้
3
age: number;
4
sayHi: () => string;
5
}
6
7
let person: Person = { // กำหนด Interface Person ให้กับตัวแปร
8
name: "Tu",
9
age: 66,
10
sayHi: () => "สวัสดีพ่อแม่พี่น้อง",
11
}
Copied!
ถ้าค่าของตัวแปรที่ไม่ตรงกับ Interface ที่กำหนดไว้ จะเกิด Error เช่นเดียวกับ Type อื่นๆ
1
let person: Person = {
2
name: "Pom",
3
4
// Error : Type 'string' is not assignable to type 'number'
5
age: "75",
6
7
// Error : Type 'string' is not assignable to type '() => string'
8
sayHi: "ไม่รู้ ไม่รู้ ไม่รู้",
9
}
Copied!
และเช่นเดียวกัน เราสามารถใช้ Interface กับพารามิเตอร์ของฟังก์ชั่น หรือค่า Return ของฟังก์ชั่นได้ด้วย
1
function renamePerson(person: Person, newName: string): Person {
2
person.name = newName
3
4
return person
5
}
6
7
renamePerson(person, "Wissanu")
Copied!

Optional Properties

การสร้าง Interface ปกติจะถือว่า Properties ทุกตัวจำเป็นต้องถูกกำหนด (Required) แต่ถ้าหากต้องการให้สามารถเว้นว่างได้ ให้ทำเป็น Optional โดยการใช้ ? ด้านหลังชี่อ Property
1
interface House {
2
area: number
3
color?: string // กำหนดให้ color เป็น optional สามารถเว้นว่างได้
4
}
5
6
let house1 = { area: 100, color: "Green" }
7
let house2 = { area: 200 } // OK
8
let house3 = { color: "Green" } // Error : ขาด area
Copied!

อ้างอิง

Last modified 9mo ago