Typescript落地和代码自动化——前端稳定性和研发效率精进

简介: 钉钉前端团队原创,关注我们,了解更多前端技术

引言

钉钉业务体量已达亿级,钉钉技术的服务端、客户端等的数据模型和接口已达到极高的复杂度。面对多样的客户端和技术栈IO环境,我们采用了IDL(interface description language)来描述多端数据通信的约定,以收敛业务复杂度带来的维护风险。

对于前端来说,容器环境从mobile、web到智能硬件IOT、桌面端CEF容器;上下游数据源也包罗了Java、C++、Node.js等宿主语言环境。

image.png

在多人协作、前端工程化的大背景下,我们开始大量使用Typescript来增强代码的健壮性、可维护性。本文将分享笔者是如何设计自动化代码工具,以便加速typescript在团队的落地。

前端代码演进至Typescript

相信大部分前端掘友们都有体感,业务迭代伴随的数据接口、模型改动,都需要前端同学手动检查业务代码,一旦改动不彻底、单元测试没有覆盖分支流程,线上稳定性就极容易收到威胁,作为开发的体感也是极差。

在2017年,借助钉钉桌面客户端从node-webkit演进至native CEF架构的契机,我们引入Typescript作为开发语言,并逐步使用起ts的技术生态,如rxjs、redux-observable等。

从2017年到2018年,钉钉桌面客户端CEF容器中运行的前端代码就已经高达23万行,维护者达到20位。

Typescript在钉钉桌面端的落地让推广工作得到了认可,比如钉钉考勤在重构过程中,逐步从js迁移到ts,开放平台的售卖系统直接就用ts编写、多个内部npm模块编写的语言选型优先采用ts。

But , 原本以为ts可以在团队顺利推广,然而现实却并非如此。很多新业务在选型时还是选择了js,是工程化成本太高还是ts太难?

我们了解到很多新同学、实习生加入团队就能很快的上手老的ts项目,断言ts语言不是问题源头。

在和业务开发同学沟通后,我们发现技术栈从js迁移到ts的过程中,数据接口定义的编写、ts脚手架的重新熟悉是主要的障碍源。

工程化和研发效率的问题构成了较高的ts研发成本,成本就意味着收益降低。

确实,要想享受ts的类型检查类型推导编译期代码检查等便利,前端项目就必须提供数据模型和接口的ts定义,我们希望找到自动化生成ts代码的方案来解决这个问题。

Typescript落地之IDL自动化生成代码

在开始介绍我们的IDL自动化代码生成方案之前,我先简单介绍下钉钉的IDL —— 强有力的多端数据接口描述语言。

背景知识之 钉钉IDL

钉钉的接口描述(IDL)文件,由model和interface组成,model用来描述数据模型定义、interface描述接口信息。举个例子

/**
 * model.idl
 * 网关报错返回对象
 */
module test;
struct GatewayErrorModel {
    // 是否被降级。1是,0否
    1: int isDegrading;    
    // 安全网关域名
    2: string domain;
};
复制代码
/**
 * interface.idl
 */
module test;
include test.GatewayErrorModel;
interface GatewayIService {
    /**
    * 上报网关访问异常错误
    * @param appId  ID
    * @param host   域名
    * @param errMsg 错误信息
    */
    GatewayErrorModel testRpc(string appId,string corpId,string domain,string errCode,string errMsg);
};
复制代码

以上两个文件interface.idl和model.idl同属一个模块, 模块名由module关键字指定即test,模型和接口的依赖关系通过include描述,数据结构通过struct描述。 model和interface的idl文件,组合构成该模块对外暴露的数据接口。 在钉钉,IDL描述了各端的数据IO信息,不同代码语言如Java、C++的rpc和推送模型的自动化生成基于IDL。IDL为各端的代码编写提供了一致性保障,让所有的数据和请求都有源可溯。

简单介绍完IDL后,我们回归上面的问题:如何降低ts对业务开发的成本。

想必大部分读者已经猜到了,我们的方案便是编写工具将IDL转译成Typescript接口和模型定义,简图如下。

image.png

前端代码自动化工具之 dingtalk-idl-ts

从信息熵的角度来说,IDL既然能覆盖c++/java等语言的数据约定,它包含的信息肯定足够覆盖前端Typescript的定义。

下面用一幅图,简示下dingtalk-idl-ts的实现细节流程。

