接手大项目时陈旧注释与文档会污染人类与 AI 对代码的理解,因此做一个剥离一切表层文本、只提取变量真实流转并可视化成图谱的工具,用于帮助人类和 AI 更直观的了解真实的数据流,并以此倒推代码真正的产出。
点击空白处退出提示
语言技术
React、TypeScript系统类型
Web行业分类
开发工具
接手大项目时陈旧注释与文档会污染人类与 AI 对代码的理解,因此做一个剥离一切表层文本、只提取变量真实流转并可视化成图谱的工具,用于帮助人类和 AI 更直观的了解真实的数据流,并以此倒推代码真正的产出。
1. 通过理解自解析时不断暴露出来的缺陷的深层原因,不断搭建更泛化的解析方式,最终做出关键决策,明确将一次“读取--操作--赋值”三者的解析分离,在当前阶段通过明确界定解析的作用域,建立初步的跨层匹配机制,确保总体流程的解耦,确立了不同语法模块的解析的高度可复用。
2. 通过深入学习 TypeScript 语言机制,了解当前静态解析的现有技术与思路,并通过联合 TypeScript 语言中实际存在的静态解析模式与本项目对于细分语法解析方式的相同点,抽离出其中可复用模块,以此清晰规划未来的快速迭代与改进方向。
1. 使用 ts-morph 解析 TypeScript 源码,并搭建对数据标签的静态解析工具,通过追踪变量的读取与赋值以及这两者之间的操作关系,还原出最真实的数据流。前端使用 React Flow 渲染图谱:以变量与操作函数为核心节点,建立直观的数据流关系,同时通过变量之间的递进分层关系更清晰的展现出数据层级。
2. 通过解析后端所得的数据的数据流流向,建立文件间与总体变量间的双层递进,并同时横向对齐变量与所属文件的关系,实现对两者布局的整体约束。同时明确可视化中的关键信息对象为变量、操作点、类型,通过按需展示三者的信息,确保人类对图的可读性。



评论