React+TypeScript Cheatsheets em Português

Cheatsheets para desenvolvedores com experiência em React que estão iniciando com TypeScript

Web docs | 中文翻译 | Español | Contribute! | Ask!

Todas as dicas de React + TypeScript

• Cheatsheet Básico (/README.md) é focado em ajudar desenvolvedores React a começar a usar TS com React apps
  • Foco nas melhores práticas com exemplos para copiar e colar.
  • Explica alguns tipos básicos de uso de TS e configuração ao longo do caminho.
  • Responde às perguntas mais frequentes.
  • Não cobre a lógica de tipo genérico em detalhes. Em vez disso, preferimos ensinar técnicas de solução de problemas simples para iniciantes.
  • O objetivo é se familiarizar com TS sem precisar aprender muito sobre TS.
• Cheatsheet Avançado (/AVANÇADO.md) ajuda a mostrar e explicar o uso avançado de tipos genéricos para pessoas que escrevem utilitários/funções/props de renderização/componentes de ordem superior (HOCs) reutilizáveis ​​e bibliotecas TS+React.
  • Possui dicas e truques diversos para usuários profissionais.
  • Conselhos para contribuir com DefinitelyTyped.
  • O Objetivo é tirar total vantagem sobre o TypeScript.
• Cheatsheet de migração (/MIGRANDO.md) ajuda a reunir conselhos para a migração incremental de grandes bases de código de JS ou Flow, de pessoas que já fizeram isso.
  • Nós não tentamos convencer as pessoas a mudar, apenas ajudar as pessoas que já decidiram isso.
  • âš ï¸? Esta é uma nova cheatsheet, toda ajuda é bem-vinda.
• Cheatsheet de HOCs (/HOC.md) especificamente ensina as pessoas a escrever HOCs com a ajuda de exemplos.
  • Familiaridade com Genéricos é necessário.
  • âš ï¸? Esta é uma nova cheatsheet, toda a assistência é bem-vinda.

Tabela de conteúdos da Cheatsheet básica

Seção 1: Configuração

Pré-requisitos

1. Uma boa compreensão de React.
2. Familiaridade com os tipos básicos de TypeScript ( O guia de 2ality é de grande ajuda. Se você é completamente novato em TypeScript, dê uma olhada no tutorial de chibicode ).
3. Ter lido a seção de TypeScript na documentação oficial do React.
4. Ter lido a seção do React do novo playground de TypeScript ( Opcional: também acompanhar os mais de 40 exemplos na seção de exemplos do playground ).

Este guia sempre assumirá que você está usando a última versão de Typescript. Notas para versões mais antigas usarão a etiqueta <details>.

Ferramentas iniciais de React + TypeScript

Configurações na nuvem:

• Playground do TypeScript com React apenas se você estiver depurando tipos (e relatando problemas), não para executar código.
• CodeSandbox - IDE na nuvem, inicializa super rápido.
• Stackblitz - IDE na nuvem, inicializa super rápido.

Configurações de desenvolvimento local:

• Next.js: npx create-next-app -e with-typescript irá criar no seu diretório atual.
• Create React App: npx create-react-app name-of-app --template typescript irá criar em um novo diretório.
• Meteor: meteor create --typescript name-of-my-new-typescript-app
• Ignite para React Native: ignite new myapp
• TSDX: npx tsdx create mylib para Creating React+TS libraries

Import React

import * as React from 'react';
import * as ReactDOM from 'react-dom';

Este é o caminho mais seguro no futuro para importar React. Se você definir --allowSyntheticDefaultImports (ou adicionar "allowSyntheticDefaultImports": true) em seu tsconfig.json, você poderá importar como se faz normalmente em jsx:

import React from 'react';
import ReactDOM from 'react-dom';

Seção 2: Primeiros Passos

Componente de Função

Podem ser escritos como funções normais que recebem props como argumento e retornam um elemento JSX.

type AppProps = { message: string }; /* também se pode usar uma interface */
const App = ({ message }: AppProps) => <div>{message}</div>;

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title,
}) => <div title={title}>{children}</div>;

type Props = { foo: string };

// OK agora mas futuramente causará erro
const FunctionComponent: React.FunctionComponent<Props> = ({
  foo,
  children,
}: Props) => {
  return (
    <div>
      {foo} {children}
    </div>
  ); // OK
};

// OK agora mas futuramente se tornará obsoleto
const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({
  foo,
  children,
}) => {
  return (
    <div>
      {foo}
      {children}
    </div>
  );
};

const MyConditionalComponent = ({ shouldRender = false }) =>
  shouldRender ? <div /> : false; // tampouco faça isso em JS
const el = <MyConditionalComponent />; // gera um erro

const MyArrayComponent = () => Array(5).fill(<div />);
const el2 = <MyArrayComponent />; // gera um erro

const MyArrayComponent = () => (Array(5).fill(<div />) as any) as JSX.Element;

Hooks