Olá Habr!Recentemente, no campo do front-end, a combinação do React + TypeScript se tornou especialmente popular. Consequentemente, a relevância da migração competente de JavaScript para TypeScript está aumentando, de preferência em pouco tempo. Hoje gostaríamos de discutir este tópico com você.
Como criar e injetar com segurança componentes do React TypeScript no seu projeto React JS.Por que você pode precisar migrar de JS para TS? Pode haver muitas razões para isso, mas esse não é o ponto. O fato (hipotético) é este: você precisa começar a usar o TypeScript e precisa de uma maneira fácil de implementá-lo em seu projeto. Além disso, tudo isso precisa ser feito de alguma forma, sem violar a estrutura de todo o código disponível e convencer a equipe da necessidade dessa transição.Aqui, demonstraremos uma refatoração passo a passo: como incorporar componentes do React em outra base de código e, em seguida, usar o Bit para inseri-los com segurança em um aplicativo React JavaScript em funcionamento .Incorporar componentes TS com segurança em um projeto JS usando Bit
Há muitas maneiras de atualizar do React JS para o React TS. A essência deste artigo é mostrar como isso é feito progressivamente. Um método semelhante é aplicável em outros casos.A idéia básica é aproveitar ao máximo seus componentes do React + com o Bit para isolá-los um do outro em seu próprio ambiente de desenvolvimento de bits. Juntos, isso permite montar componentes TS e injetá-los com segurança em um aplicativo React JS totalmente funcional.MordeuÉ uma ferramenta de código aberto para extrair componentes dos repositórios Git. O Bit permite criar componentes TS fora de um projeto escrito em JS, alocando para cada ambiente de desenvolvimento isolado e independente, que pode funcionar em outros projetos, independentemente de suas configurações. Em seguida, você pode simplesmente versão e "bit-import" esses componentes em seu projeto JS e eles funcionarão.Juntamente com o Bit, existe o Bit.dev , um hub remoto onde você pode armazenar esses componentes e reutilizá-los. Manteremos os componentes TS no Bit.dev e, a partir daí, começaremos a apresentá-los ao nosso projeto React JS.
Exemplo: procurando React componentes compartilhados no bit.devExemplo de uso
Para os fins deste artigo, analisaremos um exemplo que no mundo front-end é comparável ao clássico "olá mundo": falaremos sobre um aplicativo para planejar casos.Não se preocupe, não vou lhe dizer como escrever um aplicativo desse tipo para o React. Suponho que você já saiba como fazer isso e, para ser sincero, o assunto está longe de ser novo, então descarte.Mas usarei este aplicativo como exemplo - você pode bifurcá-lo por direito, ou pelo menos abrir um link e ver todo o seu código.
github.com/deleteman/react-todo-demoEssa base de código consiste nos seguintes componentes:TodoList: Este é o componente principal exibido na forma de um campo de entrada de texto com o botão usual. Tudo está no formulário, após o envio do qual o texto é adicionado à lista suportada pelo aplicativo principal. O código para este componente é muito simples:import React, { Component } from 'react'
class TodoList extends Component {
render() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.props.addItem}>
<input placeholder="Task"
ref={this.props.inputElement}
value={this.props.currentItem.text}
onChange={this.props.handleInput}
/>
<button type="submit"> Add Task </button>
</form>
</div>
</div>
)
}
}
export default TodoList
TodoItems : Um componente de lista muito simples usado para exibir uma lista interna de itens adicionados através do componente anterior. Cada um dos elementos é clicável e, após clicar nele, é removido da lista. O código também é bastante simples:import React, { Component } from 'react'
class TodoItems extends Component {
createTasks(item) {
return <li key={item.key} onClick={() => this.props.deleteItem(item.key)}>{item.text}</li>
}
render() {
const todoEntries = this.props.entries || []
const listItems = todoEntries.map(this.createTasks.bind(this))
return <ul className="theList">{listItems}</ul>
}
}
export default TodoItems
Nos dois casos, os métodos correspondentes são aceitos como propriedades (adereços) do componente principal do aplicativo. O código completo para este componente é fornecido aqui.Concordo que este aplicativo é muito simples, mas, enfatizo mais uma vez, pode haver qualquer aplicativo React no qual você esteja trabalhando no momento - e, de repente, você recebe a tarefa de começar a migrar para o TypeScript. O que fazer?- Opção 1: Depois de enxugar as lágrimas, você começa a reescrever toda a base do código-fonte.
- Opção 2: renomeie todos os seus arquivos .js para .ts, configure as etapas necessárias no processo de montagem e lave as mãos.
- Opção 3: você decide que é hora de migrar gradualmente todo o código antigo e gravar todo o novo código diretamente no TypeScript.
Quero discutir a opção 3 com mais detalhes, mas, em princípio, não recuso que, no mesmo aplicativo, você possa coexistir componentes escritos em JavaScript puro e TypeScript.Digite TypeScript
Portanto, como exemplo, suponha que tenhamos a tarefa de adicionar um botão de alternância a cada componente em nossa lista de tarefas. Depois de clicar em um item, ele deve ser alternado em segundo plano.Nada sobrenatural, mas como você se lembra, neste caso, estamos interessados no processo, não no código como tal.Portanto, não tentaremos adicionar o TypeScript ao seu projeto personalizado, para não quebrar acidentalmente sua montagem existente em vários dias, mas criar um projeto completamente novo usando o TypeScript puro:$ npx create-react-app ts-components --template typescript
Observe: para usar o npx, você só precisa da nova versão do NPM, e ela está incluída no processo de instalação na versão 5.2.0 e superior.Assim como antes, nesse caso, um modelo é criado para o projeto, mas desta vez usamos o TypeScript como a linguagem base.Além disso, um componente de chave simples, adequado para inserção em outro projeto, sem a introdução de dependências adicionais. Se você estiver curioso sobre como fazer isso, leia o próximo artigo sobre como escrever componentes reutilizáveis .import React, {useState} from 'react';
interface IActionProps {
action: (status:boolean) => void,
buttonText?: string
}
const Toggle = ({action, buttonText="Toggle"}: IActionProps) => {
const [isSelected, setSelected] = useState(false)
return (
<button onClick={() => {
setSelected(!isSelected)
action(isSelected)
}} >{buttonText}</button>
)
}
export default Toggle
Agora que esse componente foi gravado, você pode usar o Bit (esta é uma ferramenta de código aberto para criar versões e publicar componentes individuais) para extrair esse componente específico e compartilhá-lo, para que você possa importá-lo posteriormente do nosso projeto baseado em JavaScript.// Bit
$ yarn global add bit-bin
$ bit init --package-manager yarn// ( , bit.dev)
$ bit login//
$ bit add src/components/Toggle.tsx // ( env)
$ bit import bit.envs/compilers/react-typescript --compiler//
$ bit tag –all
Portanto, você configura seu projeto e o novo componente Toggle (switch) para que ele possa ser compartilhado com outros projetos. Mas, antes que você possa fazer isso na prática, é necessário fazer login no Bit.dev (este é um hub de componentes - um site com um registro e documentação que complementa o Bit como uma plataforma para publicar e visualizar componentes).Uma vez logado, basta criar uma nova coleção chamada "toggler", torná-la pública e, em seguida, execute o seguinte comando na janela do terminal:$ bit export user-name.toggler
Se "user-name" for realmente o seu nome de usuário, o componente será exportado como resultado e você poderá vê-lo no Bit.dev. Deve ser algo como isto:
Observe como, por padrão, o programa cria um arquivo de amostra index.jspara testar o componente. Ao mesmo tempo, o conteúdo gravado nesse arquivo por padrão pode não ser o ideal, portanto a plataforma facilita a adição de código adicional a ele, para que outras pessoas entendam como usar seu componente público em seu código.Por exemplo, aqui atualizei meu arquivo de amostra, adicionando explicações sobre como usar o componente Toggler (lembre-se de clicar no botão "Salvar" quando terminar!):
Agora, vamos dar uma olhada em como importar esse novo componente para seu próprio aplicativo React baseado em JS.Importar um componente externo
Bit cuida da compilação do seu código TypeScript em JavaScript, graças ao compilador que adicionamos. Isso resolve todos os nossos problemas, e tudo o que resta para nós é adicionar esse componente ao seu projeto como uma dependência.Para todos os fins, usei o Yarn aqui, mas você pode usar o NPM com o mesmo sucesso, tudo o que você precisa para isso:$ yarn add @bit/your-username.your-collection.your-component
No meu caso, esse código se transforma em:$ yarn add @bit/deleteman.toggler.toggle
Observe: você não poderá instalar componentes sem fazer login (lembra da parte $ bit logindeste guia?). Se você deseja instalar componentes do registro Bit, precisará configurar o registro manualmente, desta forma:$ npm config set '@bit:registry' https://node.bit.dev
Portanto, seu componente TypeScript (já compilado em JavaScript) será incluído no projeto e você poderá consultar esse componente do código da seguinte maneira:import React, { Component, useState } from 'react'
import Toggle from '@bit/deleteman.toggler.toggle';
const TodoItem = ({text, itemKey}) => {
const [iClass, setIClass] = useState("white")
const toggleBackground = status => {
setIClass(status ? "white" : "black")
}
const toggleProps = {
action: toggleBackground,
buttonText: "Select"
}
return <li className={iClass} key={itemKey} >{text}<Toggle {...toggleProps}/></li>
}
export default TodoItem
Preste atenção na linha 2, onde importo o componente externo que pretendo usar como parte da declaração de retorno. Nada complicado, nenhuma alteração adicional na configuração é necessária no seu projeto ou em qualquer outro lugar.Parabéns, agora que você tem um projeto funcional que usa TypeScript e JavaScript, você pode fazer isso potencialmente para nem perceber!Como mencionei acima, o código completo do projeto é publicado no GitHub !Conclusão
Se você estiver interessado na migração TypeScript, ou se quiser apenas experimentar e ver como ela funciona, é assim que é conveniente introduzir gradualmente a linguagem em um projeto existente, sem correr o risco de interromper todo o processo de montagem.Preste atenção ao Bit e consulte Bit.dev, encontre outros componentes escritos em JavaScript e TypeScript ao mesmo tempo para entender como os outros os escrevem!