TypeScript ist großartig. Ich habe den Wechsel vor ein paar Jahren gemacht, als ich ein neues Projekt anfing. Ich habe seitdem nicht mehr zurückgeschaut. Ich habe viel mehr Vertrauen in den Code, den ich produziere, dass er (meistens) so funktioniert, wie ich es erwarte. Manchmal kann dieses Vertrauen zurückkommen, um mich zu beißen.

Heute habe ich eine clearFiltersFunktion, die wir haben , um einige Funktionen erweitert . Es sieht ungefähr so ​​aus:

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

Bei Filterssieht es ungefähr so ​​aus:

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

Groß! Lass uns unsere clearFiltersFunktion aktualisieren

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

Außer

Ich erhalte jedes Mal eine Ausnahme, wenn ich versuche, Filter zu löschen, die besagt, dass dies except.includeskeine Funktion ist! Was zum was?!

Ich dachte, ich hätte mit diesem Fehler wirklich einen mit TypeScript überstanden. Es stellte sich heraus, dass es ein ziemlich einfacher Fehler ist. Aber wie bei allen Fehlern ist es erst einfach, wenn man es herausgefunden hat.

Mein (einfacher?) Fehler

Schauen wir uns noch Filterseinmal an.

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
}

Um das zu beheben, machen wir ein weiteres kleines Update:

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

gewonnene Erkenntnisse

1. Wenn Sie eine Funktion als Requisite übergeben, aktualisieren Sie den Typ, wenn Sie die Funktion aktualisieren

2. Automatisierte Tests schreiben

In diesem Fall wurde mein Fehler von unseren Cypress-Tests auf dem Build-Server abgefangen. Wenn dies nicht der Fall wäre, wäre dieser Code möglicherweise in die Produktion gegangen, ohne dass jemand bemerkt, dass er kaputt war. Diese automatisierten Tests verhinderten große Kopfschmerzen, insbesondere vor einer Bereitstellung am späten Freitag.

Ich hoffe, meine Fehler können Sie in Zukunft vor einigen retten! Wo sind Sie bei TypeScript auf Dinge gestoßen, die anders als erwartet verlaufen sind? Welche Lektionen haben Sie dabei gelernt?