Visual Studio 如何生成TypeScript UML类图?

avkwfej4  于 2022-12-14  发布在  TypeScript
关注(0)|答案(6)|浏览(427)

我正在使用Visual Studio 2015创建Web应用程序,我刚刚开始使用TypeScript
随着我的项目越来越大,我想知道是否有一种方法可以使用Visual Studio、扩展或任何其他免费工具来获得TypeScript代码的UML图。

kd3sttzy

kd3sttzy1#

我正在使用一个来自AlexShen的名为classdiagram-ts的VSC扩展,它做得非常好,它可以用于为文件或文件夹创建图表,还可以让您重新定位和导航到字段、隐藏成员和其他很酷的选项。
https://marketplace.visualstudio.com/items?itemName=AlexShen.classdiagram-ts&ssr=false#overview

i2byvkas

i2byvkas2#

您可以尝试tplant。下面是https://github.com/pascalerni/abap2famix/tree/master/src中的typescript类的示例

另一个我目前使用但需要VSCode的替代方法是:vscode-ts-uml

vqlkdk9b

vqlkdk9b3#

适用于Visual Studio:https://marketplace.visualstudio.com/items?itemName=AzadRatzki.TypeScriptDiagram#overview
对于vscode:https://github.com/remojansen/TsUML

我建议使用JSDoc约定对TypeScript代码进行注解,编译TS代码时不剥离注解(在tsconfig.json中将removeComments设置为false),并在JS文件上使用文档生成器。
基于此,您可能会找到一个从JSDoc生成UML图的工具:JSDoc UML Diagram

bbmckpt7

bbmckpt74#

我建议不要用TsUML做任何事情。你把它作为一个常规的NPM包安装,但是它使用了一些粗略的在线服务。在专有项目中使用Tsuml似乎很危险。

guykilcj

guykilcj5#

使用TsUML

npm install -g tsuml
# Note: this posts data to https://yuml.me!!
tsuml --glob ./src/**/*.ts
bbmckpt7

bbmckpt76#

我发现了一个非常有用的站点,可以将TS转换为UML图
https://tsuml-demo.firebaseapp.com/
复制以下代码并将其粘贴到Typescript选项卡下

export class BaseDTO {
  created: number;
  createdBy: string;
  updated: number;
  updatedBy: string;
}

export class PaymentDTO extends BaseDTO {
  paymentId: number;
  paymentReference: string;
  amount: string;
  paymentPayee: { name: string }
}

范例:

相关问题