Cover image

Conditional types ใน TypeScript

14 Aug 2023

Share to:

สวัสดีครับ ในบทความนี้เราจะมาเรียนรู้เรื่อง 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

สร้าง Dark Web (Onion Site) ด้วย Tor และ nginx

ก่อนอื่นมาทําความรู้จักกับ Tor hidden service กันก่อน Tor hidden service เป็นการซ่อน Service หรือ Website ไม่ให้สามารถเปิดได้ด้วยเครือข่าย Internet ทั่วไป หรือไม่สามารถค้นหาผ่าน Search engine ทั่วไปได้ เรียกกันว่า Deep web และ Dark web โดยจะซ่อน Service หรือ Website ไว้ในเครือข่าย Tor ซึ่งจะสามารถเข้าได้ผ่าน Tor browser และ Url จะลงท้ายด้วย .onion รายละเอียดสามารถกลับไปอ่านจากบทความเรื่อง Deep web และ Dark web ด้านมืดของ Internet

Scanline Flood fill Algorithm

Flood fill AlgorithmFlood fill Algorithm คือ Algorithm การระบายสีโดยมีเงื่อนไขอยู่ว่ารูปทรงที่ต้องการระบายนั้นจะต้องเป็นรูปปิด ถ้าใครนึกภาพไม่ออกก็ลองนึกถึงโปรแกรม paint จะมีเครื่องมือเทสี(Fill) มีลักษณะเช่นเดียวกัน

แอบเปิดกล้องแอป facebook messenger

สวัสดีครับในบทความนี้ ผมจะบอกว่าแอป facebook messenger สามารถ เปิดกล้อง Video call ได้โดยที่เจ้าของไม่อนุญาติ มันอาจจะเป็น bug ของแอป facebook messenger หรือป่าวผมไม่แน่ใจนะครับ ซึ่งผมเจอมันโดยบังเอิญ มาลองดู Video กันว่ามันทําได้อย่างไร


Copyright © 2019 - 2024 thiti.dev |  v1.27.0 |  Privacy policy |  status | 

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