กลไกการขยายและจำกัดชนิดให้แคบลง
เรียนรู้ว่า TypeScript ขยายชนิดอย่างไรและควรป้องกันเมื่อใด
กลไกการขยายและจำกัดชนิดให้แคบลง เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การขยายชนิดข้อมูลคืออะไร
การขยายชนิดข้อมูลคือเมื่อ TypeScript อนุมานชนิดข้อมูลที่กว้างกว่าที่คุณเขียน การกำหนดค่า let x = "hello" ทำให้ชนิดข้อมูลขยายเป็น string ไม่ใช่ค่าตามตัวอักษร "hello".
let x = "hello"; // inferred: string, not "hello"
let y = 42; // inferred: number, not 42การขยายชนิดข้อมูลด้วย let เทียบกับ const
ตัวแปรที่ประกาศด้วย const จะคงชนิดข้อมูลตามตัวอักษรไว้ เพราะไม่สามารถกำหนดค่าใหม่ได้ ส่วน let จะขยายเป็นชนิดข้อมูลพื้นฐาน
const a = "world"; // type: "world"
let b = "world"; // type: stringป้องกันการขยายชนิดข้อมูลด้วยคำอธิบายชนิดข้อมูล
การระบุชนิดข้อมูลให้ตัวแปร let อย่างชัดเจนจะป้องกันการขยายชนิดข้อมูลและยึดชนิดข้อมูลตามตัวอักษรไว้
let direction: "left" | "right" = "left";
// direction = "up"; // Error: not assignableการจำกัดชนิดข้อมูลให้แคบลงด้วย typeof
TypeScript จะจำกัดชนิดข้อมูลยูเนียนให้แคบลงภายในการตรวจสอบ typeof ทำให้คุณได้ชนิดข้อมูลที่ชัดเจนภายในแขนงนั้น
function format(val: string | number) {
if (typeof val === "string") {
return val.toUpperCase(); // val: string here
}
return val.toFixed(2); // val: number here
}การจำกัดชนิดข้อมูลให้แคบลงด้วยการตรวจสอบความเท่ากัน
การตรวจสอบความเท่ากันกับค่าตามตัวอักษรก็ช่วยจำกัดชนิดข้อมูลให้แคบลงภายในแขนงนั้นได้เช่นกัน
type Direction = "left" | "right" | "up";
function handle(dir: Direction) {
if (dir === "left") {
console.log("Going left"); // dir: "left"
}
}การวิเคราะห์ลำดับการควบคุม
TypeScript ติดตามการกำหนดค่าผ่านลำดับการควบคุม และจำกัดชนิดข้อมูลให้แคบลงหลังจากแต่ละแขนง
function process(x: string | null) {
if (x === null) return;
// x is string here — TypeScript knows null is ruled out
console.log(x.length);
}การขยายชนิดข้อมูลในค่าลิเทอรัลของออบเจ็กต์
ค่าพร็อพเพอร์ตีในค่าลิเทอรัลของออบเจ็กต์ก็จะถูกขยายชนิดข้อมูลเช่นกัน เว้นแต่คุณจะใช้ as const
const config = { mode: "dark" };
// config.mode: string (widened)
const config2 = { mode: "dark" } as const;
// config2.mode: "dark" (literal)ความสดใหม่และการขยายชนิดข้อมูล
เมื่อคุณกำหนดค่าลิเทอรัลของออบเจ็กต์โดยตรงให้กับตัวแปรที่มีชนิดข้อมูล TypeScript จะใช้การตรวจสอบพร็อพเพอร์ตีส่วนเกิน — แต่เมื่อค่าถูกขยายชนิดข้อมูลเป็นตัวแปรที่มีชื่อแล้ว การตรวจสอบนั้นจะไม่ใช้กับชนิดข้อมูลดังกล่าวอีกต่อไป
interface Options { timeout: number; }
const opts = { timeout: 3000, retry: true };
// No error — widened type, excess property check skipped
const o: Options = opts;การจำกัดชนิดข้อมูลให้แคบลงด้วยโอเปอเรเตอร์ in
โอเปอเรเตอร์ in จะจำกัดชนิดข้อมูลยูเนียนของออบเจ็กต์ให้แคบลงโดยตรวจสอบว่ามีพร็อพเพอร์ตีอยู่หรือไม่
type Cat = { meow(): void };
type Dog = { bark(): void };
function speak(animal: Cat | Dog) {
if ("meow" in animal) animal.meow();
else animal.bark();
}การจำกัดชนิดข้อมูลให้แคบลงด้วยฟังก์ชันยืนยัน
ฟังก์ชันยืนยันใช้ชนิดข้อมูลค่าที่ส่งคืนเป็น asserts condition เพื่อจำกัดชนิดข้อมูลให้แคบลงหลังจากเรียกใช้ฟังก์ชัน
function assertString(val: unknown): asserts val is string {
if (typeof val !== "string") throw new Error("Expected string");
}
const x: unknown = "hi";
assertString(x);
x.toUpperCase(); // OK — narrowed to stringสรุป: การขยายชนิดข้อมูลเทียบกับการจำกัดชนิดข้อมูลให้แคบลง
การขยายชนิดข้อมูลทำให้ชนิดข้อมูลที่อนุมานได้กว้างขึ้นเพื่อความยืดหยุ่น ส่วนการจำกัดชนิดข้อมูลให้แคบลงจะปรับชนิดข้อมูลกว้างให้เฉพาะเจาะจงภายในแขนงแบบมีเงื่อนไข การเข้าใจทั้งสองแนวคิดช่วยให้คุณเขียน TypeScript ได้ปลอดภัยยิ่งขึ้น
ตรวจสอบอย่างรวดเร็ว
การประกาศใดป้องกันไม่ให้ชนิดข้อมูลขยายเป็นชนิดข้อมูลพื้นฐาน
สิ่งที่คุณได้เรียนรู้
ตอนนี้คุณเข้าใจการขยายชนิดข้อมูล ซึ่งเป็นวิธีที่ TypeScript ทำให้ชนิดข้อมูลที่อนุมานได้กว้างขึ้น และการจำกัดชนิดข้อมูลให้แคบลง ซึ่งเป็นวิธีที่การตรวจสอบแบบมีเงื่อนไขสร้างชนิดข้อมูลที่เฉพาะเจาะจงแล้ว ใช้ as const เพื่อป้องกันการขยายชนิดข้อมูล และใช้การตรวจสอบลำดับการควบคุมเพื่อจำกัดชนิดข้อมูลยูเนียนให้แคบลงอย่างปลอดภัย
เรียนรู้ TypeScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 101
- บทเรียน
- 352
คำถามที่พบบ่อย
บทเรียน “กลไกการขยายและจำกัดชนิดให้แคบลง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กลไกการขยายและจำกัดชนิดให้แคบลง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กลไกการขยายและจำกัดชนิดให้แคบลง”
เรียนรู้ว่า TypeScript ขยายชนิดอย่างไรและควรป้องกันเมื่อใด คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “กลไกการขยายและจำกัดชนิดให้แคบลง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- กลไกการขยายและจำกัดชนิดให้แคบลง
- การระบุชนิดตามบริบท: การอนุมานจากบริบท
- ความใหม่และการตรวจสอบพร็อพเพอร์ตีส่วนเกิน
- การยืนยัน const และ as const