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

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

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

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

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

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

2. 将这个对象绘制出来

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

.ts文件生成抽象语法树

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

TypeScript解析库

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

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

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

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

https://github.com/sdcb/TypeScriptAST

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

注意：官方没有提供 TypeScript的 .NET解析工具，也没建议用 .NET，使用 ts解析是正常做法，官方的包用起来显然也更有自信——但这就是 骚操作，不挑战一下怎么知道极限在哪呢？

简单使用

假如有如下 TypeScript代码：

class Class1	
{	
    td: number = 3;	
    ts: string = 'hello';	
    doWork(): string {	
        return `${3+this.td}-${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:\Users\dotnet-lover\source\repos\ShootR\ShootR\ShootR\Client\Ships", "*.ts")	
    ).Dump();

分析结果： 

成功找到了完整的 7个类，并将 类名、 字段名、 字段类型、 方法名、 方法参数和 返回值等信息都解析出来了。

总结

在本篇我们介绍了如何使用 .NET解析 TypeScript，并推荐了我移植的一个 NuGet包： Sdcb.TypeScriptAST。

下篇将在这篇的基础上，介绍如何使用代码将类图渲染出来。

本文所用到的完整代码，可以在我的 Github仓库中下载：https://github.com/sdcb/blog-data/tree/master/2019/20191113-ts-uml-with-dotnet

微信可能无法评论，有想法的朋友可以前往博客园点赞/评论：https://www.cnblogs.com/sdflysha/p/20191113-ts-uml-with-dotnet-1.html