TypeScript Interface คืออะไร? อธิบายพร้อมวิธีใช้และข้อแตกต่างจาก Type

ในโลกของการเขียนโปรแกรมด้วย TypeScript มีเครื่องมือหนึ่งที่ช่วยให้โครงสร้างของข้อมูลชัดเจน และปลอดภัยมากขึ้น นั่นคือ Interface ที่เปรียบเสมือนแบบแผนสำหรับอ็อบเจกต์และคลาส มาทำความรู้จักและเรียนรู้วิธีใช้งาน TypeScript Interface พร้อมทั้งการไขกระจ่างถึงความแตกต่างของ Interface กับ Type เพื่อยกระดับความสามารถในการพัฒนาแอปพลิเคชันของคุณไปอีกขั้น ด้วยบทความนี้ของ Till it’s done กันครับ

ทำความรู้จัก TypeScript ภาษาที่เสริมนักพัฒนาด้วยการเพิ่ม Static Typing

TypeScript คือภาษาการเขียนโปรแกรมที่ถูกพัฒนาขึ้นโดยบริษัท Microsoft ซึ่งเป็น Superset ของภาษา JavaScript นั่นจึงหมายความว่า TypeScript เพิ่มคุณสมบัติและความสามารถบางอย่างเข้าไปใน JavaScript เช่น 

• Type Annotations : ช่วยให้โปรแกรมเมอร์สามารถระบุชนิดข้อมูลของตัวแปร, ฟังก์ชัน หรืออาร์กิวเมนต์ได้อย่างชัดเจน เช่น let age: number = 30; ซึ่งทำให้โค้ดมีความชัดเจนและง่ายต่อการบำรุงรักษา
• Type Checking : TypeScript จะทำการวิเคราะห์โค้ดก่อนที่จะรัน ช่วยจับข้อผิดพลาดที่เกี่ยวข้องกับชนิดข้อมูล หรือโครงสร้างของโค้ดได้ก่อนที่จะนำไปใช้งานจริง ซึ่งช่วยลดข้อผิดพลาดในระหว่างการทำงานของแอปพลิเคชัน
• รองรับแนวคิดด้านการเขียนโปรแกรมระดับสูง : เช่น การใช้งาน Interfaces, Classes, Inheritance, และ Modules ซึ่งทำให้สามารถสร้างแอปพลิเคชัน ที่มีโครงสร้างซับซ้อนและมีความยืดหยุ่นได้ง่ายขึ้น

นั่นจึงทำให้ TypeScript เป็นเครื่องมือที่ช่วยให้นักพัฒนาสามารถเขียนโค้ด JavaScript ที่ปลอดภัยและมีโครงสร้างที่ดีขึ้น โดยเฉพาะในโปรเจกต์ขนาดใหญ่ หรือทีมงานที่ต้องการความชัดเจนและความปลอดภัยของโค้ดมากขึ้น นอกจากนี้ยังเป็นที่นิยมในชุมชนพัฒนาเว็บแอปพลิเคชัน เนื่องจากสามารถทำงานร่วมกับ Framework และไลบรารีต่าง ๆ ของ JavaScript ได้อย่างราบรื่นนั่นเองครับ

คำจำกัดความของ Interface ใน TypeScript

เป็นการกำหนดโครงสร้างของอ็อบเจกต์หรือคลาส โดยระบุคุณสมบัติ และ Methods ที่ Object ดังกล่าวควรมี ซึ่ง Interface ทำหน้าที่เป็นแบบแผนสำหรับสร้าง Object ช่วยให้สามารถตรวจสอบความถูกต้องของโครงสร้างข้อมูล และสนับสนุนการเขียนโค้ดที่มีความยืดหยุ่นและปลอดภัยมากขึ้น 

ข้อดีของการใช้งาน Interface 

1. ช่วยให้โค้ดมีความชัดเจนและเป็นระเบียบ

Interface จะกำหนดรูปแบบของฟังก์ชันและคุณสมบัติที่ Classes ต้องปฏิบัติตาม ทำให้โค้ดมีโครงสร้างที่ชัดเจน เมื่อมีการใช้งาน Interface เดียวกันในหลาย Classes ก็สามารถเข้าใจและคาดหวังพฤติกรรมของ Object ได้ง่ายขึ้น ส่งผลให้โค้ดมีความเป็นระเบียบและอ่านเข้าใจง่ายขึ้น

2. ช่วยในการตรวจสอบความถูกต้องของข้อมูล

การใช้งาน Interface ทำให้โปรแกรมสามารถตรวจสอบได้ว่า Classes ที่นำมาใช้นั้นปฏิบัติตามรูปแบบที่กำหนดไว้หรือไม่ ซึ่งช่วยลดข้อผิดพลาดที่อาจเกิดขึ้นจากการใช้ข้อมูลผิดประเภท และทำให้เกิดความมั่นใจในความถูกต้องของข้อมูลที่ส่งผ่านในระบบ

3. สนับสนุนการเขียนโปรแกรมแนว Object-Oriented

Interface เป็นเครื่องมือสำคัญในแนวคิด Object-Oriented Programming ช่วยให้สามารถสร้างความสัมพันธ์แบบพึ่งพาระหว่าง Object ได้ดีขึ้น ส่งเสริมการใช้ Polymorphism และ Inheritance ซึ่งช่วยให้โค้ดมีความยืดหยุ่นและขยายตัวได้ง่ายขึ้น

