TypeScript รองรับประเภทที่กำหนดเองซึ่งสามารถกำหนดได้โดยใช้ “ อินเตอร์เฟซ ' หรือ ' พิมพ์ '. อินเทอร์เฟซสามารถนำไปใช้โดยคลาสหรือวัตถุ ในขณะที่นามแฝงประเภทสามารถใช้สำหรับการสร้างชื่อใหม่สำหรับประเภทที่มีอยู่หรือเพื่อกำหนดประเภทที่รวมกัน แม้ว่าประเภทและอินเทอร์เฟซจะใช้แทนกันได้บ่อยครั้ง แต่ก็มีความแตกต่างบางประการในฟังก์ชันการทำงานและไวยากรณ์ที่ทำให้เหมาะสมยิ่งขึ้นสำหรับสถานการณ์เฉพาะ
บล็อกนี้จะอธิบายอินเทอร์เฟซ TypeScript และประเภทและความแตกต่าง
TypeScript Interface vs Type คืออะไร?
“ อินเตอร์เฟซ ' และ ' พิมพ์ ” ใช้สำหรับกำหนดประเภทแบบกำหนดเองใน TypeScript แต่มีความแตกต่างบางประการในการทำงานและไวยากรณ์ ข้อแตกต่างหลักระหว่างอินเทอร์เฟซและประเภทคืออินเทอร์เฟซกำหนดประเภทใหม่ ในขณะที่ประเภทนามแฝงไม่กำหนด
อินเทอร์เฟซสามารถนำไปใช้โดยคลาสหรือออบเจกต์ ในขณะที่ประเภทสามารถกำหนดประเภทที่ซับซ้อนมากขึ้นโดยใช้คุณสมบัติเช่นยูเนียนและทางแยก โดยทั่วไปแล้ว อินเทอร์เฟซมักใช้เพื่อกำหนดรูปร่างของวัตถุและ API ในขณะที่ประเภทมักใช้สำหรับกำหนดประเภทข้อมูลที่ซับซ้อนและประเภทยูทิลิตี้ มาทำความเข้าใจทั้งสองสิ่งนี้แยกกัน
อินเตอร์เฟส TypeScript คืออะไร?
อินเทอร์เฟซ TypeScript เป็นเทคนิคในการกำหนดรูปร่างของวัตถุ TypeScript มันถูกสร้างโดยใช้คำสำคัญว่า “ อินเตอร์เฟซ ” และระบุชุดของแอตทริบิวต์และวิธีการที่วัตถุต้องการเพื่อจัดประเภทเป็นประเภทนั้น มันเทียบเท่ากับคลาสในการเขียนโปรแกรมเชิงวัตถุ อย่างไรก็ตาม มันไม่ได้กำหนดการใช้งานใดๆ ส่วนต่อประสานส่วนใหญ่จะใช้สำหรับการตรวจสอบประเภทและตรวจสอบให้แน่ใจว่าวัตถุนั้นสอดคล้องกับโครงสร้างเฉพาะ
ก่อนดำเนินการต่อ โปรดทราบว่าในการเรียกใช้ไฟล์ TypeScript จะต้องแปลงไฟล์เป็นไฟล์ JavaScript จากนั้นจึงรันโค้ด JavaScript บนเทอร์มินัลโดยใช้คำสั่งที่กำหนด:
ชื่อไฟล์ tsc.tsโหนด filename.js
ตัวอย่าง
สร้างส่วนต่อประสานชื่อ 'ผู้ใช้' ที่กำหนดคุณสมบัติสามอย่างและวิธีการ ' รับข้อมูล() ”:
ผู้ใช้อินเทอร์เฟซ {ชื่อแรก: สตริง;
นามสกุล: สตริง;
อายุ: จำนวน;
รับข้อมูล ( ) : เป็นโมฆะ;
}
สร้างชั้นเรียน “ นักเรียน ” ที่สืบทอดมาพร้อมกับอินเตอร์เฟส คลาสกำหนดแอตทริบิวต์ ตัวสร้างที่จะกำหนดค่าให้กับแอตทริบิวต์ และเมธอด “getInfo()” ที่จะแสดงค่าที่สัมพันธ์กับแอตทริบิวต์:
ชื่อแรก: สตริง;
นามสกุล: สตริง;
อายุ: จำนวน;
ตัวสร้าง ( ชื่อแรก: สตริง นามสกุล: สตริง อายุ: ตัวเลข ) {
this.firstName = ชื่อแรก;
this.lastName = นามสกุล;
this.age = อายุ;
}
รับข้อมูล ( ) : เป็นโมฆะ {
คอนโซล.ล็อก ( 'ข้อมูลนักศึกษา:' )
คอนโซล.ล็อก ( '- ชื่อ: ' + this.firstName + ' ' + this.lastName ) ;
คอนโซล.ล็อก ( '- อายุ: ' + this.age ) ;
}
}
สร้างวัตถุของ “ นักเรียน ” ชื่อว่า “ มาตรฐาน ' ของ ' ผู้ใช้ ” พิมพ์โดยเรียกตัวสร้างด้วยคีย์เวิร์ด “new” จากนั้นเรียกเมธอด getInfo() เพื่อพิมพ์ข้อมูลบนคอนโซล:
std.getInfo ( ) ;
เอาต์พุต
ประเภท TypeScript คืออะไร?
ประเภท TypeScript ส่วนใหญ่ใช้สำหรับสร้างนามแฝงสำหรับประเภทที่มีอยู่รวมถึงสร้างประเภทที่ซับซ้อนมากขึ้น มันแสดงถึงรูปร่างหรือโครงสร้างของข้อมูลที่เฉพาะเจาะจง สามารถกำหนด/ประกาศได้ด้วยเครื่องหมาย “ พิมพ์ ' คำสำคัญ. ประเภทของ TypeScript สามารถใช้เพื่อทำให้โค้ดเข้าใจได้มากขึ้นและลดการทำซ้ำ/ซ้ำซ้อน
ตัวอย่าง
ขั้นแรก กำหนดประเภท “ ผู้ใช้ ' ใช้ ' พิมพ์ ” คีย์เวิร์ดที่ระบุด้วยคุณสมบัติ 5 รายการ หนึ่งในนั้นเป็นแอตทริบิวต์ทางเลือก นั่นคือ “ โทรศัพท์ ”:
พิมพ์ ผู้ใช้ = {ชื่อแรก: สตริง;
นามสกุล: สตริง;
อายุ: จำนวน;
อีเมล: สตริง;
โทรศัพท์?: สตริง;
} ;
กำหนดฟังก์ชันชื่อ “ รับชื่อเต็ม ” ซึ่งใช้พารามิเตอร์ประเภท “ ผู้ใช้ ” และพิมพ์ข้อมูลที่ประกอบด้วยข้อมูลของบุคคล ได้แก่ “ ชื่อ ”, “ อายุ ”, “ อีเมล ' และ ' หมายเลขโทรศัพท์ ”:
คอนโซล.ล็อก ( 'ข้อมูลผู้ใช้:' )
คอนโซล.ล็อก ( '- ชื่อ: ' +person.firstName+ ' ' +บุคคล.นามสกุล ) ;
คอนโซล.ล็อก ( '- อายุ: ' + คน.อายุ ) ;
คอนโซล.ล็อก ( '- อีเมล: ' + person.email ) ;
คอนโซล.ล็อก ( '-โทรศัพท์ #: ' + คน.โทรศัพท์ ) ;
}
ตอนนี้ สร้างวัตถุ “ บุคคล ” ประเภท “ ผู้ใช้ ” ด้วยคู่คีย์-ค่า:
ชื่อจริง: 'มิลี่' ,
นามสกุล: 'ไมเคิล' ,
อายุ: 28 ,
อีเมล: 'mili124@yahoo.com' ,
โทรศัพท์: '086-34581734'
} ;
สุดท้าย พิมพ์ข้อมูลผู้ใช้โดยเรียกใช้ฟังก์ชัน getInfo():
เอาต์พุต
นั่นคือทั้งหมดที่เกี่ยวกับอินเทอร์เฟซ TypeScript และประเภท
บทสรุป
ใน TypeScript “ อินเตอร์เฟซ ' และ ' พิมพ์ ” ใช้สำหรับกำหนดประเภทแบบกำหนดเอง อินเทอร์เฟซสามารถนำไปใช้โดยคลาสหรือออบเจกต์ ในขณะที่ประเภทสามารถกำหนดประเภทที่ซับซ้อนมากขึ้นโดยใช้คุณสมบัติเช่นยูเนียนและทางแยก คุณลักษณะเหล่านี้เป็นคุณสมบัติอันทรงพลังที่สามารถช่วยในการเขียนโค้ดที่เป็นระเบียบและปรับขนาดได้มากขึ้น บล็อกนี้อธิบายอินเทอร์เฟซและประเภท TypeScript และความแตกต่าง