文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

神器,快速将JavaScript迁移到TypeScript!

2024-11-30 15:00

关注

如今,越来越多的项目将 JavaScript 代码迁移到 TypeScript,TS 是一种静态类型语言,能够提高项目的可读性、可维护性和健壮性。然而,大规模迁移是一项复杂的任务,从 JavaScript 迁移到 TypeScript 有两种选择:

(1)混合迁移: 逐个文件迁移,修复类型错误,然后重复,直到迁移完整项目。allowJS 配置选项允许 TypeScript 和 JavaScript文件同时存于项目中,这使得这种方法成为可能!在混合迁移策略中,不必暂停开发,可以逐个文件逐步迁移。虽然,在大规模项目上,这个过程可能需要很长时间。

(2) 整体迁移: 将 JavaScript 或部分 TypeScript 项目并将其完全转换。需要添加一些 any类型和@ts-ignore注释,以便项目编译无误,但随着时间的推移,可以用更具描述性的类型替换它们。这种策略的优势如下:

看起来整体迁移在这里更胜一筹。但是,对大型成熟代码库执行全面迁移的过程是一个复杂的问题。为此,Airbnb 开源了一个工具帮助将代码迁移到 TypeScript 的工具:ts-migrate:

ts-migrate 接受一个 JavaScript 或部分 TypeScript 项目,并给出一个编译 TypeScript 项目,下面就来看看这个工具是如何使用的!

概述

ts-migrate 分为 3 个包:

这样就能够将转换逻辑与核心运行器分开,并为不同的目的创建多个配置。目前有两个主要配置:migration 和 reignore。虽然迁移配置的目标是从 JavaScript 迁移到 TypeScript,但 reignore 的目的是通过简单地忽略所有错误使项目可编译。当代码库很大并且正在执行以下任务时,Reignore 很有用:

这样,即使有一些不想立即处理的错误,也可以迁移项目。它使 TypeScript 或库的更新变得更加容易。

这两个配置都在 ts-migrate-server 上运行,它由两部分组成:

interface MigrateParams {
  rootDir: string;          // 根目录的路径  
  config: MigrateConfig;    // 迁移配置,包括插件列表
  server: TSServer;         // TSServer 分支的一个实例
}

它会执行以下操作:

  1. 解析 tsconfig.json。
  2. 创建 .ts 文件。
  3. 将每个文件发送到 TypeScript 语言服务器进行诊断。编译器提供了三种类型的诊断:semanticDiagnostics、syntacticDiagnostics 和 suggestionDiagnostics。使用这些诊断来查找源代码中有问题的地方。基于唯一的诊断代码和行号,可以识别问题的潜在类型并应用必要的代码修改。
  4. 在每个文件上运行所有插件。如果文本因插件执行而改变,更新原始文件的内容并通知 TypeScript 语言服务器文件已更改。

通用插件

plugin 都会放在ts-migrate-plugins目录下。先看两个基于 jscodeshift 的插件:explicitAnyPlugin 和 declareMissingClassPropertiesPlugin。

explicitAnyPlugin 会对所有文件中的语义诊断错误进行处理。对于无法推导类型的变量添加any,可以帮助解决编译问题。

// 转化前:
const fn2 = function(p3, p4) {}
const var1 = [];

// 转化后:
const fn2 = function(p3: any, p4: any) {}
const var1: any = [];

declareMissingClassPropertiesPlugin 会找到类申明中缺失的类型,并且添加any修饰。

基本使用

安装和配置TS

在开始迁移之前,需要安装和配置 TS:

在开始迁移过程之前,我们必须安装和配置 TS:
npx tsc --init
npm install --save-dev @types/react

注意:init 命令将创建一个 tsconfig.json 文件。可以根据要求对其进行修改。

将 JS 文件转换为 TS

这里就实用上面说的 ts-migrate 工具将 JS 文件迁移到 TS:

npm install --save-dev ts-migrate
npm run ts-migrate -- rename  --sources 
npm run ts-migrate -- migrate  --sources /file.tsx

注意:最好先提交重命名更改,然后再提交转换为 TS 更改。这样 Git 将更改识别为 1 个文件而不是 2 个文件(删除的文件 + 新文件)。

示例

下面来看一个例子,将项目的 src/examples/example.js 转换为 TS,该文件内容如下:

// wrong-type-assignment
let age = 17;

age = "seventeen";

// assign-to-const
const color = "blue";

color = "red";

// add-conversions
function sum(a, b) {
  return a + b;
}

// declare-missing-class-properties
class Point {
  distance(point) {
    const dx = this.x - point.x;
    const dy = this.y - point.y;

    return Math.hypot(dx, dy);
  }
}

可以通过以下命令来重命名 JavaScript 文件:

npm run ts-migrate -- rename ./ --sources ./src/examples

这里 --sources ./src/examples 指定了 tsconfig.json 中 sources 的路径为 ./src/examples。该命令在项目根目录下运行,通过相对路径指定需要处理的文件或文件夹。执行完该命令后,src/examples/example.js 就变成了 src/examples/example.ts。

接下来就需要将迁移脚本应用于 example.ts 文件:

npm run ts-migrate -- migrate ./ --sources ./src/examples/example.ts

执行完该命令之后,就可以看到一些 ts-migrate 功能:

注意:

在运行 ts-migrate 命令时可以添加以下命令:

这些命令可以传递 --sources(或 -s)标志。该标志接受一个字符串路径(支持 glob 模式),表示项目的子集。当使用此标志时,ts-migrate 忽略默认源文件而使用您列出的文件代替。这实际上相当于将 tsconfig.json 的 include 属性替换为提供的 sources。此标志可以多次传递。

可用的选项包括:

下面是一些示例:

TS Migrate 被设计为一组插件,因此它可以针对不同的用例进行很好的自定义。可以添加更多插件来解决诸如类型质量改进或与库相关的事件等问题。用户可以根据自己的需要添加具有不同插件集的自定义配置。这个工具并不能保证实现完全没有错误的转换,但在实际使用过程中,对于一个超过 50000 行代码、1000 个文件的项目,从 JavaScript 转换到 TypeScript 使用这个工具基本只需 1 天。

ts-migrate:https://github.com/airbnb/ts-migrate。

来源:前端充电宝内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