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!

• 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.

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>.

1. Create React App v2.1+ com Typescript: npx create-react-app my-app --template typescript

• Costumávamos recomendar create-react-app-typescript mas agora o seu uso é desencorajado. Consulte as instruções de migração.

1. O guia de Basarat para uma configuração manual de React + TypeScript + Webpack + Babel.

• Em particular, certifique-se de ter instalado @types/react e @types/react-dom .( Leia mais sobre o projeto DefinitelyTyped caso você não esteja familiarizado ).
• Existem também muitos boilerplates de React + Typescript. Por favor consulte nossa lista de recursos.

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

Na versões de TypeScript superiores á 2.7, você pode rodar TypeScript com --allowSyntheticDefaultImports (ou adicionar "allowSyntheticDefaultImports": true na tsconfig) para importar como se faz normalmente em jsx:

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