Comecei a usar oTypeScriptcomReacte,deposis de um tempo,aprendendo e usando eles juntos.assim que me sinto:
Eu não podia acreditar o quanto meu DX melhorou.Vou deixar para vocês os principais recursos de que mais gosto,então espero que vocês se sintam animados para dar uma chance😃!

Isen ção de responsabilidade 회사⚠️

Esta nãoéuma Introductãao TypeScript para iniciates,vocêprecisa saber pelo menos como usarInterfaces,no entanto,no final do artigo,vou apresentar uma lista de excelentes recursos que achei muitoúteis.A maneira mais rápida de obter o React+TypeScript instalado e functionandoé:

$ npx create-react-app my-app --template typescript

# ou

$ yarn create react-app my-app --template typescript

너무 길어서 읽을 수가 없어요.

Prós:

Preenchimento de código e validaço detipocomdefinições de tipo.

Ótima comunidade recursos de aprendizagem.

반대:

sintaxe do TypeScript e conceitos comoGenericspodem ser difíceis de entender.

Índice

지능형 감지

Declaraões de tipo

Validaão de tipo

칸조스

쌍방이 너의 균형을 깨뜨릴 때⚖️

귀속

결론

지능 감지

Euuso oVSCodee um de seus melhores recursos é oIntelliSense(일명 코드 완성),o TypeScript tira proveito disso.Digamos que temos um componenteListe declaramos a InterfaceProps,neste caso um proplabels,um array de strings:

// List.tsx
import React from 'react';

interface Props {
  labels: string[]
}

