create-interfaces.md

การสร้าง Interface

Interface จะเป็นตัวกำหนดว่า Object หรือ Class จะมีหน้าตาอย่างไรบ้าง ยกตัวอย่างดังนี้

let person = {
  name: "Tu",
  age: 66,
  sayHi: () => "สวัสดีพ่อแม่พี่น้อง",
}

Type ของ person จะเป็นดังนี้

{
  name: string,
  age: number,
  sayHi: () => string, // Function ที่คืนค่าเป็น String
}

หากเราต้องการใช้ค่าเหล่านี้ซำ้ ให้ทำการสร้าง Interface ขึ้นมา แล้วจึงใช้ Interface ที่สร้างไว้ กำหนด Type ของตัวแปรออปเจกต์ ดังนี้

interface Person { // ใช้ตัวพิมพ์ใหญ่
  name: string; // สังเกตว่าใช้ ; ท้ายบรรทัด ซึ่งจะมีหรือไม่มีก็ได้
  age: number;
  sayHi: () => string;
}

let person: Person = { // กำหนด Interface Person ให้กับตัวแปร
  name: "Tu",
  age: 66,
  sayHi: () => "สวัสดีพ่อแม่พี่น้อง",
}

ถ้าค่าของตัวแปรที่ไม่ตรงกับ Interface ที่กำหนดไว้ จะเกิด Error เช่นเดียวกับ Type อื่นๆ

let person: Person = { 
  name: "Pom",
  
  // Error : Type 'string' is not assignable to type 'number'
  age: "75", 

  // Error : Type 'string' is not assignable to type '() => string'
  sayHi: "ไม่รู้ ไม่รู้ ไม่รู้", 
}

และเช่นเดียวกัน เราสามารถใช้ Interface กับพารามิเตอร์ของฟังก์ชั่น หรือค่า Return ของฟังก์ชั่นได้ด้วย

function renamePerson(person: Person, newName: string): Person {
  person.name = newName
  
  return person
}

renamePerson(person, "Wissanu")

Optional Properties

การสร้าง Interface ปกติจะถือว่า Properties ทุกตัวจำเป็นต้องถูกกำหนด (Required) แต่ถ้าหากต้องการให้สามารถเว้นว่างได้ ให้ทำเป็น Optional โดยการใช้ ? ด้านหลังชี่อ Property

interface House {
  area: number
  color?: string // กำหนดให้ color เป็น optional สามารถเว้นว่างได้
}

let house1 = { area: 100, color: "Green" }
let house2 = { area: 200 } // OK
let house3 = { color: "Green" } // Error : ขาด area

อ้างอิง

• ศืกษาเรื่อง Interface เพิ่มเติม https://www.typescriptlang.org/docs/handbook/interfaces.html