Como fazer as Function do TypeScript aceitarem Index como parâmetro.

Fala stakers!

Se você já recebeu o erro “Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type” no TypeScript através do TSLint ou no VsCode? Vamos aqui ver a solução!

Geralmente isso acontece quando nós queremos criar uma function genérica e receber uma property específica de um array de key-values. Mas afinal de contas, como tipamos ela de maneira correta no TypeScript?

Vamos ver como fazer isso. Atenção o TSLint não aceita isso.

getItem(dataProp: string, data: RodasDoCarro[]) : RodasDoCarroModel[] {
  return data?.map(
    (item) => {
      const { date } = item
      const valor = 
      return new RodasDoCarroModel({
          label: item.date,
          validation: item[dataProp] ?? 0
      })
    }
  )
}

Você vai receber um erro “Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘Vaccination’.”.

O erro é ocorrido pois não conseguimos garantir que o dataProp é uma property da interface Vaccination. 

Quando mantemos ele como tipo string, o erro irá ocorrer quando a property não for encontrada na interface Vaccination.

E como iremos resolver esse erro e continuar usando o item[dataProp]?

Usamos o keyof Vaccination. Através do keyof nós podemos dizer que apenas aceitamos as properties da interface Vaccionation como um parâmetro.

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Aprenda mais de Angular em nossas postagens ou no Youtube.