TypeScript é ótimo. Eu fiz a mudança alguns anos atrás, quando estava começando um novo projeto. Não olhei para trás desde então. Sinto-me muito mais confiante no código que produzo, de que funcionará (principalmente) como espero. Às vezes, essa confiança pode voltar para me morder.

Hoje, eu estava adicionando algumas funcionalidades a uma clearFiltersfunção que temos. É mais ou menos assim:

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

Em Filters, é mais ou menos assim:

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

Excelente! Vamos atualizar nossa clearFiltersfunção

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

Exceto

Estou recebendo uma exceção toda vez que tento limpar os filtros que dizem que except.includesnão é uma função! O que o quê ?!

Achei que realmente havia superado o TypeScript com este erro. Acontece que é um erro bem simples. Mas, como acontece com todos os erros, só é simples depois de você ter descoberto.

Meu (simples?) Erro

Vamos olhar Filtersnovamente.

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 corrigir isso, fazemos outra pequena atualização:

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

Lições aprendidas

1. Ao passar uma função como um adereço, atualize o tipo ao atualizar a função

2. Escreva testes automatizados

Nesse caso, meu erro foi detectado por nossos testes Cypress no servidor de compilação. Se não fosse por isso, é possível que este código pudesse ter sido lançado em produção sem que ninguém percebesse que estava quebrado. Esses testes automatizados evitaram grandes dores de cabeça, especialmente antes de uma implantação na noite de uma sexta-feira.

Espero que meus erros possam salvá-lo de alguns no futuro! Onde você encontrou coisas com o TypeScript que aconteceram de maneira diferente do que você esperava? Que lições você aprendeu ao longo do caminho?