TypeScript ดีมาก ฉันได้เปลี่ยนเมื่อไม่กี่ปีที่ผ่านมาเมื่อฉันเริ่มโครงการใหม่ ฉันไม่ได้มองย้อนกลับไปตั้งแต่ ฉันรู้สึกมั่นใจมากขึ้นในโค้ดที่ฉันสร้าง ว่ามันใช้งานได้ (ส่วนใหญ่) อย่างที่ฉันคาดไว้ บางครั้งความมั่นใจนั้นก็กลับมากัดฉันได้

วันนี้ ฉันกำลังเพิ่มฟังก์ชันการทำงานบางอย่างให้กับclearFiltersฟังก์ชันที่เรามี ดูเหมือนว่านี้:

const [activeFilters, setActiveFilters] = useState<Filter[]>(initialFilters)
const clearFilters = () => {
   setActiveFilters([])
}

ในFiltersดูเหมือนว่านี้:

interface Props {
  filters: Filter[]
  clearFilters: () => void
}
const Filters: React.FC<Props> = ({
  return (
    <div>
      ... the filters
<button
        onClick={clearFilters}
      >
        Clear All
      </button>
    </div>
  )
})

เยี่ยมมาก! มาอัปเดตclearFiltersฟังก์ชันของเรากันเถอะ

const clearFilters = (except?: FilterType[]) => {
  if(except){
    setActiveFilters(activeFilters.filter((f) => except.includes(f.type))  
  } else {
    setActiveFilters([])
  }
}

ยกเว้น

ฉันได้รับข้อยกเว้นทุกครั้งที่พยายามล้างตัวกรองที่ระบุว่าexcept.includesไม่ใช่ฟังก์ชัน! อะไรนะ!

ฉันคิดว่าฉันได้ใช้ TypeScript มากกว่าหนึ่งครั้งโดยมีข้อผิดพลาดนี้ ปรากฎว่ามันเป็นความผิดพลาดที่ค่อนข้างง่าย แต่เช่นเดียวกับข้อผิดพลาดทั้งหมด มันง่ายเมื่อคุณคิดออกแล้วเท่านั้น

ความผิดพลาด (ง่าย?) ของฉัน

มาดูกันFiltersอีกที

interface Props {
  filters: Filter[]
  clearFilters: () => void
}
const Filters: React.FC<Props> = ({
  return (
    <div>
      ... the filters
<button
        onClick={clearFilters}
      >
        Clear All
      </button>
    </div>
  )
})

interface Props {
  filters: Filter[]
  clearFilters: (except?: FilterType[]) => void
}

ในการแก้ไขปัญหานั้น เราทำการอัปเดตเล็กน้อยอีกครั้ง:

<button onClick={() => clearFilters()}>All Clear</button>

บทเรียนที่ได้รับ

1. เมื่อส่งฟังก์ชันเป็นพร็อพ ให้อัปเดตประเภทเมื่อคุณอัปเดตฟังก์ชัน

2. เขียนแบบทดสอบอัตโนมัติ

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

หวังว่าความผิดพลาดของฉันจะช่วยคุณจากบางสิ่งในอนาคต! คุณเคยเจอปัญหากับ TypeScript ที่ต่างไปจากที่คุณคาดไว้ที่ไหน คุณได้เรียนรู้บทเรียนอะไรบ้างระหว่างทาง?