Frontend Academy · บทเรียน

โหมดเข้มงวดและการกำจัด any

เปิดใช้แฟล็กโหมดเข้มงวดทั้งหมดใน tsconfig ใช้ unknown แทน any ใช้การยืนยันชนิดอย่างปลอดภัย และย้ายไฟล์ที่มีชนิดไม่รัดกุมไปสู่โหมดเข้มงวด

บทเรียน 4 จาก 414 ขั้นตอน

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

เหตุใดจึงใช้โหมดเข้มงวด

strict: true ใน tsconfig.json จะเปิดใช้การตรวจสอบความปลอดภัยของ TypeScript ทุกอย่าง ซึ่งเป็นมาตรฐานสำหรับโครงการจริงจัง โดยจะตรวจพบข้อผิดพลาดเกี่ยวกับค่า null พารามิเตอร์ที่ไม่ได้กำหนดชนิด และการกำหนดค่าที่ไม่ปลอดภัยตั้งแต่เวลาคอมไพล์

สิ่งที่โหมดเข้มงวดเปิดใช้งาน

โหมดเข้มงวดเป็นแฟล็กระดับรวมที่เปิดใช้สิ่งต่อไปนี้: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis และ useUnknownInCatchVariables

strictNullChecks

หากไม่เปิดใช้ ค่าของ null และ undefined จะสามารถกำหนดให้กับทุกชนิดได้ ซึ่งเป็นแหล่งที่มาของข้อผิดพลาดอย่างต่อเนื่อง เมื่อเปิดใช้ คุณต้องจัดการกรณีที่เป็น null อย่างชัดเจน

// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime

// With strictNullChecks:
function greet(name: string | null) {
  if (name == null) return '';
  return name.toUpperCase();
}

noImplicitAny

หากไม่เปิดใช้แฟล็กนี้ พารามิเตอร์ที่ไม่มีคำอธิบายชนิดจะมีค่าเริ่มต้นเป็น any ทำให้ข้ามระบบชนิดไปโดยไม่แจ้งเตือน เมื่อเปิดใช้ noImplicitAny คุณต้องกำหนดชนิดให้พารามิเตอร์เหล่านั้น

// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any

// With:
function format(value: string) { return value.toUpperCase(); }

strictPropertyInitialization

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

class User {
  name!: string;     // tell TS: I'll set this elsewhere
  age = 0;           // default initialiser
  email: string;     // ERROR with strictPropertyInitialization
  constructor(email: string) { this.email = email; } // FIX: init in ctor
}

ใช้ชนิดที่ไม่ทราบแน่ชัดแทนชนิดใดก็ได้

any จะยกเลิกการตรวจสอบชนิด ส่วน unknown ปลอดภัยต่อชนิดมากกว่า เพราะคุณต้องจำกัดชนิดให้แคบลงก่อนใช้งาน ควรเลือกใช้ unknown เสมอ

// any — no checks, bug magnet:
function parse(input: any) {
  return input.toUpperCase(); // compiler is fine, runtime may crash
}

// unknown — must narrow:
function parse(input: unknown) {
  if (typeof input === 'string') {
    return input.toUpperCase();
  }
  throw new Error('Expected string');
}

การยืนยันชนิดอย่างปลอดภัย

หากจำเป็นต้องยืนยันชนิด เพราะคุณมีข้อมูลมากกว่า TS ให้เลือกใช้ไวยากรณ์ as อย่ายืนยันชนิดซ้อนสองชั้น (x as unknown as T) เว้นแต่จะไม่มีทางเลือกจริง ๆ เพราะเป็นสัญญาณของโค้ดที่ควรปรับปรุง

const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';

// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElement

กำจัด any ออกจากโครงการ

แนวทางคือเปิดใช้โหมดเข้มงวด แล้วแก้ข้อผิดพลาดที่เกิดขึ้นทีละไฟล์ ใช้ unknown ร่วมกับการจำกัดชนิดให้แคบลง เพิ่ม @ts-expect-error พร้อมข้อคิดเห็น TODO สำหรับจุดที่ทราบว่าไม่ถูกต้อง เพื่อไม่ให้จุดเหล่านั้นถูกละเลย

กฎตรวจสอบโค้ด: ไม่ใช้ any แบบชัดแจ้ง

เพิ่ม @typescript-eslint/no-explicit-any ลงในการกำหนดค่าของ ESLint เพื่อป้องกันไม่ให้มีการเพิ่ม any ใหม่

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/no-explicit-any": "error"
  }
}

strictFunctionTypes

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

ชนิดของตัวแปรจับข้อผิดพลาด

useUnknownInCatchVariables ทำให้ catch (e) อนุมาน e: unknown แทน any ดังนั้นคุณต้องจำกัดชนิดให้แคบลงก่อนเข้าถึงพร็อพเพอร์ตี

try {
  doRisky();
} catch (e) {
  // e is unknown
  if (e instanceof Error) {
    console.error(e.message);
  } else {
    console.error('Unknown error', e);
  }
}

เคล็ดลับการย้ายระบบ

เปิดใช้โหมดเข้มงวดในโครงการใหม่ตั้งแต่วันแรก สำหรับโครงการเดิม ให้เปิดใช้แฟล็กทีละรายการ เริ่มจาก strictNullChecks ซึ่งให้ผลลัพธ์มากที่สุด แล้วจึงใช้ noImplicitAny ใช้ //@ts-expect-error แทน //@ts-ignore เพื่อให้ข้อคิดเห็นถูกลบออกเมื่อแก้ไขปัญหาแล้ว

ตรวจสอบอย่างรวดเร็ว

เหตุใด unknown จึงปลอดภัยกว่า any เมื่อคุณไม่ทราบชนิดของค่า

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: โหมดเข้มงวด

เปิดใช้ strict: true เพื่อความปลอดภัยอย่างครบถ้วน strictNullChecks บังคับให้จัดการค่า null noImplicitAny บังคับให้กำหนดชนิดของพารามิเตอร์ strictPropertyInitialization ใช้กับฟิลด์ของคลาส ใช้ unknown แทน any และจำกัดชนิดให้แคบลงด้วยตัวตรวจสอบชนิด หลีกเลี่ยงการยืนยันชนิดซ้อนสองชั้น ตรวจสอบโค้ดด้วย no-explicit-any และย้ายโค้ดเดิมทีละไฟล์โดยใช้เครื่องหมาย @ts-expect-error

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “โหมดเข้มงวดและการกำจัด any” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “โหมดเข้มงวดและการกำจัด any”

เปิดใช้แฟล็กโหมดเข้มงวดทั้งหมดใน tsconfig ใช้ unknown แทน any ใช้การยืนยันชนิดอย่างปลอดภัย และย้ายไฟล์ที่มีชนิดไม่รัดกุมไปสู่โหมดเข้มงวด คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “โหมดเข้มงวดและการกำจัด any” ใช้เวลานานแค่ไหน

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

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

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

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

ชนิด Template Literal
เดคอเรเตอร์และข้อมูลเมตา
TypeScript กับ React: เจเนริกของ FC และฮุก
โหมดเข้มงวดและการกำจัด any

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