4. ทำให้สามารถสร้างโค้ดที่สามารถนำกลับมาใช้ใหม่ได้ง่ายขึ้น

ด้วยการกำหนด Interface ซึ่งเป็นเพียงสัญญาณของพฤติกรรมที่คาดหวัง ทำให้สามารถสร้าง Classes หลายชนิดที่ใช้งานร่วมกันได้ โดยไม่จำเป็นต้องเขียนโค้ดซ้ำซ้อน การนำ Interface ไปใช้ในหลายบริบท ช่วยลดความซับซ้อนของโค้ด และสนับสนุนแนวคิดการเขียนโค้ดแบบ  Modules ซึ่งง่ายต่อการบำรุงรักษาและขยายระบบในอนาคต

ข้อแตกต่างระหว่าง Interface กับ Type

1. Syntax and Declaration

• Interface ใช้สำหรับกำหนดโครงสร้างของ Object เช่น Properties, Methods, และ Index Signatures และสามารถ Extend ได้ง่าย โดยใช้คำสั่ง extends
• Type สามารถกำหนดได้ทั้ง Primitive Types, Composite Types, Union Types, Tuple, และอื่น ๆ

2. Inheritance

• Interface รองรับการ Multiple Inheritance ได้ง่ายและชัดเจน โดยใช้คำสั่ง extends
• Type สามารถรวมหลายชนิดข้อมูลเข้าด้วยกันผ่าน Union หรือ Intersection แต่ไม่รองรับการสืบทอดแบบตรง ๆ ซึ่งการใช้ & เป็นการรวมชนิดข้อมูลหลายชนิดเข้าไว้ด้วยกัน ซึ่งเป็นแนวทางที่คล้ายคลึงกับ Inheritance ในบางบริบท

3. ความสามารถในการประกาศซ้ำ

• Interface สามารถประกาศซ้ำได้หลายครั้งในไฟล์เดียวหรือไฟล์ต่าง ๆ แล้ว TypeScript จะรวมประกาศเหล่านั้นเข้าด้วยกัน
• Type ไม่สามารถประกาศซ้ำได้ โดยถ้าทำ จะเกิดข้อผิดพลาดขึ้น

4. ข้อควรพิจารณาเพิ่มเติม

• Type ให้ความยืดหยุ่นมากกว่าในการกำหนดชนิดข้อมูลแบบซับซ้อน เช่น Union, Intersection หรือ Tuple
• สำหรับโครงสร้าง Object ที่ต้องการรองรับการสืบทอดหรือการประกาศซ้ำ ควรใช้ Interface
• สำหรับการกำหนดชนิดข้อมูลแบบหลากหลาย เช่น Union Types, Composite Types ควรใช้ Type
• ในบางกรณีสามารถใช้ทั้ง Interface และ Type ร่วมกันในโปรเจกต์ได้ตามความเหมาะสม

ตัวอย่างการใช้งาน Interface

แนวคิดของ Interface ใน TypeScript เป็นเครื่องมือที่ใช้ในการกำหนดโครงสร้างของ Object เช่น Properties และ Methods ที่ Object นั้นต้องมี ซึ่งช่วยให้โค้ดมีความปลอดภัยและเข้าใจง่ายขึ้น โดยเฉพาะในโปรเจคขนาดใหญ่

1. ตัวอย่างการประกาศ Interface

interface Person {

  name: string;

  age: number;

  greet(): void;

}

2. การนำ Interface ไปใช้ใน Object หรือ Classes

const user: Person = {

  name: “John”,

  age: 30,

  greet() {

    console.log(`Hello, my name is ${this.name}`);

  }

};

3. การใช้ Interface กับฟังก์ชันเพื่อกำหนดประเภทของพารามิเตอร์

function introduce(person: Person): void {

  person.greet();

  console.log(`Age: ${person.age}`);

}

introduce(user);

สรุป

จะเห็นได้ว่า TypeScript Interface คือเครื่องมือที่ช่วยกำหนดโครงสร้างของอ็อบเจกต์กับคลาสให้ชัดเจนและปลอดภัยยิ่งขึ้น โดยสามารถสร้างแบบแผนสำหรับข้อมูลและการใช้งาน ช่วยให้โค้ดเป็นระเบียบและนำกลับมาใช้ใหม่ได้ง่าย แตกต่างจาก Type ที่สามารถกำหนดชนิดข้อมูลแบบหลากหลายและรองรับการรวมหลายชนิด ในการใช้งานจริง เราสามารถประกาศและนำ Interface ไปใช้ในอ็อบเจกต์หรือฟังก์ชันได้อย่างง่ายดายกว่านั่นเองครับ

และหากใครต้องการหาบริการรับทำเว็บไซต์ด้วย TypeScript Interface พวกผม Till it’s done ก็ยินดีให้บริการ การันตีด้วยผลงานเว็บไซต์ที่ใช้งานได้จริงและดีไซน์สวยงาม ไม่ว่าจะเป็น Vote66, เว็บไซต์พรรคก้าวไกลสำหรับการเลือกตั้งในปี 2566, ระบบการจัดการต้นทุน และการติดตามพนักงานของแดชบอร์ด Foodhub รวมไปถึงระบบเว็บไซต์ของตลาดไทสามารถติดต่อได้ที่เว็บไซต์ของของพวกผม Till it’s done หรือทางอีเมลล์ rick@tillitsdone.com นี้ได้เลยนะครับ