专栏首页雪雁的专栏.NET手撸绘制TypeScript类图——上篇

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

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

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

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

说干就干!为了搞到类图,一共分两步走:

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

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

.ts文件生成抽象语法树

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

TypeScript解析库

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

我拿了过来,稍微改造了一下,移植到了 .NETCoreNuGet包地址为:

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,可以将代码写得特别精练,最后可以达到“一行代码”完成 .tsAST的转换:

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

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

本文分享自微信公众号 - magiccodes(xl----0)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Magicodes.IE.Excel完成Excel图片的导入和导出

    如下述示例代码所示,我们需要在图片属性上添加ExportImageFieldAttribute特性,使用特性的“Width”属性指定图片宽度,“Height”属...

    心莱科技雪雁
  • .NET如何生成大量随机数据

    在演示Demo、数据库脱敏、性能测试中,有时需要生成大量随机数据。Bogus就是.NET中优秀的高性能、合理、支持多语言的随机数据生成库。

    心莱科技雪雁
  • 在全Linux环境去开发、运行、部署.NET Core项目!

    2016年.NET Core首个正式版本问世,如今已发布到了.NET Core3.1,再有2个月.NET5也将如约而至,跨平台开发已经快5年,然而很多人却还只是...

    心莱科技雪雁
  • WPF 运行时迁移 EF Core 数据库

    在客户端开发,可以使用 .NET Core 3.0 开发 WPF 程序,可以使用 EF Core 连接数据库。客户端的数据库使用 SQLite 在不同的版本需要...

    林德熙
  • FreeSql 新的八大骚功能

    FreeSql 目前版本号 0.5.5,预计明年元旦发布 1.0.0,切莫小看了版本号,目前单元测试方法1350+,并且每个方法内的涵盖面又比较广(不信的话见下...

    梁规晓
  • .NET 云原生架构师训练营(模块二 基础巩固 EF Core 关系)--学习笔记

    关系:https://docs.microsoft.com/zh-cn/ef/core/modeling/relationships?tabs=fluent-a...

    郑子铭
  • .NET 云原生架构师训练营(模块二 基础巩固 EF Core 介绍)--学习笔记

    一个工作单元在一个事务范围内保留所有对数据库的变更,在这个工作单元结束的时候一次性提交所有改动到数据库

    郑子铭
  • .NET 云原生架构师训练营(模块二 基础巩固 EF Core 关系)--学习笔记

    关系:https://docs.microsoft.com/zh-cn/ef/core/modeling/relationships?tabs=fluent-a...

    郑子铭
  • .NET 云原生架构师训练营(模块二 基础巩固 EF Core 介绍)--学习笔记

    一个工作单元在一个事务范围内保留所有对数据库的变更,在这个工作单元结束的时候一次性提交所有改动到数据库

    郑子铭
  • 将JSON字符串反序列化为指定的.NET对象类型

      关于将JSON字符串反序列化为指定的.NET对象类型数据常见的场景主要是关于网络请求接口,获取到请求成功的响应数据。本篇主要讲的的是如何通过使用Newton...

    追逐时光者

扫码关注云+社区

领取腾讯云代金券