TypeScript est génial. J'ai fait le changement il y a quelques années alors que je démarrais un nouveau projet. Je n'ai pas regardé en arrière depuis. Je me sens beaucoup plus confiant dans le code que je produis, qu'il fonctionnera (principalement) comme je l'attends. Parfois, cette confiance peut revenir me mordre.

Aujourd'hui, j'ajoutais des fonctionnalités à une clearFiltersfonction que nous avons. Cela ressemble à quelque chose comme ça :

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

Dans Filters, cela ressemble à ceci :

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

Génial! Mettons à jour notre clearFiltersfonction

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

Sauf

Je reçois une exception à chaque fois que j'essaie d'effacer les filtres qui dit que ce except.includesn'est pas une fonction ! Qu'est-ce que quoi ?!

Je pensais en avoir vraiment un sur TypeScript avec cette erreur. Il s'avère que c'est une erreur assez simple. Mais comme pour toutes les erreurs, ce n'est simple qu'une fois que vous l'avez compris.

Mon (simple ?) erreur

Regardons Filtersencore.

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
}

Pour résoudre ce problème, nous effectuons une autre petite mise à jour :

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

Leçons apprises

1. Lorsque vous passez une fonction en tant qu'accessoire, mettez à jour le type lorsque vous mettez à jour la fonction

2. Écrire des tests automatisés

Dans ce cas, mon erreur a été détectée par nos tests Cypress sur le serveur de build. Sinon, il est possible que ce code ait pu être mis en production sans que personne ne se rende compte qu'il était cassé. Ces tests automatisés ont évité d'importants maux de tête, en particulier avant un déploiement tard un vendredi.

J'espère que mes erreurs pourront vous en sauver à l'avenir ! Où avez-vous rencontré des choses avec TypeScript qui se sont produites différemment de ce à quoi vous vous attendiez ? Quelles leçons avez-vous apprises en cours de route ?