TypeScript คือ ตอนที่ 3 : คุณสมบัติขั้นสูง (Advanced TypeScript)

1. Generics
2. ประเภทขั้นสูง (Advanced Types)
3. โมดูล (Modules)
4. Decorators
5. Mixins

เมื่อคุณเจาะลึกลงไปใน TypeScript คุณจะพบว่ามันเป็นมากกว่า JavaScript เวอร์ชันที่มีตัวแปรแบบคงที่ คุณสมบัติขั้นสูงช่วยให้คุณเขียนโค้ดที่แข็งแกร่ง บำรุงรักษา และปรับขนาดได้สำหรับการทำแอพของคุณ ไม่ว่าจะเป็นการทำเว็บหรือทำแอพ บทนี้สำรวจคุณสมบัติขั้นสูงเหล่านี้ ได้แก่ Generics, Advanced Types, Modules, Decorators และ Mixins

1. Generics

ข้อดีอย่างหนึ่งที่สำคัญของ TypeScript คือการสนับสนุนสำหรับ Generics ซึ่งมีวิธีสร้างส่วนประกอบที่ใช้ซ้ำได้ Generics เป็นเครื่องมือที่ทรงพลังเมื่อพูดถึงการทำเว็บ TypeScript หรือทำแอพ เนื่องจากอนุญาตให้ใช้ส่วนประกอบที่สามารถทำงานได้หลายประเภทมากกว่าประเภทเดียว

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

function getFirst<T>(items: T[]): T {
  return items[0];
}

ไวยากรณ์<T>แสดงถึงตัวแปรประเภท—สแตนด์อินสำหรับประเภทใดๆ สิ่งนี้อนุญาตgetFirstให้ใช้กับอาร์เรย์ประเภทใดก็ได้:

let numbers = getFirst([1, 2, 3]);  // number
let strings = getFirst(["a", "b", "c"]);  // string

2. ประเภทขั้นสูง (Advanced Types)

นอกจากประเภททั่วไปแล้ว TypeScript ยังแนะนำประเภทขั้นสูงอีกหลายประเภทที่มีประโยชน์อย่างเหลือเชื่อเมื่อทำเว็บ TypeScript หรือทำแอพ

Union Types เป็นวิธีการประกาศประเภทที่อาจเป็นหนึ่งในหลายประเภท ตัวอย่างเช่น พารามิเตอร์ของฟังก์ชันสามารถยอมรับ a numberหรือ a string:

function formatInput(input: number | string) {
  // ...
}

Type Guards เป็นวิธีการให้ข้อมูลประเภทพิเศษภายในขอบเขต สิ่งนี้มีประโยชน์เมื่อต้องจัดการกับประเภทสหภาพแรงงาน:

function formatInput(input: number | string) {
  if (typeof input === "number") {
    // In this block, input is treated as a number
  } else {
    // In this block, input is treated as a string
  }
}

Type Aliases ให้คุณสร้างชื่อใหม่สำหรับประเภท สิ่งนี้มีประโยชน์ในการลดความซ้ำซ้อนและสร้างชื่อประเภทที่มีความหมายมากขึ้น:

type StringOrNumber = number | string;

function formatInput(input: StringOrNumber) {
  // ...
}

3. โมดูล (Modules)

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

ไฟล์ TypeScript แต่ละไฟล์เป็นโมดูลของตัวเอง และคุณสามารถส่งออกและนำเข้าฟังก์ชัน ตัวแปร หรือประเภทจากโมดูลหนึ่งไปยังอีกโมดูลหนึ่งได้:

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import { add } from './math';

console.log(add(1, 2));  // 3

4. Decorators

Decorators มีวิธีเพิ่มคำอธิบายประกอบและไวยากรณ์การเขียนโปรแกรมเมตาสำหรับการประกาศคลาสและสมาชิก Decorators สามารถใช้เพื่อแก้ไขหรือเพิ่มคลาส เมธอด และคุณสมบัติ หากคุณกำลังทำแอพด้วย TypeScript ตัวตกแต่งจะมีประโยชน์อย่างยิ่งในเฟรมเวิร์กอย่าง Angular:

@Component({
  selector: 'my-component',
  template: '<div>My Component</div>',
})
export class MyComponent {
  // ...
}

ในตัวอย่างข้างต้น @Component เป็นฟังก์ชัน Decorators ที่ระบุข้อมูลเมตาสำหรับ MyComponent คลาส

5. Mixins

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

สมมติว่าคุณกำลังทำเว็บ TypeScript หรือทำแอพ และมีผู้ใช้ประเภทต่างๆ เช่นAdminและMemberและคุณต้องการเพิ่มชุดพฤติกรรมการบันทึกทั่วไปให้กับคลาสเหล่านี้ นี่คือวิธีที่คุณสามารถใช้มิกซ์อิน:

// The mixin
type Constructor<T = {}> = new (...args: any[]) => T;

function Logging<T extends Constructor>(Base: T) {
  return class extends Base {
    log() {
      console.log('Logging...');
    }
  };
}

// Applying the mixin
class Admin {
  // Admin-specific behaviors...
}

class Member {
  // Member-specific behaviors...
}

const AdminWithLogging = Logging(Admin);
const MemberWithLogging = Logging(Member);

const admin = new AdminWithLogging();
admin.log();  // Logging...

const member = new MemberWithLogging();
member.log();  // Logging...

ในตัวอย่างนี้ Logging เป็นมิกซ์อินที่คุณสามารถนำไปใช้กับคลาสใดก็ได้เพื่อเพิ่มพฤติกรรมการบันทึก

รวมทุกอย่างเข้าด้วยกัน: การทำเว็บ TypeScript หรือทำแอพ

---

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

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

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

และเมื่อคุณดำเนินการกับ TypeScript ต่อไป โปรดจำไว้ว่าเป้าหมายสูงสุดไม่ใช่แค่การทำความเข้าใจและใช้คุณลักษณะต่างๆ ของมันเท่านั้น แต่ยังเป็นการใช้ประโยชน์จากคุณลักษณะเหล่านั้นในแนวทางที่ปรับปรุงคุณภาพของโค้ดและประสิทธิภาพของกระบวนการทำเว็บ TypeScript และทำแอพของคุณ

---

TypeScript คืออะไร

TypeScript คือ ตอนที่ 2 : การเขียนโปรแกรมเชิงวัตถุ (OOP)

TypeScript คือ ตอนที่ 4 : Frameworks สำหรับ TypeScript และ JavaScript