Cover image

การใช้งาน keyof type operator ใน TypeScript

14 Aug 2023

Share to:

สวัสดีครับ ในบทความนี้เราจะมาทําความรู้จักกับ keyof type operator ใน TypeScript กันครับ

keyof type operator คือการดึงเอา key ของ Object ออกมาเป็น literal type

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

type MyType = { a: boolean; b: string; 100: string };
type M = keyof MyType;

const v1: M = 'a'; // No Error
const v2: M = 'b'; // No Error
const v3: M = 100; // No Error
const v4: M = 1; // Error
const v5: M = 'aaa'; // Error
const v6: M = true; // Error

จากตัวอย่างด้านบน เราสร้าง type M จาก keyof MyType ดังนั้น Type M จะเป็น literal type ของ key ที่ อยู่ใน MyType ทําให้เมื่อเรานํา M ไปกำหนดให้กับตัวแปรใด ตัวแปรนั้นๆจะเก็บค่าเฉพาะ literal type ของ key ที่ อยู่ใน MyType เท่านั้น

เพื่อให้เห็นภาพมากขึ้นเรามาดูตัวอย่างการนำไปใช้งานดังนี้ครับ

function getProperty<T>(obj: T, key: keyof T) {
  return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, 'a');
getProperty(x, 'm'); // Error เพราะ property "m" ไม่มีใน x

Suggestion blogs

[ภาษาซี] การแสดงผลข้อมูล

function ที่ใช้ในการแสดงผลข้อมูลออกทางหน้าจอคือ printf (print formatted) ทําหน้าที่แปลงในลักษณะของเลขฐานสอง ที่คอมพิวเตอร์ประมวลผลได้ ให้อยู่ในรูปที่มนุษย์เข้าใจ และแสดงผลออกทางจอภาพ

พื้นฐานการเขียน JavaScript ES2015 (ES6)

ความเป็นมาของ JavaScriptเมื่อนานมาแล้ว JavaScript เป็นภาษา script ฝั่ง client ของ Netscape ซึ่งเป็น web browser ชื่อดังในสมัยนั้นครับ แล้วหลังจากนั้นไม่นาน Netscape ก็ได้นำเจ้า JavaScript นี้ไปฝากไว้กับ Ecma International ซึ่งเป็นองค์กรที่ก่อตั้งขึ้นเพื่อทำหน้าที่กำหนด standard ให้กับสิ่งต่างๆ โดยเฉพาะ เพื่อจะให้เข้ามาช่วยกำหนด standard ให้กับ JavaScript หลังจากนั้น JavaScript ก็ได้พัฒนาขึ้นมาเรื่อยๆ จนถึง JavaScript ES6

เหรียญ 20 บาท 100 ปีกรมทางหลวง พ.ศ.2555

100 ปีกรมทางหลวง พ.ศ.2555คำอธิบายด้านหน้ากลางเหรียญมีพระบรมรูปพระบาทสมเด็จพระมงกุฏเกล้าเจ้าอยู่หัว ทรงฉลองพระองค์ชุดสากล ภายในวงขอบเหรียญเบื้องล่างมีข้อความว่า "พระบาทสมเด็จพระปรเมนทรมหาวชิราวุธ พระมงกุฏเกล้าเจ้าอยู่หัว"


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

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