TypeScript Academy · บทเรียน

ตัวดำเนินการชนิด typeof

จับชนิดข้อมูลของค่าขณะทำงานด้วย typeof

ตัวดำเนินการชนิด typeof เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ชนิดข้อมูลจากค่า

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

ตัวดำเนินการชนิดข้อมูลสองแบบ

อย่าสับสนระหว่างสองแบบนี้: typeof ของ JavaScript จะส่งคืนสตริง ณ เวลาทำงาน ส่วน typeof ของ TypeScript จะปรากฏใน ตำแหน่งชนิดข้อมูล และสร้างชนิดข้อมูลขึ้นมา คีย์เวิร์ดเหมือนกัน แต่ทำงานอยู่คนละโลก

const n = 42
console.log(typeof n) // "number" — JS runtime
type T = typeof n     // number — TS type position

การจับชนิดข้อมูลของตัวแปร

วาง typeof ไว้หน้าค่าในคำอธิบายชนิดข้อมูลเพื่อจับชนิดข้อมูลที่อนุมานได้ของค่านั้น ในกรณีนี้ T จะกลายเป็น string

const greeting = "hello"
type G = typeof greeting // string
const another: G = "world"
console.log(another)

การจับโครงสร้างของออบเจ็กต์

เมื่อนำ typeof ไปใช้กับออบเจ็กต์ค่าคงที่ จะได้โครงสร้างทั้งหมดที่อนุมานได้โดยไม่ต้องเขียนส่วนติดต่อด้วยตนเอง

const config = { host: "localhost", port: 8080 }
type Config = typeof config // { host: string; port: number }
const c: Config = { host: "127.0.0.1", port: 3000 }
console.log(c)

การอนุมานจะขยายชนิดข้อมูลโดยค่าเริ่มต้น

หากไม่มีตัวช่วย TypeScript จะขยายค่าตามตัวอักษรให้กว้างขึ้น เช่น port: 8080 จะกลายเป็น number ไม่ใช่ค่าตามตัวอักษร 8080 ซึ่งมักไม่เป็นปัญหา แต่บางครั้งคุณอาจต้องการรักษาค่าที่แน่นอนไว้

const settings = { mode: "dark" }
type S = typeof settings // { mode: string }
const x: S = { mode: "anything" }
console.log(x)

ตัวดำเนินการชนิดข้อมูลร่วมกับการกำหนดเป็นค่าคงที่

เพิ่ม as const เพื่อทำให้ค่าเป็นชนิดข้อมูลตามตัวอักษรที่แคบที่สุด ตอนนี้ typeof จะจับค่าตามตัวอักษรที่แน่นอน และกำหนดให้ทุกอย่างเป็น readonly

const settings = { mode: "dark" } as const
type S = typeof settings // { readonly mode: "dark" }
const x: S = { mode: "dark" }
console.log(x)

ชนิดข้อมูลตามตัวอักษรจากอาร์เรย์

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

const roles = ["admin", "editor", "viewer"] as const
type Roles = typeof roles // readonly ["admin", "editor", "viewer"]
console.log(roles[0])

การอนุมานยูเนียนของค่า

รวม typeof กับการเข้าถึงด้วยดัชนีโดยใช้ [number] เพื่อเปลี่ยนอาร์เรย์ค่าคงที่ให้เป็นชนิดข้อมูลยูเนียนของค่าภายใน

const roles = ["admin", "editor", "viewer"] as const
type Role = typeof roles[number] // "admin" | "editor" | "viewer"
const r: Role = "editor"
console.log(r)

ตัวดำเนินการชนิดข้อมูลกับฟังก์ชัน

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

function add(a: number, b: number) { return a + b }
type AddFn = typeof add // (a: number, b: number) => number
const myAdd: AddFn = (x, y) => x + y
console.log(myAdd(2, 3))

ทำให้ชนิดข้อมูลสอดคล้องกับค่า

ประโยชน์สำคัญคือ กำหนดการตั้งค่าหรือค่าคงที่เป็นค่าเพียงครั้งเดียว แล้วอนุมานชนิดข้อมูลด้วย typeof เมื่อเปลี่ยนค่า ชนิดข้อมูลจะอัปเดตโดยอัตโนมัติ จึงไม่ต้องเขียนซ้ำ

const defaults = { retries: 3, timeout: 1000 }
type Defaults = typeof defaults
function apply(opts: Defaults) { return opts.retries }
console.log(apply(defaults))

ใช้ได้เฉพาะตัวระบุ

ตัวดำเนินการชนิดข้อมูล typeof รับตัวระบุหรือเส้นทางคุณสมบัติ ไม่ใช่นิพจน์ทั่วไป ดังนั้นจึงไม่อนุญาตให้ใช้ typeof (a + b)

const obj = { user: { name: "Ada" } }
type Name = typeof obj.user.name // string
const n: Name = "Leo"
console.log(n)

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับตัวดำเนินการชนิดข้อมูล typeof

ทบทวน

ตัวดำเนินการชนิดข้อมูล typeof ซึ่งอยู่ในตำแหน่งชนิดข้อมูล จะอนุมานชนิดข้อมูลจากค่า ไม่ว่าจะเป็นตัวแปร ออบเจ็กต์ อาร์เรย์ หรือฟังก์ชัน โดยค่าเริ่มต้น ค่าตามตัวอักษรจะถูกขยายให้กว้างขึ้น ให้เพิ่ม as const เพื่อจับชนิดข้อมูลตามตัวอักษรที่แน่นอนเป็นชนิดข้อมูลแบบอ่านอย่างเดียว เมื่อใช้ร่วมกับการเข้าถึงด้วยดัชนี (typeof arr[number]) จะสามารถสร้างยูเนียนของค่าได้ การอนุมานชนิดข้อมูลจากค่าช่วยให้มีแหล่งข้อมูลหลักเพียงแหล่งเดียว และหลีกเลี่ยงการเขียนโครงสร้างซ้ำ

คำถามที่พบบ่อย

บทเรียน “ตัวดำเนินการชนิด typeof” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวดำเนินการชนิด typeof” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวดำเนินการชนิด typeof”

จับชนิดข้อมูลของค่าขณะทำงานด้วย typeof คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวดำเนินการชนิด typeof” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ TypeScript Academy