// Dizemos ao TypeScript o tipo de parâmetro
// + Object Destructuring 👇
function List({ labels }: Props): React.Element {
  return (
    <ul>
      { labels.map((label, index) => {
        <li key={index}>{label}</li>
      )}
    </ul>
  );
}

const strings = ['React', 'TypeScript', '❤️'];
<List labels={strings}/>

Com isso nós temos:

Sedigitarmoslabels.dentro deList,obtemos oautocompletarcom métodos e atributos deArray.prototype,neste casoArray.prototype.forEach ()e,em seguida,dentro da funãocallback,obtemos todos métodos e atributosString.prototype,neste exemploArray.prototype.toUpperCase ().
O VSCodeéescrito em TypeScript,possui definiçes de tipo integradas para Native Objects e a melhor parte?Podemos declarar nossos próprios tipos,e a maioria das bibliotecas que usamos jávem com seus próprios arquivos de definião de tipo😃!
O que nos leva ao próximo grande recurso.

티보 정의

A comunidade TypeScriptéincrível,eles criaram um enrome repositório centralizado de arquivos de definiões de tipo de alta qualidade:
https://github.com/DefinitelyTyped/DefinitelyTyped
A maioria das bibliotecas mantém seus arquivos de declaraço de tipo neste repositório,eás vezes temos que instalá-los de forma independente,nosite oficialpodemos pesquisar e encontar instruçes para instalá-los,no caso do React,por examplo:

$ yarn add @types/react --save-dev

코모 보드모스 우사로스?

import React from 'react';

interface Props {
  labels: string[]
}

function List({ labels }: Props): React.Element {
  const styles: React: React.CSSProperties = {
    backgroundColor: 'blue'
  }
  // ...
}

Digamos que queremos escrever algum CSS embutido,neste caso podemos usar a definião de tipo embutida do ReactReact.CSSProperties,ela nos mostraráum erro se Escrewmos um erro de digitaãobackgroundKolore obteremos o preenchimento de código para as propriedades😁.
E também podemos ver ocódigo-fontepara nos acostumarmos a ler E escrever tipos.
Jáaprendemos como tirar proveito das definições de tipo para obter o preenchimento de código,mas agora aprenderemos outro recurso poderoso que vem com eles.

Valida de tipo

E se não passarmos no tipo de prop correto ou se não passarmos nada?

interface Props {
  labels: string[]
}

function List({ labels }: Props) {
 // ...
}

const strings = ['React', 'TypeScript', '❤️'];
const numbers: number[] = [1, 2, 3];

// 1) Passamos um array de números
<List labels={numbers} />
// 2) Não passamos nada
<List />

Em ambos os casos,obtemos um Erro🚫:

Esses erros são claros,eles nos dizem o queétype error,onde issodeclarationfoi feito,se a propérealmente necessária,e isso se aplica tambémás funões(embora os components do React sejam apenas funões😉).
O compileador TypeScript nãO ficaráfeliz atéque passemos par–metros corretos,issoútil para ver possíveis bugsáfrente,mesmo antes de compilear O código e verificiar O navegador.
E como fica oprop-types?
Sim,podemos obter a mesma validação usandoprop-types:

import React from 'react';
import PropTypes from 'prop-types';

function List({ labels }) {
  // ...
}

List.propTypes = {
  labels: PropTypes.arrayOf(PropTypes.string).isRequired
}

No entanto,comoprop-typesverifica nosso código durante a execuão,temos que compileá-lo primeiro,ver o erro real No console e e,também,essa validaão sóacontece No modo de desenvolvimento😟, enquanto o o TypeScript analisa nosso código estaticamente.

연결

Quando se trata deReact Hooks,useStatepor exemplo,o TypeScript pode ser muitoútil,specialmente com validaões de tipo.

function Counter() {
  // usamos a sintaxe <> para declarar o tipo
  const [counter, setCounter] = useState<number>(0);
  const add = () => {
    // isso irá retornar um erro 😱
    setCounter('string');
  }
  return(
    <div>
      <button onClick={add}>+</button>
      {counter}
    </div>
  );
}

Dessa forma,garantimos que sempre que atualizamos ostate,o tipo de valor serácorreto,isso pode nos poupar horas de depuraço e dores de cabeça.

쌍방의 폐허와 같다.🤐 헤아리다

Aprendemos como o TypeScript pode congiiar toda a equipe quando se trata de escrever components,vamos imaginar que escrevemos nossa(idealmente)libraioteca de components reutilizáveiscom tipos bem definidos e nosso colega importa um deles,eles verão de antemão:

Tipos de props e se são necesários ou não.

Autocompletar do código para nomes de prop.

Isso pode nos poupar tempo ao navegar pelo código fonte para garantir que passamos dados corretos para cada component.
Mas também sabemos que em Desenvolvimento de Software não existe bala de prata.Cada ferramenta que escolhemos vem com uma compensaão,no caso do TypeScript,éclaro que existem algumas:

Ler TypeScript pode ser difícil：

interface Array<T> {
  concat(...items: Array<T[] | T>): T[];
  reduce<U>(
    callback: (state: U, element: T, index: number, array: T[]) => U,
    firstState?: U
  ): U;
  // ···
}

Mas nãse preocupe,eu peguei este trecho desteótimo artigoque explica todos os detalhes,aquele exemplo foi realmente confuso para mim no início.

Alguns conceitos podem ser Complaados de entender：

커넥터

Genéricos

인터페이스 및 Tipos

Esses novos conceitos(특히 se os membros de nossa equipe n ão est ão acostumados com eles)podem trazer mais d ú vidas e confus ão.
Claro que podemos enfrentálos,depende apenas da experiência dos membros da nossa equipe,do tempo disponívele do desejo de aprender coisas novas.
Este artigo reflete a ideia que venho pensando háalgum tempo eéprovável que seja o meu próximo tópico de postagemeverything in Software Development is a trade-off.

차례로 돌아가다

Estes são os melhores recursos que me ajudaram a entender e amar o TypeScript:

Understanding TypeScript’s type notation

https://github.com/typescript-cheatsheets/react

TypeScript Tutorial for JS Programmers Who Know How to Build a Todo App

TypeScript Generics for People Who Gave Up on Understanding Generics

결론

O TypeScript vem com muitos benefícios e restriões,mas nosso contexto(equipe,prioridades,objetivos)pode definir se podemos obter mais vantagens do que desvantagens e tornar nossas vidas mais fáceis!
Quando se trata de aplicativos de grande escala,e specialmente se estivermos construindo uma arquiteturaáprova de balas ou Design de Sistema,o esforço compensa,podemos escrever código menos sujeito a bugs e fornecer recursos mais rápidos e seguros.
Obrigado pela leitura,se vocêachou este artigoútil,siga me no e me diga o que vocêachou!
보아 카온!