.NET手撸绘制TypeScript类图——上篇

近年来随着交互界面的精细化，TypeScript越来越流行，前端的设计也越来复杂，而类图正是用简单的箭头和方块，反映对象与对象之间关系/依赖的好方式。许多工具都能生成C#类图，有些工具也能生成TypeScript类图，如tsuml，但存在一些局限性。

我们都是.NET开发，为啥不干脆就用.NET撸一个TypeScript类图呢？

说干就干！为了搞到类图，一共分两步走：

  1. 解析.ts文件，生成抽象语法树(AST)，并转换为简单的类、属性、方法等对象
  2. 将这个对象绘制出来

本文将分上下两部分，上篇将介绍我移植的一个.NET Standard 2.0的TypeScript解析库，下篇将介绍如何将AST转换为真正的图，并实现一些基本的交互。

.ts文件生成抽象语法树

正常来说编译原理挺难的，但好在有人赶在了我的前头

.NET手撸绘制TypeScript类图——上篇的更多相关文章

  1. .NET手撸绘制TypeScript类图——下篇

    .NET手撸绘制TypeScript类图--下篇 在上篇的文章中,我们介绍了如何使用.NET解析TypeScript,这篇将介绍如何使用代码将类图渲染出来. 注:以防有人错过了,上篇链接如下:http ...

  2. 使用工厂方法模式设计能够实现包含加法（+）、减法（-）、乘法（*）、除法（/）四种运算的计算机程序，要求输入两个数和运算符，得到运算结果。要求使用相关的工具绘制UML类图并严格按照类图的设计编写程序实

    2.使用工厂方法模式设计能够实现包含加法(+).减法(-).乘法(*).除法(/)四种运算的计算机程序,要求输入两个数和运算符,得到运算结果.要求使用相关的工具绘制UML类图并严格按照类图的设计编写程 ...

  3. 1、使用简单工厂模式设计能够实现包含加法（+）、减法（-）、乘法（*）、除法（/）四种运算的计算机程序，要求输入两个数和运算符，得到运算结果。要求使用相关的工具绘制UML类图并严格按照类图的设计编写程

    1.使用简单工厂模式设计能够实现包含加法(+).减法(-).乘法(*).除法(/)四种运算的计算机程序,要求输入两个数和运算符,得到运算结果.要求使用相关的工具绘制UML类图并严格按照类图的设计编写程 ...

  4. CentO7-使用plantuml绘制UML类图

    准备工作 到PlantUml官网(http://plantuml.com/download)下载plantuml.jar.官网上还有一个在线的demof服务.plantuml的官网真的很挫! 到官网下 ...

  5. Android Studio中绘制simpleUML类图详细说明及使用

    一.Android Studio中安装simpleUML 1.下载simpleUML jar包 地址为:http://plugins.jetbrains.com/  搜索 simpleUMLCE 2. ...

  6. 转：深入浅出UML类图（具体到代码层次）

    深入浅出UML类图 作者:刘伟 ,发布于:2012-11-23,来源:CSDN   在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML ...

  7. 深入浅出UML类图（一）

    在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the Standard O ...

  8. 深入浅出UML类图

    原作者:http://www.uml.org.cn/oobject/201211231.asp 在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作&l ...

  9. UML的类图关系分为： 关联、聚合/组合、依赖、泛化（继承）

    UML的类图关系分为: 关联.聚合/组合.依赖.泛化(继承).而其中关联又分为双向关联.单向关联.自身关联:下面就让我们一起来看看这些关系究竟是什么,以及它们的区别在哪里. 1.关联 双向关联:C1- ...

随机推荐

  1. Bugku练习

    首先我们拿到了一个admin.exe的文件,根据惯例我先用查一下有没有加壳: ???这是怎么回事??? 我于是用了winhex打开看了一下,发现 这不就是data协议吗~~~,把后面的base64解密 ...

  2. 网络游戏开发-客户端4 关于Egret的本地坐标和舞台坐标

    因为最近公司事情比较多,所以没怎么更新博客. 不过咱们这个游戏还是在继续往下写. 今天晚上打算写斗地主的出牌动画,遇到一个问题,就是关于本地坐标和舞台坐标的计算问题 在Egret官网的解释是:x 和 ...

  3. CSS3属性—— line-clamp控制文本行数

    说明: 限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 为 ...

  4. MySQL 5.7安装最佳实践

    MySQL 5.7安装最佳实践 1.环境准备OS: CentOS Linux release 7.4.1708 (Core) for VMwareMySQL: mysql-5.7.24-linux-g ...

  5. 算法学习之剑指offer（五）

    题目1 题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. public class Solution ...

  6. Nmon监控结果分析

    一:CPU信息 SYS_SUMM图表: 1.折线图中蓝线为cpu占有率变化情况:粉线为磁盘IO的变化情况: 2.下面表各种左边的位磁盘的总体数据,包括如下几个: Avg tps during an i ...

  7. Spring Security 入门 (二)

    我们在篇(一)中已经谈到了默认的登录页面以及默认的登录账号和密码. 在这一篇中我们将自己定义登录页面及账号密码. 我们先从简单的开始吧:设置自定义的账号和密码(并非从数据库读取),虽然意义不大. 上一 ...

  8. JMXtrans + InfluxDB + Grafana实现Zookeeper性能指标监控

    一.总体效果图 这里是将集群全部放在一起,可以根据自己的审美看怎么放 二.监控指标 其中有些指标与第一篇Zookeeper通过四字命令基础监控(Zabbix)的四字命令的指标是有重复的,二者选一个则可 ...

  9. Linux系统取证实践

    目录 0x00 本课概述 0x01 用到命令   0x00 本课概述 本课时学习Linux系统下取证分析命令. 0x01 用到命令 1.top命令 2.ps命令 3.kill命令 4.linux系统日 ...

  10. vue-cli3 关闭一直运行的 /sockjs-node/info?t= ...

    首先 sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟.全双工的浏览器和web服务器之间通信通道. 本地项目运行就会自动去访问:http ...