首先从IDL做tokenizer到AST,再由AST做fs.writeFile生成初步的ts文件,随之根据业务上层传入的语言模块要求(如es、cjs)生成不同的compilerOptions以供tsc命令调用,最后调用tsc命令行自动生成rpc代码及模块定义。有兴趣的同学可以私信了解每个环节的代码实现。

image.png

有了自动化生成ts的工具还不够?我们要将稳定性的要求注入生成的ts产物

为了让数据模型生成的置信度最高,在自动化生成代码的同时,dingtalk-idl-ts工 具对数据模型的property做了optional的处理。 因此任何一行业务层的代码如果对模型的property selector没有做保护,都无法通过编译。

image.png

这样的设计模式给业务代码带来了一定的冗余度,但为业务的正确运行和错误溯源做了底线的保护。

自动化代码的生成产物,大致如下:

image.png

通过dingtalk-idl-ts提供的命令行工具,业务开发只需要一个命令行,即可按需生成项目所需要的ts数据接口定义,从易出错的手动编写ts代码中解放出来。

现在该工具已在钉钉的桌面端、小程序、H5应用中落地使用,ts的进一步推广也随着基础设施的完善逐渐落地。


相关文章
|
3月前
|
JavaScript 前端开发 安全
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
每日激励:“如果没有天赋,那就一直重复”。我是蒋星熠Jaxonic,一名执着于代码宇宙的星际旅人。用Vue 3与TypeScript构建高效、可维护的前端系统,分享Composition API、状态管理、性能优化等实战经验,助力技术进阶。
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
|
7月前
|
人工智能 缓存 搜索推荐
手把手基于ModelScope MCP协议实现AI短视频创作:零代码自动化工作流
本文介绍了基于ModelScope MCP协议的AI视频生成解决方案,涵盖核心机制解析、零代码工作流搭建、性能优化策略及全链路异常处理。通过统一上下文描述符抽象异构AI服务,实现图像生成、语音合成与视频剪辑的自动化编排。结合缓存优化与错误重试机制,大幅提升生成效率(如5分镜视频从91.7s降至22.4s)。最后展示《夏日海滩》生成案例,并探讨个性化风格迁移与商业场景集成等进阶方向,揭示零代码本质为服务、流程与资源的三层抽象。
1112 18
|
8月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
385 22
|
9月前
|
存储 jenkins 测试技术
Apipost自动化测试:零代码!3步搞定!
传统手动测试耗时低效且易遗漏,全球Top 10科技公司中90%已转向自动化测试。Apipost无需代码,三步实现全流程自动化测试,支持小白快速上手。功能涵盖接口测试、性能压测与数据驱动,并提供动态数据提取、CICD集成等优势,助力高效测试全场景覆盖。通过拖拽编排、一键CLI生成,无缝对接Jenkins、GitHub Actions,提升测试效率与准确性。
797 11
|
11月前
|
人工智能 前端开发 JavaScript
详解智能编码在前端研发的创新应用
接下来,人与智能体的交互将变得更为紧密,比如 N 年以后是否可以逐渐过渡。这个逐渐过渡的过程实际上是温和的,从依赖人类到依赖超大规模算力的转变,可能会取代我们的一些职责。这不仅仅是简单的叠加关系。对于AI和超大规模算力,这是否意味着我们可以大幅度提升软件质量,是否可以缩短研发周期并提高效率,还有创造出更优质的软件并持续发展,这无疑是肯定的。
761 25
|
11月前
|
人工智能 自然语言处理 前端开发
巧用通义灵码,提升前端研发效率
本次分享,主题是利用通义灵码提升前端研发效率。分享内容主要包括以下几部分:首先,我将从前端开发的角度介绍对通义灵码的基本认识;其次,我将展示通义灵码在日常研发中的应用案例;然后,我将通过实例说明,良好的设计能够显著提升通义灵码的效果。在第四个部分,我将介绍通义灵码的企业知识库以及如何利用 RAG 构建团队智能研发助手。最后,我将总结本次分享并展望未来方向。
|
11月前
|
人工智能 前端开发 JavaScript
智能编码在前端研发的创新应用
在前端开发领域,智能编码技术正引领一场变革,通过大模型的强大能力将自然语言需求直接转化为高效、可靠的代码实现。
440 10
|
11月前
|
人工智能 前端开发 JavaScript
详解智能编码在前端研发的创新应用 | 领通义灵码蛇年红包封面
详解智能编码在前端研发的创新应用 | 领通义灵码蛇年红包封面
|
11月前
|
人工智能 自然语言处理 前端开发
从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本