php的类图怎么生成_.NET手撸绘制TypeScript类图——上篇

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

我们都是 .NET开发&＃xff0c;为啥不干脆就用 .NET撸一个 TypeScript类图呢&＃xff1f;

说干就干&＃xff01;为了搞到类图&＃xff0c;一共分两步走&＃xff1a;

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

2. 将这个对象绘制出来

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

正常来说编译原理挺难的&＃xff0c;但好在有人赶在了我的前头?。

TypeScript解析库

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

我拿了过来&＃xff0c;稍微改造了一下&＃xff0c;移植到了 .NETCore。 NuGet包地址为&＃xff1a;

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

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

https://github.com/sdcb/TypeScriptAST

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

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

简单使用

假如有如下 TypeScript代码&＃xff1a;

class Class1

{

td: number &＃61; 3;

ts: string &＃61; &＃39;hello&＃39;;

doWork(): string {

return &＃96;${3&＃43;this.td}-${ts}&＃96;;

}

}

var tc &＃61; new Class1();

我们可以使用 TypeScriptAST的类进行分析&＃xff0c;只需使用 TypeScriptAST类&＃xff1a;

var ast &＃61; new TypeScriptAST(source: tsSourceStringContent);

该类有许多对象&＃xff0c;提供了丰富的解析方式&＃xff0c;使用如下代码&＃xff0c;即可将代码中的类抽出来&＃xff1a;

var classAsts &＃61; ast.OfKind(SyntaxKind.ClassDeclaration);

由于 AST中的属性太多&＃xff0c;我们调试时抽重要的显示出来&＃xff0c;并转换为 JSON&＃xff1a;

JsonSerializer.Serialize(classAsts.Select(c &＃61;> new

{

c.IdentifierStr,

Children &＃61; c.Children.Skip(1).Select(x &＃61;> x.IdentifierStr),

}), new JsonSerializerOptions { WriteIndented &＃61; true}).Dump();

结果如下&＃xff1a;

[

{

"IdentifierStr": "Class1",

"Children": [

"td",

"ts",

"doWork"

]

}

]

有了这个&＃xff0c;我们即可定义一些类型&＃xff0c;用于后续绘制 AST&＃xff1a;

class ClassDef

{

public string Name { get; set; }

public List Properties { get; set; }

public List 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() &＃61;> (IsPublic ? "&＃43;" : "-") &＃43; $" {Name}: " &＃43; (String.IsNullOrWhiteSpace(Type) ? "any" : Type);

}

class MethodDef

{

public string Name { get; set; }

public bool IsPublic { get; set; }

public bool IsStatic { get; set; }

public List Parameters { get; set; }

public string ReturnType { get; set; }

public override string ToString() &＃61;>

(IsPublic ? "&＃43;" : "-")

&＃43; $" {Name}({String.Join(", ", Parameters)})"

&＃43; (Name &＃61;&＃61; ".ctor" ? "" : $": {ReturnType}");

}

class ParameterDef

{

public string Name { get; set; }

public string Type { get; set; }

public override string ToString() &＃61;> $"{Name}: {Type}";

}

借助于 .NET强大的 LINQ&＃xff0c;可以将代码写得特别精练&＃xff0c;最后可以达到“一行代码”完成 .ts到 AST的转换&＃xff1a;

static Dictionary ParseFiles(IEnumerable files) &＃61;>

files

.Select(x &＃61;> new TypeScriptAST(File.ReadAllText(x), x))

.SelectMany(x &＃61;> x.OfKind(SyntaxKind.ClassDeclaration))

.Select(x &＃61;> new ClassDef

{

Name &＃61; x.OfKind(SyntaxKind.Identifier).FirstOrDefault().GetText(),

Properties &＃61; x.OfKind(SyntaxKind.PropertyDeclaration)

.Select(x &＃61;> new PropertyDef

{

Name &＃61; x.IdentifierStr,

IsPublic &＃61; x.First.Kind !&＃61; SyntaxKind.PrivateKeyword,

IsStatic &＃61; x.OfKind(SyntaxKind.StaticKeyword).Any(),

Type &＃61; GetType(x),

}).ToList(),

Methods &＃61; x.OfKind(SyntaxKind.Constructor).Concat(x.OfKind(SyntaxKind.MethodDeclaration))

.Select(x &＃61;> new MethodDef

{

Name &＃61; x is ConstructorDeclaration ctor ? ".ctor" : x.IdentifierStr,

IsPublic &＃61; x.First.Kind !&＃61; SyntaxKind.PrivateKeyword,

IsStatic &＃61; x.OfKind(SyntaxKind.StaticKeyword).Any(),

Parameters &＃61; ((ISignatureDeclaration)x).Parameters.Select(x &＃61;> new ParameterDef

{

Name &＃61; x.OfKind(SyntaxKind.Identifier).FirstOrDefault().GetText(),

Type &＃61; GetType(x),

}).ToList(),

ReturnType &＃61; GetReturnType(x),

}).ToList(),

}).ToDictionary(x &＃61;> x.Name, v &＃61;> v);

两个函数稍微提取一下&＃xff0c;代码能更精练&＃xff1a;

static string GetReturnType(Node node) &＃61;> node.Children.OfType().FirstOrDefault()?.GetText();

static string GetType(Node node) &＃61;> node switch

{

var x when x.OfKind(SyntaxKind.TypeReference).Any() &＃61;> x.OfKind(SyntaxKind.TypeReference).First().GetText(),

_ &＃61;> node.Last switch

{

LiteralExpression literal &＃61;> literal.Kind.ToString()[..^7].ToLower() switch

{

"numeric" &＃61;> "number",

var x &＃61;> x,

},

var x &＃61;> x.GetText(),

},

};

使用

我对这个ShootR项目进行了分析&＃xff0c;分析代码如下&＃xff1a;

ParseFiles(Directory.EnumerateFiles(

path: &＃64;"C:\Users\dotnet-lover\source\repos\ShootR\ShootR\ShootR\Client\Ships", "*.ts")

).Dump();

分析结果&＃xff1a; 

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

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

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

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

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