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

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

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

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

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

.ts文件生成抽象语法树

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

TypeScript解析库

我在Github上找到了一个叫TypeScriptAST的项目，它刚好就能将.ts文件转换为AST。但它仅提供了.NET Framework版本。我看了一下实现方式，它是从微软官方的TypeScript仓库按源代码翻译的。其中Parse.cs高达近8000行代码，能把如此巨大的工作翻译完成，可见作者花了不少时间。

我拿了过来，稍微改造了一下，移植到了.NET Core。NuGet包地址为：

https://www.nuget.org/packages/Sdcb.TypeScriptAST/

我移植的这个版本源代码也开放到了Github，使用相同的Apache-2.0协议开源，开源项目链接如下：

https://github.com/sdcb/TypeScriptAST

虽然不知道是不是第一个移植的，但可以确定的是今后.NET Core也能解析TypeScript了:)

注意：官方没有提供