TypeScript è fantastico. Ho fatto il passaggio alcuni anni fa quando stavo iniziando un nuovo progetto. Non ho guardato indietro da allora. Mi sento molto più sicuro del codice che produco, che funzionerà (principalmente) come mi aspetto. A volte, quella fiducia può tornare a mordermi.

Oggi ho aggiunto alcune funzionalità a una clearFiltersfunzione che abbiamo. Sembra qualcosa del genere:

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

In Filters, sembra qualcosa del genere:

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

Grande! Aggiorniamo la nostra clearFiltersfunzione

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

tranne

Ricevo un'eccezione ogni volta che provo a cancellare i filtri che dice che except.includesnon è una funzione! Che cosa?!

Pensavo di averne davvero superato uno su TypeScript con questo errore. Si scopre che è un errore piuttosto semplice. Ma come per tutti gli errori, è semplice solo una volta che l'hai capito.

Il mio (semplice?) errore

Diamo un'occhiata di Filtersnuovo.

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
}

Per risolvere questo problema, facciamo un altro piccolo aggiornamento:

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

Lezioni imparate

1. Quando passi una funzione come prop, aggiorna il tipo quando aggiorni la funzione

2. Scrivi test automatici

In questo caso, il mio errore è stato rilevato dai nostri test Cypress sul server di compilazione. Se non fosse per questo, è possibile che questo codice sia stato rilasciato in produzione senza che nessuno si rendesse conto che era rotto. Questi test automatizzati hanno evitato grossi grattacapi, soprattutto prima di una distribuzione in ritardo il venerdì.

Spero che i miei errori possano salvarti da alcuni in futuro! Dove ti sei imbattuto in cose con TypeScript che sono avvenute in modo diverso da come ti aspettavi? Quali lezioni hai imparato lungo la strada?