.NET手撸绘制TypeScript类图——上篇
近年来随着交互界面的精细化，TypeScript越来越流行，前端的设计也越来复杂，而类图正是用简单的箭头和方块，反映对象与对象之间关系/依赖的好方式。许多工具都能生成C#类图，有些工具也能生成TypeScript类图，如tsuml，但存在一些局限性。
我们都是.NET开发，为啥不干脆就用.NET撸一个TypeScript类图呢？
说干就干！为了搞到类图，一共分两步走：
- 解析
.ts文件，生成抽象语法树(AST)，并转换为简单的类、属性、方法等对象 - 将这个对象绘制出来
本文将分上下两部分，上篇将介绍我移植的一个.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了:)
注意：官方没有提供TypeScript的.NET解析工具，也没建议用.NET，使用ts解析是正常做法，官方的包用起来显然也更有自信——但这就是骚操作，不挑战一下怎么知道极限在哪呢？
简单使用
假如有如下TypeScript代码：
class Class1
{td: number = 3;ts: string = 'hello';doWork(): string {return `${3+this.td}-${this.ts}`;}
}var tc = new Class1();
我们可以使用TypeScriptAST的类进行分析，只需使用TypeScriptAST类：
var ast = new TypeScriptAST(source: tsSourceStringContent);
该类有许多对象，提供了丰富的解析方式，使用如下代码，即可将代码中的类抽出来：
var classAsts = ast.OfKind(SyntaxKind.ClassDeclaration);
由于AST中的属性太多，我们调试时抽重要的显示出来，并转换为JSON：
JsonSerializer.Serialize(classAsts.Select(c => new
{c.IdentifierStr,Children = c.Children.Skip(1).Select(x => x.IdentifierStr),
}), new JsonSerializerOptions { WriteIndented = true}).Dump();
结果如下：
[{"IdentifierStr": "Class1","Children": ["td","ts","doWork"]}
]有了这个，我们即可定义一些类型，用于后续绘制AST：
class ClassDef
{public string Name { get; set; }public List<PropertyDef> Properties { get; set; }public List<MethodDef> Methods { get; set; }
}class PropertyDef
{public string Name { get; set; }public bool IsPublic { get; set; }public bool IsStatic { get; set; }public string Type { get; set; }public override string ToString() => (IsPublic ? "+" : "-") + $" {Name}: " + (String.IsNullOrWhiteSpace(Type) ? "any" : Type);
}class MethodDef
{public string Name { get; set; }public bool IsPublic { get; set; }public bool IsStatic { get; set; }public List<ParameterDef> Parameters { get; set; }public string ReturnType { get; set; }public override string ToString() => (IsPublic ? "+" : "-")+ $" {Name}({String.Join(", ", Parameters)})"+ (Name == ".ctor" ? "" : $": {ReturnType}");
}class ParameterDef
{public string Name { get; set; }public string Type { get; set; }public override string ToString() => $"{Name}: {Type}";
}
借助于.NET强大的LINQ，可以将代码写得特别精练，最后可以达到“一行代码*”完成.ts到AST的转换：
static Dictionary<string, ClassDef> ParseFiles(IEnumerable<string> files) => files.Select(x => new TypeScriptAST(File.ReadAllText(x), x)).SelectMany(x => x.OfKind(SyntaxKind.ClassDeclaration)).Select(x => new ClassDef{Name = x.OfKind(SyntaxKind.Identifier).FirstOrDefault().GetText(),Properties = x.OfKind(SyntaxKind.PropertyDeclaration).Select(x => new PropertyDef{Name = x.IdentifierStr,IsPublic = x.First.Kind != SyntaxKind.PrivateKeyword,IsStatic = x.OfKind(SyntaxKind.StaticKeyword).Any(),Type = GetType(x),}).ToList(),Methods = x.OfKind(SyntaxKind.Constructor).Concat(x.OfKind(SyntaxKind.MethodDeclaration)).Select(x => new MethodDef{Name = x is ConstructorDeclaration ctor ? ".ctor" : x.IdentifierStr,IsPublic = x.First.Kind != SyntaxKind.PrivateKeyword,IsStatic = x.OfKind(SyntaxKind.StaticKeyword).Any(),Parameters = ((ISignatureDeclaration)x).Parameters.Select(x => new ParameterDef{Name = x.OfKind(SyntaxKind.Identifier).FirstOrDefault().GetText(),Type = GetType(x),}).ToList(),ReturnType = GetReturnType(x),}).ToList(),}).ToDictionary(x => x.Name, v => v);
两个函数稍微提取一下，代码能更精练：
static string GetReturnType(Node node) => node.Children.OfType<TypeNode>().FirstOrDefault()?.GetText();static string GetType(Node node) => node switch
{var x when x.OfKind(SyntaxKind.TypeReference).Any() => x.OfKind(SyntaxKind.TypeReference).First().GetText(),_ => node.Last switch{LiteralExpression literal => literal.Kind.ToString()[..^7].ToLower() switch{"numeric" => "number",var x => x,},var x => x.GetText(),},
};
使用
我对这个ShootR项目进行了分析，分析代码如下：
ParseFiles(Directory.EnumerateFiles(path: @"C:Usersdotnet-loversourcereposShootRShootRShootRClientShips", "*.ts")).Dump();
分析结果：
成功找到了完整的7个类，并将类名、字段名、字段类型、方法名、方法参数和返回值等信息都解析出来了。本还能做得更详细的，但这些可以留给读者完成。
总结
在本篇我们介绍了如何使用.NET解析TypeScript，并推荐了我移植的一个NuGet包：Sdcb.TypeScriptAST。
下篇将在这篇的基础上，介绍如何使用代码将类图渲染出来。
本文所用到的完整代码，可以在我的Github仓库中下载： https://github.com/sdcb/blog-data/tree/master/2019/20191113-ts-uml-with-dotnet
喜欢的朋友 请关注我的微信公众号：【DotNet骚操作】
