TypeScript harika. Geçişi birkaç yıl önce yeni bir projeye başladığımda yaptım. O zamandan beri geriye bakmadım. Ürettiğim kodun (çoğunlukla) beklediğim gibi çalışacağından çok daha emin hissediyorum. Bazen, bu güven beni ısırmak için geri gelebilir.

Bugün clearFilterssahip olduğumuz bir fonksiyona bazı fonksiyonlar ekliyordum . Şuna benziyor:

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

İçinde Filters, şöyle bir şeye benziyor:

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

Harika! clearFiltersfonksiyonumuzu güncelleyelim

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

Dışında

except.includesBir işlev olmadığını söyleyen filtreleri her temizlemeye çalıştığımda bir istisna alıyorum ! Ne ne?!

Bu hatayla TypeScript'i gerçekten aştığımı sanıyordum. Anlaşılan, bu oldukça basit bir hata. Ancak tüm hatalar gibi, bunu bir kez çözdükten sonra basittir.

Benim (Basit?) Hatam

FiltersTekrar bakalım .

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
}

Bunu düzeltmek için küçük bir güncelleme daha yapıyoruz:

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

Dersler öğrenildi

1. Bir işlevi prop olarak geçirirken, işlevi güncellerken türü güncelleyin

2. Otomatik testler yazın

Bu durumda, derleme sunucusundaki Cypress testlerimiz tarafından hatam yakalandı. Eğer böyle olmasaydı, bu kodun kimse bozulduğunu anlamadan üretime girmiş olması mümkündür. Bu otomatik testler, özellikle Cuma günü geç saatlerde konuşlandırma öncesinde büyük baş ağrılarını önledi.

Umarım hatalarım gelecekte sizi bazı şeylerden kurtarabilir! TypeScript ile beklediğinizden farklı olan şeylerle nerede karşılaştınız? Yol boyunca hangi dersleri öğrendin?