5

Funciona:

import * as Icons from 'react-icons/fa';
...
const teste = 'FaAddressBook';
const Icon = Icons[teste];

Não funciona:

import * as Icons from 'react-icons/fa';
...
const teste:string = 'FaAddressBook';
const Icon = Icons[teste];

Erro:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/node_modules/react-icons/fa/index")'.
  No index signature with a parameter of type 'string' was found on type 'typeof import("/node_modules/react-icons/fa/index")'.ts(7053)

inserir a descrição da imagem aqui

Nas props do componente eu vou receber o nome do ícone como string e precisaria exibir ele, mas só funciona sem TypeScript.

0

1 Resposta 1

6

Você está recebendo esse erro porque, em TypeScript, módulos também são estaticamente tipados. Desse modo, quando você importa todos os ícones usando a seguinte notação:

import * as Icons from 'react-icons/fa';

O TypeScript irá "definir" o tipo de Icons (também chamado de module namespace) como algo assim:

type Icons = {
  FaAccessibleIcon: IconType;
  FaAccusoft: IconType;
  FaAcquisitionsIncorporated: IconType;
  // ...
};

Desse modo, o TypeScript irá emitir um erro se você tentar acessar desse módulo uma propriedade que pode não existir (desde que a opção noImplicitAny esteja definida como true).

Para entender melhor o erro, basta pensar que uma string pode assumir qualquer valor de uma string, como FaAccessibleIcon (uma string que existe no módulo) ou FooBarBaz (uma string que pode não existir no módulo).

A partir do momento em que o compilador não tem certeza de que o que você está tentando acessar realmente está lá, o tipo any será atribuído, o que lança o seguinte erro no caso de noImplicitAny estar habilitada:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type [...]
  No index signature with a parameter of type 'string' was found on type [...] ts(7053)

Existem diversas formas de se resolver esse erro. A mais simples delas é usar uma asserção de tipos (type assertion):

import * as Icons from 'react-icons/fa';
import { IconType } from 'react-icons/lib/esm';

const iconName: string = 'FaAddressBook';

// `Icon` é do tipo `IconType | undefined`. =)
const Icon = (Icons as Record<string, IconType | undefined>)[iconName];

Coloquei no GitHub para referência futura.

Com o código acima, nos confirmamos (do verbo "assert" em inglês) ao compilador que o namespace Icons é do tipo que criamos utilizando o tipo embutido Record<K, V>. O tipo que criamos com o Record é equivalente ao seguinte:

type LooseIconsType1 = {
  [key: string]: IconType | undefined;
};

// É o mesmo que:

type LooseIconsType2 = Record<string, IconType | undefined>;

Nesse caso, estamos utilizando a asserção mais "segura", já que, caso você estiver com a opção strictNullChecks ativada, Icon poderá também ser undefined (já que o union type IconType | undefined foi utilizado), o que te obrigará a verificar a sua existência antes de utilizá-lo.

Se você não estiver preocupado com a segurança de tipos (o que é um erro, até porque um dos principais benefícios do TypeScript é a segurança adicional por ele trazida), você pode simplesmente desativar a opção noImplicitAny ou simplesmente fazer uma asserção ao tipo any:

import * as Icons from 'react-icons/fa';

const iconName: string = 'FaAddressBook';

// `Icon` é do tipo `any`. =(
const Icon = (Icons as any)[iconName];

Mas eu realmente não recomendo essa última opção. Se você pode fazer algo um pouco mais seguro, não há porquê não o fazer. ¯_(ツ)_/¯


Uma outra opção seria utilizar type-guards para isso. Mas como você pode verificar aqui e aqui, essa ainda não me parece ser uma opção muito viável.

Para saber mais sobre as opções do TypeScript, leia este documento.

1
  • 1
    Existe como fazer isso com um JSX.Element, nesse caso ai, você utilizou uma 'const' não tipada, como fazer funcionar num elemento react?
    – Freesouls
    Commented 31/08/2021 às 19:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .