Conditional types ใน TypeScript

14 Aug 2023,
Share: 
Cover image

สวัสดีครับ ในบทความนี้เราจะมาเรียนรู้เรื่อง Conditional types ใน TypeScript ว่าคืออะไร นำไปใช้ประโยชน์ได้อย่างไร

Conditional Types จะช่วยให้เราสามารถกําหนดความสัมพันธ์ระหว่าง input type และ output type

เรามาดูตัวอย่าง Conditional Types ง่ายๆดังนี้ครับ

interface Animal {
  live(): void;
}
interface Dog extends Animal {
  woof(): void;
}

type Example1 = Dog extends Animal ? number : string; // Example1 จะมี type เป็น number
type Example2 = RegExp extends Animal ? number : string; // Example2 จะมี type เป็น string

จาก Code ด้านบน จะเห็นว่า เราสามารถใส่ Condition เพื่อเลือกระหว่าง type string และ number ได้

เพื่อความเข้าใจมากขึ้น เรามาดูอีกตัวอย่างกันครับ

interface IdLabel {
  id: number /* some fields */;
}
interface NameLabel {
  name: string /* other fields */;
}
type NameOrId<T extends number | string> = T extends number ? IdLabel : NameLabel;
// ---cut---
function createLabel<T extends number | string>(idOrName: T): NameOrId<T> {
  throw 'unimplemented';
}

let a = createLabel('typescript'); // a จะมี type เป็น NameLabel

let b = createLabel(2.8); // a จะมี type เป็น IdLabel

let c = createLabel(Math.random() ? 'hello' : 42); // a จะมี type เป็น NameLabel | IdLabel

จาก Code ด้านบน จะเห็นว่า Return type จาก Function “createLabel” จะขึ้นอยู่กับ Input Parameter ที่รับเข้ามา

Conditional Type Constraints

บางครั้งเราอาจจะจําเป็นต้องกําหนด Condition เพิ่มเติมเข้าไปใน Generic type

ตัวอย่างเช่น ถ้าเราต้องการ Type อะไรก็ได้ที่อย่างน้อยต้องมี property “message” เราสามารถเขียน Code ได้ตามนี้

type MessageOf<T extends { message: unknown }> = T['message'];

interface Email {
  message: string;
}

type EmailMessageContents = MessageOf<Email>;

Suggestion blogs

LDR ตัวต้านทานปรับค่าตามแสง

LDR (Light Dependent Resistor) คือตัวต้านทานปรับค่าตามแสง ตัวต้านทานชนิดนี้สามารถเปลี่ยนความนําไฟฟ้าได้เมื่อมีแสงมาตกกระทบ โฟโตรีซีสเตอร์ ( Photo  Resistor)   หรือ โฟโตคอนดัคเตอร์   (Photo Conductor)   เป็นตัวต้านทานที่ทำมาจากสารกึ่งตัวนำ (Semiconductor)   ประเภทแคดเมี่ยมซัลไฟด์ ( Cds : Cadmium Sulfide)   หรือแคดเมี่ยมซิลินายส์ ( CdSe : Cadmium Selenide)   ซึ่งทั้งสองตัวนี้ก็เป็นสารประเภทกึ่งตัวนำ เอามาฉาบลงบนแผ่นเซรามิกที่ใช้เป็นฐานรองแล้วต่อขาจากสารที่ฉาบ ไว้ออกมา โครงสร้างของ LDR

ระวังโดน Hack facebook โดยไม่รู้ตัว

สวัสดีครับ วันนี้ผมจะนําเสนอเรื่องราวของการ hack facebook รูปแบบหนึ่ง ซึ่งถ้าไม่ทันระวังก็อาจจะตกเป็นเหยื่อได้ รูปแบบการ hack แบบนี้เค้าเรียกกันว่า Phishing โดย hacker จะทําการปลอมหน้าเพจขึ้นมา ส่วนใหญ่จะปลอมเป็นหน้าเพจ login ของเว็บที่ hacker ต้องการ user password เช่น ถ้า hacker ต้องการ user และ password ของ facebook hacker ก็จะทําหน้า login ของ facebook ปลอมขึ้นมา เพื่อหลอกให้เหยื่อ login จากหน้าปลอมนั้น แล้วส่งข้อมูล user password ของ เหยื่อมายัง hacker

Unbox ไฟฉาย Nitecore TIP 2017

ไฟฉาย Nitecore รุ่น TIP Version 2017 เป็นไฟฉายรุ่นที่ที่มีความสว่างสูงสุด 360 Lumens แสงพุ่งไกลถึง 74 เมตร จุดเด่นของรุ่นนี้คือ เป็นไฟฉายที่มีขนาดเล็กแต่ให้ความสว่างสูง มีแบตเตอรี่ภายใน คุณสมบัติโดยทั่วไปดังนี้


Copyright © 2019 - 2025 thiti.dev |  v1.56.0 |  Privacy policy | 

Build with ❤️ and Astro.

Github profile   Linkedin profile   Instagram   X profile   Nostr   Youtube channel   Telegram   Email contact   วงแหวนเว็บ