TypeScript es genial. Hice el cambio hace unos años cuando estaba comenzando con un nuevo proyecto. No he mirado atrás desde entonces. Me siento mucho más seguro en el código que produzco, que funcionará (principalmente) como espero. A veces, esa confianza puede volver a morderme.

Hoy, agregué algunas funciones a una clearFiltersfunción que tenemos. Se parece a esto:

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

En Filters, se parece a esto:

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

¡Estupendo! Actualicemos nuestra clearFiltersfunción

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

Excepto

¡Recibo una excepción cada vez que intento borrar los filtros que dice que except.includesno es una función! ¡¿Que el que?!

Pensé que realmente había superado uno en TypeScript con este error. Resulta que es un error bastante simple. Pero como ocurre con todos los errores, es simple una vez que lo has descubierto.

Mi (¿simple?) Error

Miremos de Filtersnuevo.

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
}

Para solucionarlo, hacemos otra pequeña actualización:

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

Lecciones aprendidas

1. Al pasar una función como accesorio, actualice el tipo cuando actualice la función

2. Escribe pruebas automatizadas

En este caso, mi error fue detectado por nuestras pruebas de Cypress en el servidor de compilación. Si no fuera por eso, es posible que este código se hubiera lanzado a producción sin que nadie se diera cuenta de que estaba roto. Estas pruebas automatizadas evitaron grandes dolores de cabeza, especialmente antes de una implementación a última hora del viernes.

¡Espero que mis errores puedan salvarte de algunos en el futuro! ¿Dónde se ha encontrado con cosas con TypeScript que sucedieron de manera diferente a lo esperado? ¿Qué lecciones ha aprendido en el camino?