👩🏼‍💼 🧛 🚥 逐步将TypeScript引入您的React项目 👨🏿‍🚀 ⚡️ 🖐🏽

哈Ha！

最近，在前端领域，React + TypeScript的组合变得特别流行。因此，从JavaScript到TypeScript的有效迁移的相关性正在增加，最好是在短时间内。今天，我们想与您讨论这个话题。

如何安全地构建React TypeScript组件并将其注入到React JS项目中。

为什么需要从JS迁移到TS？可能有很多原因，但这不是重点。（假设的）事实是这样的：您需要开始使用TypeScript，并且需要一种简单的方法在项目中实现它。而且，所有这些都需要以某种方式完成，而不会违反所有可用代码的结构，并说服团队进行此类转换。

在这里，我们将演示一个逐步重构：如何将React组件嵌入另一个代码库，然后使用Bit安全地将它们输入到现有的React JavaScript应用程序中。

使用Bit将TS组件安全地嵌入到JS项目中

有许多方法可以从React JS升级到React TS。本文的实质是说明如何逐步完成此操作。在其他情况下也可以使用类似的方法。
基本思想是利用Bit充分利用React +组件，以在自己的Bit开发环境中将它们彼此隔离。在一起，这使您可以组装TS组件并将其安全地注入功能齐全的React JS应用程序中。

位是用于从Git存储库中提取组件的开源工具。Bit允许您在用JS编写的项目之外构建TS组件，为每个独立的隔离开发环境分配资源，该环境可以在其他项目中工作，而不论其配置如何。然后，您只需将这些组件版本化并“位导入”到您的JS项目中，它们就会起作用。

除了Bit之外，还有Bit.dev，它是一个远程中心，您可以在其中存储这些组件，然后再使用它们。我们将TS组件保留在Bit.dev中，然后从那里开始将它们引入我们的React JS项目中。

示例：在bit.dev中搜索React共享组件

使用范例

出于本文的目的，我们将分析一个示例，该示例在前端世界中可以与经典的“ hello world”相媲美：我们将讨论一个用于规划案例的应用程序。

不用担心，我不会告诉您如何为React编写这样的应用程序。我想您已经知道如何执行此操作，并且说实话，该主题还很新，因此请驳回。

但我将以该应用程序为例-您可以正确地分叉它，或者至少打开一个链接并查看其所有代码。

github.com/deleteman/react-todo-demo

该代码库包含以下组件：

TodoList：这是主要组成部分，使用通常的按钮以文本输入字段的形式显示。在发送完所有内容后，所有内容均以表格形式发送，并将文本添加到主应用程序支持的列表中。该组件的代码非常简单：

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：一个非常简单的列表组件，用于显示通过上一个组件添加的项目的内部列表。每个元素都是可单击的，并且在单击之后将其从列表中删除。代码也很简单：

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

在这两种情况下，相应的方法都被接受为来自应用程序主要组件的属性（道具）。此处提供了此组件的完整代码。

我同意这个应用程序非常简单，但是我再次强调，您可能正在使用任何当前正在使用的React应用程序-突然您得到了开始迁移到TypeScript的任务。该怎么办？

选项＃1：擦干眼泪后，您便开始重写源代码的整个基础。
选项＃2：将所有.js文件重命名为.ts，在组装过程中配置必要的步骤，然后洗手。
选项3：您认为现在是时候逐步迁移所有旧代码，并直接在TypeScript上编写所有新代码了。

我想更详细地讨论选项3，但是，原则上，我不会拒绝您，在同一应用程序中，您可以共存用纯JavaScript和TypeScript编写的组件。

输入打字稿

因此，作为示例，假设我们的任务是向待办事项列表中的每个组件添加一个切换按钮。单击一个项目后，必须在后台将其切换。

没什么超自然的，但是如您所记得，在这种情况下，我们对过程感兴趣，而不是对代码感兴趣。

因此，我们不会尝试将TypeScript添加到您的自定义项目中，以免将您现有的程序集意外地破坏成几天，而是使用纯TypeScript创建一个全新的项目：

$ npx create-react-app ts-components --template typescript

请注意：要使用npx，您仅需要新版本的NPM，并且它包含在5.2.0及更高版本的安装过程中。

和以前一样，在这种情况下，为项目创建了一个模板，但是这次我们使用TypeScript作为基本语言。

另外，它是一个简单的开关组件，适合插入另一个项目，而无需引入其他依赖项。如果您对如何执行此操作感到好奇，请阅读下一篇有关如何编写可重用组件的文章。

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

现在已经编写了该组件，您可以使用Bit（这是一个用于版本化和发布单个组件的开源工具）提取该特定组件并共享它，以便以后可以从基于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

因此，您可以配置项目并在其中配置新的Toggle组件（开关），以便可以与其他项目共享。但是，在实际操作中，您需要登录到Bit.dev（这是一个组件中心-一个带有注册表和文档的网站，该网站补充了Bit作为发布和预览组件的平台）。

登录后，只需创建一个名为“ toggler”的新集合，将其公开，然后在终端窗口中运行以下命令：

$ bit export user-name.toggler

如果“用户名”确实是您的用户名，那么该组件将作为结果导出，您可以在Bit.dev上看到它。它看起来应该像这样：

注意，默认情况下，程序如何创建一个示例文件index.js来测试组件。同时，默认情况下写入此文件的内容可能并不理想，因此该平台可以轻松地向其中添加其他代码，以便其他人可以了解如何在其代码中使用您的公共组件。

例如，在这里我更新了示例文件，添加了有关如何使用Toggler组件的说明（完成后，请记住要单击“保存”按钮！）：

现在让我们看一下如何将这个新组件导入到您自己的基于JS的React应用程序中。

导入外部组件

由于我们添加了编译器，Bit负责在JavaScript中编译您的TypeScript代码。这解决了我们所有的问题，剩下的就是将这个组件作为依赖项添加到您的项目中。

出于所有目的，我在这里使用了Yarn，但是您可以成功使用NPM，这是您所需的全部：

$ yarn add @bit/your-username.your-collection.your-component

就我而言，这段代码变成了：

$ yarn add @bit/deleteman.toggler.toggle

请注意：如果不登录，将无法安装组件（还记得$ bit login本指南中有关该部分的内容吗？）。如果您想从Bit注册表中安装组件，则需要手动配置注册表，如下所示：

$ npm config set '@bit:registry' https://node.bit.dev

因此，您的TypeScript组件（已经用JavaScript编译）将包含在项目中，并且您可以如下引用其代码的该组件：

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

请注意第2行，在这里导入要用作return语句一部分的外部组件。没什么复杂的，您的项目或其他任何地方都不需要其他配置更改。
恭喜，现在您有一个同时使用TypeScript和JavaScript的工作项目，您有可能这样做，以至于您根本不会注意到它！
如上所述，完整的项目代码已发布在GitHub上！

结论

如果您有兴趣迁移到TypeScript，或者只是想尝试一下它，看看它是如何工作的，那么这是将语言逐步引入现有项目中的便捷方式，而无需冒着降低整个汇编过程的风险。

注意Bit并查看Bit.dev，同时查找其他用JavaScript和TypeScript编写的组件，以了解其他人如何编写它们！

逐步将TypeScript引入您的React项目

使用Bit将TS组件安全地嵌入到JS项目中

使用范例

输入打字稿

导入外部组件

结论

More articles: