From 63a14f9233c86555b8ac9b0aa5d98234c8cbed09 Mon Sep 17 00:00:00 2001 From: Vitor Luiz Cavalcanti Date: Sat, 24 Oct 2020 16:28:50 -0300 Subject: [PATCH] =?UTF-8?q?Improve=20"Por=20que=20n=C3=A3o=20usar=20apenas?= =?UTF-8?q?=20PropTypes=3F"=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Content/1-Intro/Intro.md | 60 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/Content/1-Intro/Intro.md b/Content/1-Intro/Intro.md index e3dd2e9..9ae7335 100644 --- a/Content/1-Intro/Intro.md +++ b/Content/1-Intro/Intro.md @@ -38,4 +38,62 @@ Outra grande vantagem de usar o Typescript é o aumento da inteligência dentro ### Por que não usar apenas PropTypes? -O PropTypes funciona de uma forma muito mais passiva dentro de um projeto, sendo passível de ser facilmente ignorado, o que não é o caso do Typescript que desfruta de uma série de ferramentas e arquivos de configuração (`tsconfig.json`) para que você faça ele se comportar de uma forma mais ativa impedindo que você dê continuidade à execução ao se deparar com um erro. \ No newline at end of file +Apesar de ser considerado uma alterativa ao TypeScript, o PropTypes é uma biblioteca que só faz a checagem de tipos em _props_ de componentes **React.js**. Isso torna muito difícil a comparação com o TypeScript que, por ser um _superset_ do JavaScript, adiciona recursos a linguagem e conta uma checagem de tipos muito mais poderosa, onde podemos checar das variáveis, aos objetos, funções, classes etc. + +Porém se desconsiderarmos as limitações do PropTypes, existem outras diferenças importantes. Como: +1. O momento em que a checagem de tipos acontece; +2. A severidade com que os erros são tratados; +3. A forma como declaramos os estruturas/esquemas com os tipos; + +O PropTypes faz a checagem de tipos em tempo de execução (quando a aplicação está _rodando_, sendo executada) e os erros são tratados apenas como alertas (_warnings_). Isso torna a checagem de tipos passíva e fácil de ser ignorada pelo desenvolvedor, o que pode resultar em falhas e _bugs_. Enquanto no TypeScript a checagem de tipos acontece em tempo de compilação (quando o código-fonte em TypeScript é compilado para JavaScript) e é possível configurar no `tsconfig.json` o comportamento em caso de erros, se mais permissivo ou menos dependendo do projeto. + +No PropTypes contratos (estruturas/esquemas com os tipos) das _props_ de um componente **React.js** são declarados usando um objeto, que é atribuído a propriedade estática `propTypes` e usa propriedades e métodos exportados pela biblioteca `prop-types`. Esses objetos acabam tendo um impacto na performance e no tamanho da aplicação. Enquanto no TypeScript usamos `type` ou `interface` para declarar os contratos de objetos, e isso também vale para _props_ de componentes **React.js**. Ao compilar para JavaScript esses tipos e interfaces são simplesmente omitidos e não tem impacto na performance ou no tamanho da aplicação. + + + + + + + + + + + + + + +
+PropTypes + +TypeScript +
+ +```js +import PropTypes from 'prop-types'; + +function Button(props) { + // ... +} + +Button.propTypes = { + type: PropTypes.oneOf( + ['button', 'reset', 'submit'] + ).isRequired, + text: PropTypes.string.isRequired +}; +``` + + + +```ts +type Props = { + type: 'button' | 'reset' | 'submit'; + text: string; +}; + +function Button(props: Props) { + // ... +} +``` + +