.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. Mac 下安装配置MongoDB讲解

    1.访问官网地址是:MongoDB Download Center | MongoDB,一般下载server的Community 版,对于一般开发人员来说已经够用了.   2.点击“DOWNLOAD( ...

  2. Python：的web爬虫实现及原理(BeautifulSoup工具)

    最近一直在学习python,学习完了基本语法就练习了一个爬虫demo,下面总结下. 主要逻辑是 1)初始化url管理器,也就是将rooturl加入到url管理器中 2)在url管理器中得到新的new_ ...

  3. python里怎么查看数据类型

    python里怎么查看数据类型? python里可以通过type()函数来查看数据类型. Python 内置函数 Python 内置函数 Python type() 函数如果你只有第一个参数则返回对象 ...

  4. CSP考场Emacs使用指南[原创]

    前言: 据说,CSP考试,之后不再支持windows了呢. windows用户真得劲! 那用什么系统? Ubuntu上场了 Ubuntu编译指南 进入Ubuntu系统,在你想存的文件夹中新建一个空白文 ...

  5. vue element NavMenu 莫名出现蓝色边框

    最近在开发一款官网,使用的是element,在头菜单NavMenu,的时候没有设置任何的边框属性,结果出现了如下图所示的边框线. 点击有二级菜单时出现 找了好多方法发现是有一个属性影响到了,:focu ...

  6. 百万年薪python之路 -- while循环

    day02 1.while循环 -- while关键字 while 空格 条件 冒号 缩进 循环体 while 5>4: print("Hello World!") 数字中非 ...

  7. Ubuntu 14.04 sudo免密码的方法| sudo不需要密码

    Ubuntu 14.04 sudo免密码的方法| sudo不需要密码 cd /etc/sudoers.d sudo touch nopasswd4sudo sudo vi nopasswd4sudo ...

  8. Maven Eclipse 笔记

    1. 下载apache-maven-3.1.1-bin.zip SITE:http://maven.apache.org/download.cgi 2. 配置 M2_REPO= C:\Users\&l ...

  9. MyBatis（4）-- 动态SQL

    如果使用JDBC或者类似于Hibernate的其他框架,很多时候要根据需要去拼装SQL,这是一个麻烦的事情.因为某些查询需要许多条件.通常使用其他框架需要大量的Java代码进行判断,可读性比较差,而M ...

  10. Leetcode Tags（1）Linked List

    1.知识点回顾 https://www.cnblogs.com/BigJunOba/p/9174206.html https://www.cnblogs.com/BigJunOba/p/9174217 ...