การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล
จำกัดขอบเขตค่า unknown ก่อนนำไปใช้อย่างปลอดภัย
การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การทำงานกับชนิดไม่ทราบแน่ชัดอย่างปลอดภัย
การกำหนดชนิดข้อมูลภายนอกเป็น unknown เป็นเพียงครึ่งหนึ่งของงาน อีกครึ่งหนึ่งคือการ จำแนกชนิดให้แคบลง เป็นชนิดที่แน่นอนก่อนนำไปใช้ บทเรียนนี้ครอบคลุมเทคนิคหลักในการจำแนกชนิด
function describe(v: unknown): string {
if (typeof v === 'string') return 'string: ' + v;
if (typeof v === 'number') return 'number: ' + v;
return 'other';
}
console.log(describe('hi'), describe(7), describe(true));การจำแนกชนิดด้วยการตรวจชนิดข้อมูล
ตัวตรวจสอบ typeof เป็นเครื่องมือที่ง่ายที่สุด โดยจำแนก unknown ให้เป็นชนิดพื้นฐาน เช่น string, number, boolean, function, object และชนิดอื่น ๆ
function double(v: unknown): number {
if (typeof v === 'number') {
return v * 2; // v is number here
}
return 0;
}
console.log(double(21), double('no'));การจำแนกชนิดด้วยการตรวจอินสแตนซ์
สำหรับอินสแตนซ์ของคลาส ให้ใช้ instanceof ตัวตรวจสอบนี้จะจำแนก unknown ให้เป็นคลาสที่เจาะจง ทำให้เข้าถึงเมธอดและคุณสมบัติของคลาสได้อย่างปลอดภัย
function handle(v: unknown): string {
if (v instanceof Date) {
return v.toISOString(); // v is Date
}
return 'not a date';
}
console.log(handle(new Date(0)));การจำแนกชนิดด้วยตัวดำเนินการตรวจสมาชิก
ตัวดำเนินการ in ตรวจสอบว่าคุณสมบัติมีอยู่ในออบเจ็กต์หรือไม่ ซึ่งช่วยจำแนกค่าที่มีชนิดเป็นออบเจ็กต์ได้ ก่อนอื่นให้ยืนยันว่าค่านั้นเป็นออบเจ็กต์ที่ไม่ใช่ค่าว่าง จากนั้นจึงตรวจสอบคีย์ของออบเจ็กต์
function getName(v: unknown): string {
if (typeof v === 'object' && v !== null && 'name' in v) {
return String((v as { name: unknown }).name);
}
return 'anonymous';
}
console.log(getName({ name: 'Ada' }), getName(5));ตัวตรวจสอบชนิดแบบกำหนดเอง
ตัวตรวจสอบชนิดแบบกำหนดเอง คือฟังก์ชันที่มีชนิดค่าที่ส่งกลับเป็น value is T เมื่อฟังก์ชันส่งกลับค่า true, TypeScript จะจำแนกอาร์กิวเมนต์ให้เป็น T ณ จุดที่เรียกใช้
function isString(v: unknown): v is string {
return typeof v === 'string';
}
function shout(v: unknown): string {
return isString(v) ? v.toUpperCase() : '?';
}
console.log(shout('hey'), shout(9));ตัวตรวจสอบสำหรับโครงสร้างออบเจ็กต์
ตัวตรวจสอบแบบกำหนดเองมีประโยชน์อย่างยิ่งสำหรับตรวจสอบโครงสร้างของออบเจ็กต์ ให้เขียนฟังก์ชันหนึ่งที่ตรวจสอบฟิลด์ที่จำเป็นทั้งหมด แล้วโค้ดส่วนที่เหลือจะสามารถเชื่อถือชนิดที่ผ่านการจำแนกแล้วได้
type User = { id: number; name: string };
function isUser(v: unknown): v is User {
return typeof v === 'object' && v !== null &&
'id' in v && 'name' in v;
}
console.log(isUser({ id: 1, name: 'Sam' }), isUser({}));JSON.parse ส่งกลับข้อมูลที่คล้ายชนิดไม่ทราบแน่ชัด
JSON.parse ถูกกำหนดชนิดให้ส่งกลับ any ซึ่งหลีกเลี่ยงการตรวจสอบความปลอดภัยโดยไม่แจ้งเตือน แนวทางที่ดีที่สุดคือรับค่าไว้เป็น unknown แล้วตรวจสอบความถูกต้องก่อนเชื่อถือโครงสร้างของข้อมูล
function parseConfig(text: string): unknown {
return JSON.parse(text);
}
const raw = parseConfig('{"port":8080}');
console.log(typeof raw);การตรวจสอบ JSON ที่แยกวิเคราะห์แล้ว
ใช้ JSON.parse ร่วมกับตัวตรวจสอบชนิด เพื่อเปลี่ยนข้อความที่ไม่น่าเชื่อถือให้เป็นค่าที่มีชนิดอย่างปลอดภัย หากการตรวจสอบล้มเหลว ให้จัดการข้อผิดพลาดแทนที่จะเชื่อถือข้อมูลที่ไม่ถูกต้อง
type Config = { port: number };
function isConfig(v: unknown): v is Config {
return typeof v === 'object' && v !== null &&
'port' in v && typeof (v as any).port === 'number';
}
const data: unknown = JSON.parse('{"port":8080}');
if (isConfig(data)) console.log('Port:', data.port);การเชื่อมตัวตรวจสอบหลายตัว
สำหรับอินพุตที่ซับซ้อน ให้เรียงตัวตรวจสอบเป็นชั้น ๆ โดยตรวจสอบโครงสร้าง broad ก่อน แล้วจึงปรับให้ละเอียดขึ้น ตัวตรวจสอบแต่ละตัวจะจำแนกชนิดให้แคบลงอีกเล็กน้อย จนได้ชนิดที่แม่นยำและปลอดภัยทีละขั้น
function process(v: unknown): string {
if (Array.isArray(v)) {
if (v.every((x) => typeof x === 'string')) {
return v.join('-');
}
}
return 'invalid';
}
console.log(process(['a', 'b']), process([1, 2]));การโยนข้อผิดพลาดเมื่อข้อมูลไม่ถูกต้อง
เมื่อการตรวจสอบข้อมูลที่จำเป็นล้มเหลว ให้โยนข้อผิดพลาด เมื่อใช้ร่วมกับตัวช่วยจัดการความล้มเหลวที่ส่งกลับ never รูปแบบนี้จะทำให้เส้นทางการทำงานปกติสะอาดและมีชนิดที่ถูกต้อง
function asNumber(v: unknown): number {
if (typeof v === 'number') return v;
throw new Error('Expected a number');
}
console.log(asNumber(42));
try { asNumber('x'); } catch (e) { console.log('rejected'); }การนำทุกอย่างมารวมกัน
รูปแบบทั้งหมดคือ รับข้อมูลเป็น unknown จำแนกชนิดด้วยตัวตรวจสอบ แล้วจึงดำเนินการกับชนิดที่แน่นอน นี่คือขอบเขตที่ปลอดภัยระหว่างโลกภายนอกที่ไม่มีการกำหนดชนิดกับโค้ดที่มีชนิดของคุณ
type Point = { x: number; y: number };
function isPoint(v: unknown): v is Point {
return typeof v === 'object' && v !== null &&
'x' in v && 'y' in v;
}
const input: unknown = { x: 1, y: 2 };
if (isPoint(input)) console.log(input.x + input.y);ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจของคุณเกี่ยวกับการจัดการชนิดไม่ทราบแน่ชัดอย่างปลอดภัย
สรุป: การจัดการชนิดไม่ทราบแน่ชัด
คุณได้เรียนรู้การจำแนก unknown ให้แคบลงด้วย:
typeofสำหรับชนิดพื้นฐาน และinstanceofสำหรับอินสแตนซ์ของคลาส- ตัวดำเนินการ
inสำหรับคุณสมบัติของออบเจ็กต์ - ตัวตรวจสอบชนิดแบบกำหนดเอง ที่ส่งกลับ
value is T - การตรวจสอบผลลัพธ์จาก
JSON.parseก่อนเชื่อถือข้อมูล
หลักสูตรถัดไป: การยืนยันชนิดและการแปลงชนิด
function isNonEmpty(v: unknown): v is string {
return typeof v === 'string' && v.length > 0;
}
console.log(isNonEmpty('hi'), isNonEmpty(''));เรียนรู้ TypeScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 101
- บทเรียน
- 352
คำถามที่พบบ่อย
บทเรียน “การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล”
จำกัดขอบเขตค่า unknown ก่อนนำไปใช้อย่างปลอดภัย คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ทำความเข้าใจ unknown เทียบกับ any
- ชนิด never และสถานะที่เป็นไปไม่ได้
- ชนิด void ในฟังก์ชัน
- การจัดการ unknown อย่างปลอดภัยด้านชนิดข้อมูล