Os componentes React são funções JavaScript que retornam elementos React. Eles determinam o que será adicionado ao DOM. Assim como as funções, os componentes React podem receber argumentos chamados props, que podem resultar em elementos retornados dinâmicos.
Os adereços podem ser de qualquer tipo de dados, mas o tipo de dados esperado para os componentes pode ser diferente. Por exemplo, o componente A pode esperar um argumento nome com um tipo de dados string , enquanto o componente B pode esperar um argumento idade com um número tipo de dados. C pode esperar um argumento post com um tipo de dados objeto com propriedades como título e data , enquanto D pode esperar um argumento onClick com um tipo de dados Função .
Como especificamos o tipo de dados que nosso componente deve esperar?
Existem muitas maneiras de fazer isso, mas este artigo se concentra em PropTypes e TypeScript. Apesar de terem finalidades semelhantes, esses dois métodos diferem na forma como funcionam. Abordaremos o que são essas ferramentas, entenderemos suas diferenças e, por fim, tentaremos algumas maneiras avançadas de usá-las.
Para obter uma compreensão completa deste artigo, é necessário conhecimento prévio de PropTypes e TypeScript. Você também precisará instalar um ambiente de desenvolvimento integrado (IDE) como o VS Code.
O que são PropTypes?
PropTypes é uma ferramenta de verificação de tipo em tempo de execução para props em aplicativos React. Desde o React 15.5, o utilitário PropTypes está disponível por meio do pacote prop-types . Com PropTypes, você pode definir os tipos de adereços esperados em um componente, como informar se os adereços são obrigatórios ou opcionais. Ao passar um tipo diferente para um componente ou pular uma prop necessária, você receberá um aviso no console JavaScript:
import React from'react'
importar PropTypes de'prop-types' const NotificationCard=({message, type, id})=> { retornar Notificação
} NotificationCard.propTypes={ mensagem: PropTypes.string.isRequired, tipo: PropTypes.oneOf (["erro","aviso","sucesso"]), id: PropTypes.string.isRequired
} exportar NotificationCard padrão
Com os plug-ins React instalados, o IntelliSense mostrará um nome de prop preenchido automaticamente com o tipo de dados esperado para o prop como você digita. Aqui está um exemplo:
O que acontece quando passamos um tipo de dados inesperado? Ou quando não fornecemos um suporte necessário?
O IDE não nos mostra erros ou avisos. Agora vamos tentar executar o código:
A captura de tela do console do navegador mostra um tipo de dados inesperado da propriedade mensagem de passar um tipo de dados errado. Se você passar uma string para mensagem , receberá outro erro indicando que id , uma proposta obrigatória, não foi fornecida.
Observe que PropTypes não fornece avisos em aplicativos de produção; avisos são impressos apenas durante o desenvolvimento. Se um tipo inesperado for recebido durante o uso da versão de produção do seu aplicativo, o console não imprimirá nenhum aviso.
O que é TypeScript?
Usar TypeScript com React permite adicionar tipificações aos seus adereços que serão verificados no momento da compilação . O TypeScript é compilado de volta para o JavaScript porque é isso que o navegador entende.
Antes de usar o TypeScript em seu aplicativo React, pode ser necessário fornecer as dependências e configurações necessárias. Por exemplo, se estiver usando Create React App, você pode seguir esta documentação para adicionar suporte a TypeScript em seu aplicativo existente.
Esta é a interpretação do TypeScript da definição dos PropTypes acima:
import React from'react'
importar PropTypes de'prop-types' tipo Props={ mensagem: string; tipo:"erro"|"aviso"|"sucesso"; id: string;
} const NotificationCard=({message, type, id}: Props)=> { retornar Notificação
} exportar NotificationCard padrão
Com as ferramentas IDE para TypeScript, você obteria avisos instantâneos do IntelliSense em seu IDE ao passar uma proposta inesperada. Vamos testar isso fornecendo o tipo de dados errado; receberemos uma mensagem de aviso:
Quando fornecermos o tipo de dados correto para mensagem , receberemos esta notificação:
Conforme visto acima, o IntelliSense também fornece mais informações sobre o erro para ajudá-lo a resolvê-lo.
Com TypeScript, a execução de npm run build falhará quando houver uma violação de um requisito de props:
Comparando TypeScript e PropTypes
Ambas as ferramentas são usadas para adereços de verificação de tipo. Embora o TypeScript possa parecer a melhor opção agora, escolher um resultará inevitavelmente em uma troca. Aqui estão algumas diferenças importantes a serem consideradas:
1. Verificação do tipo de tempo de execução e tempo de compilação
PropTypes faz a verificação de tipo durante o tempo de execução enquanto o aplicativo está sendo executado no navegador. No entanto, o TypeScript faz a verificação de tipo durante o tempo de compilação, quando o código do TypeScript é compilado para JavaScript. Isso é importante notar porque influencia o modo como as ferramentas podem ser usadas. Aqui estão alguns exemplos:
Dados de uma API:
O TypeScript não pode verificar o tipo de dados provenientes de uma API. A compilação desse código não seria bem-sucedida porque o conteúdo desses dados só pode ser conhecido em tempo de execução. Em contraste, os PropTypes darão avisos se os tipos esperados forem violados.
Pense nos PropTypes como uma ferramenta que faz algo semelhante (não exatamente) a:
...
if (tipo de idade!==número) { console.warn ("Idade deve ter um tipo de dados numérico")
}
...
Independentemente de idade ser codificado ou obtido de uma API, o verificador de tipo ainda é executado. Por outro lado, o TypeScript não chega ao navegador, limitando a verificação de tipo aos dados codificados.
Construindo uma biblioteca de componentes
Se você estiver criando uma biblioteca de componentes, é muito provável que publique o código de produção em um gerenciador de pacotes. No momento da compilação, o TypeScript será convertido em JavaScript. Isso significa que os usuários de sua biblioteca não podem depender de suas definições de tipo TypeScript para adereços, reiterando a relevância dos PropTypes. PropTypes é um código JavaScript normal, o que significa que as validações também serão possíveis quando sua biblioteca estiver sendo usada.
2. Sintaxe e destaque semântico
Ambas as ferramentas possuem plug-ins que fornecem autocompletar com informações sobre os adereços dos componentes. No entanto, as ferramentas de destaque do TypeScript superam os PropTypes ’. Você encontrará vários recursos nas ferramentas do IDE do TypeScript, como VS Code, WebStorm e Atom. O TypeScript destaca seus componentes de maneira adequada quando os tipos de dados dos adereços esperados não são fornecidos e fornece insights sobre a solução.
3. Recursos avançados em TypeScript
Existem muitas maneiras de especificar tipos para seus adereços no TypeScript que os PropTypes podem não ser capazes de fornecer. Por exemplo, o TypeScript permite combinar interfaces com tipos e realizar verificação de tipo condicional, como declarar que se a propriedade A for verdadeira, a propriedade C também deve ser fornecida.
Aqui está um exemplo de uso avançado de TypeScript:
import React from"react";
importar PropTypes de"prop-types";
tipo Props= | { tipo:"erro"; mensagem:""; } | { tipo:"sucesso"; };
Const NotificationCard=(props: Props)=> { return Notificação ;
};
exportar NotificationCard padrão;
No trecho de código acima, se tipo for erro , então uma propriedade mensagem também é necessária. Mas se for sucesso , então não precisamos especificar outra propriedade.
Este é o aviso que recebemos quando temos um tipo de erro sem fornecer a propriedade mensagem :
Observe que o primeiro NotificationCard sem uma propriedade message fornece o aviso, mas o segundo uso de NotificationCard não.
Desfrutando do melhor dos dois mundos
Como afirmei anteriormente, fazer uma escolha entre Type Script e PropTypes exigirá uma troca. Você deseja manter os recursos do TypeScript, como destaque de sintaxe, usando PropTypes? Ou você prefere renunciar à verificação de tipo em tempo de execução?
Suas escolhas serão influenciadas pela forma como seu aplicativo é usado. Por exemplo, se você estiver criando seu aplicativo como uma biblioteca que será usada por muitas pessoas, a verificação de tipo em tempo de execução é de grande importância.
No entanto, você pode não precisar sacrificar nenhum recurso-há maneiras de aproveitar a verificação de tipo em tempo de execução e em tempo de compilação.
Primeiro, você pode escolher escrever definições de tipo e definições de PropTypes para seu aplicativo. Isso será árduo a longo prazo, quando você tiver que escrever ambas as definições para cada componente em seu aplicativo. Vamos revisar duas maneiras pelas quais você pode escrever um e gerar automaticamente o outro.
1. InferProps
InferPropTypes de @ types/prop-types pode ser usado para criar definições de tipo a partir de definições de PropTypes. Aqui está um exemplo:
import React from"react";
importar PropTypes, {InferProps} de"prop-types"; const BlogCardPropTypes={ título: PropTypes.string.isRequired, createdAt: PropTypes.instanceOf (Date), authorName: PropTypes.string.isRequired,
}; tipo BlogCardTypes=InferProps ;
const BlogCard=({authorName, createdAt, title}: BlogCardTypes)=> { devolver Blog Card ;
}; BlogCard.propTypes=BlogCardPropTypes; exportar BlogCard padrão;
Aqui está o que temos quando destacamos o componente:
O componente agora tem uma definição PropTypes e também fornece erros quando os tipos TypeScript são violados. Como visto, ele diz que está faltando Property'authorName', mas não diz que createdAt está faltando porque não adicionamos um isRequired para essa propriedade no objeto BlogCardPropTypes .
2. babel-plugin-typescript-to-proptypes
Você pode gerar PropTypes a partir de definições de tipo TypeScript usando babel-plugin-typescript-to-proptypes . Quando você especifica tipos para seus adereços, o plug-in converte essas definições de tipo em definições de PropTypes.
Por exemplo, o seguinte código:
import React from"react";
tipo Props={ título: string; createdAt: Date; authorName: string;
};
const BlogCard=({title, createdAt, authorName}: Props)=> { devolver o cartão do Blog ;
};
exportar BlogCard padrão;
funcionará como se estivesse escrito assim:
import React from'react'
importar PropTypes de'prop-types' const BlogCard=({title, createdAt, authorName})=> { devolver o cartão do Blog ;
}; BlogCard.propTypes={ título: PropTypes.string.isRequired, createdAt: PropTypes.instanceOf (Date), authorName: PropTypes.string.isRequired,
} exportar BlogCard padrão
Ele será compilado de acordo, dando ao seu aplicativo React poderes de verificação de tipo durante o tempo de execução.
Conclusão
Existem muitos equívocos em torno de PropTypes e TypeScript. Alguns dirão que um é importante, mas o outro não. Para mim, os dois são importantes, mas darei mais prioridade ao TypeScript se não estiver criando uma ferramenta que será usada por outras pessoas.
Neste artigo, vimos o que são PropTypes e TypeScript, sua relevância nos aplicativos React, suas diferenças e maneiras de usá-los juntos.
Para continuar lendo, verifique este guia extenso em React PropTypes .
A postagem Comparando TypeScript e PropTypes em aplicativos React apareceu primeiro no LogRocket Blog .
