{"id":2792,"date":"2026-07-24T16:21:39","date_gmt":"2026-07-24T08:21:39","guid":{"rendered":"https:\/\/updates.visual-paradigm.com\/tw\/releases\/typescript-to-uml-class-diagram-generator\/"},"modified":"2026-07-24T16:21:39","modified_gmt":"2026-07-24T08:21:39","slug":"typescript-to-uml-class-diagram-generator","status":"publish","type":"releases","link":"https:\/\/updates.visual-paradigm.com\/tw\/releases\/typescript-to-uml-class-diagram-generator\/","title":{"rendered":"\u4f7f\u7528 VPasCode \u5373\u6642\u5c07 TypeScript \u7a0b\u5f0f\u78bc\u53ef\u8996\u5316\u70ba UML \u985e\u5225\u5716"},"content":{"rendered":"

\"An<\/p>\n

\u6211\u5011\u975e\u5e38\u9ad8\u8208\u5ba3\u5e03 Visual Paradigm \u6709\u91cd\u5927\u5347\u7d1aVPasCode<\/a>\uff01\u6211\u5011\u7684\u5e73\u53f0\u73fe\u5728\u539f\u751f\u652f\u63f4\u5c07\u5404\u7a2e\u7a0b\u5f0f\u8a9e\u8a00\u76f4\u63a5\u53ef\u8996\u5316\u70ba UML \u985e\u5225\u5716\u3002\u96d6\u7136\u9019\u6b21\u66f4\u65b0\u652f\u63f4\u4e86 15 \u7a2e\u4e0d\u540c\u7684\u8a9e\u8a00\u2014\u2014\u5305\u62ecJava<\/a>, Go<\/a>, Python<\/a>\uff0c\u4ee5\u53caC#<\/a>\u2014\u2014\u4eca\u5929\u6211\u5011\u5c07\u7126\u9ede\u653e\u5728TypeScript<\/a>.<\/p>\n

\u7121\u8ad6\u60a8\u662f\u6b63\u5728\u8a18\u9304\u73fe\u6709\u7684\u7a0b\u5f0f\u78bc\u5eab\u3001\u898f\u5283\u65b0\u7684\u67b6\u69cb\uff0c\u9084\u662f\u50c5\u50c5\u8a66\u5716\u7406\u89e3\u8907\u96dc\u7684\u7269\u4ef6\u5c0e\u5411\u95dc\u4fc2\uff0c\u5c07\u7a0b\u5f0f\u78bc\u8f49\u63db\u70ba\u8996\u89ba\u5316\u683c\u5f0f\u5f9e\u672a\u5982\u6b64\u8f15\u9b06\u3002\u5982\u679c\u60a8\u4e00\u76f4\u5728\u5c0b\u627e\u53ef\u9760\u7684\u7dda\u4e0aTypeScript<\/a>\u5716\u8868\u5de5\u5177\uff0c\u9019\u6b21\u66f4\u65b0\u6b63\u662f\u70ba\u60a8\u800c\u8a2d\u8a08\u3002<\/p>\n

\u4ec0\u9ebc\u662f VPasCode\uff1f<\/h2>\n

\u5982\u679c\u60a8\u662f\u6211\u5011\u751f\u614b\u7cfb\u7d71\u7684\u65b0\u6210\u54e1\uff0cVPasCode<\/a>\uff08Visual Paradigm \u7684\u5716\u8868\u5373\u7a0b\u5f0f\u78bc\u5e73\u53f0\uff09\u662f\u4e00\u6b3e\u6574\u5408\u5f0f\u7684\u5716\u8868\u5373\u7a0b\u5f0f\u78bc\u5de5\u5177\uff0c\u65e8\u5728\u8b93\u60a8\u4f7f\u7528\u6d41\u884c\u7684\u6587\u5b57\u8f49\u5716\u8868\u683c\u5f0f\u5275\u5efa\u51fa\u8272\u7684\u5716\u8868\u3002\u900f\u904e\u5c07PlantUML<\/a>, Mermaid<\/a>, Graphviz<\/a>\uff0c\u4ee5\u53caECharts<\/a>\u7b49\u5f15\u64ce\u6574\u5408\u5230\u55ae\u4e00\u74b0\u5883\u4e2d\uff0cVPasCode \u6210\u70ba\u60a8\u7d50\u69cb\u5316\u8cc7\u6599\u8207\u7a0b\u5f0f\u78bc\u7684\u901a\u7528\u7ffb\u8b6f\u5668\u3002<\/p>\n

\u5728\u9019\u6b21\u66f4\u65b0\u4e4b\u524d\uff0c\u4f7f\u7528\u8005\u4e3b\u8981\u4f7f\u7528 VPasCode \u4f86\u5448\u73fe\u6a19\u6e96\u7684\u5716\u8868\u7a0b\u5f0f\u8a9e\u8a00\uff08DSL\uff09\uff0c\u7d50\u69cb\u5316\u8cc7\u6599\uff08JSON<\/a>, YAML<\/a>)\uff0c\u4ee5\u53ca\u8cc7\u6599\u5eab\u7d50\u69cb (SQL<\/a>)\u3002\u73fe\u5728\uff0c\u6211\u5011\u5df2\u5c07\u7d71\u4e00\u7684\u5716\u5f62\u7a0b\u5f0f\u78bc\u5de5\u5177\u64f4\u5c55\u81f3\u89e3\u6790\u5be6\u969b\u61c9\u7528\u7a0b\u5f0f\u539f\u59cb\u78bc\uff0c\u81ea\u52d5\u5c07\u60a8\u7684\u985e\u5225\u3001\u4ecb\u9762\u548c\u76f8\u4f9d\u6027\u5c0d\u61c9\u81f3\u6a19\u6e96\u7684UML\u7b26\u865f\u3002<\/p>\n

\u60a8\u53ef\u4ee5\u5728 VPasCode \u9996\u9801<\/a>.<\/p>\n

TypeScript \u8f49 UML \u53ef\u8996\u5316\u7684\u904b\u4f5c\u65b9\u5f0f<\/h2>\n

\u6211\u5011\u7684\u76ee\u6a19\u662f\u8b93\u53ef\u8996\u5316\u904e\u7a0b\u5b8c\u5168\u7121\u7e2b\u3002\u6211\u5011\u8a2d\u8a08\u4e86 VPasCode \u5de5\u4f5c\u5340\uff0c\u4f5c\u70ba\u4e00\u500b\u9ad8\u5ea6\u97ff\u61c9\u5f0f\u7684\uff0c\u514d\u8cbb\u7684 TypeScript \u7de8\u8f2f\u5668<\/strong>\uff0c\u642d\u914d\u5373\u6642\u6e32\u67d3\u5f15\u64ce\u3002<\/p>\n

\"Editing<\/p>\n

\u4ecb\u9762\u8a2d\u8a08\u7c21\u55ae\u76f4\u89ba\uff1a\u5728 GUI \u7684\u5de6\u5074\uff0c\u60a8\u53ef\u8cbc\u4e0a\u6216\u8f38\u5165\u60a8\u7684 TypeScript \u7a0b\u5f0f\u78bc\u3002\u7576\u60a8\u8f38\u5165\u6642\uff0c\u5f15\u64ce\u6703\u5206\u6790\u60a8\u7684\u7269\u4ef6\u5c0e\u5411\u7d50\u69cb\uff0c\u4e26\u7acb\u5373\u5728\u87a2\u5e55\u53f3\u5074\u5448\u73fe\u5c08\u696d\u7684 UML \u985e\u5225\u5716\u3002<\/p>\n

\u6709\u73fe\u6709\u7684\u6a94\u6848\u60f3\u8981\u53ef\u8996\u5316\u55ce\uff1f\u60a8\u751a\u81f3\u4e0d\u9700\u8981\u958b\u555f\u5b83\u5011\u3002\u53ea\u9700 \u5c07\u60a8\u7684 TypeScript (.ts) \u539f\u59cb\u78bc\u6a94\u6848\u62d6\u66f3\u4e26\u653e\u7f6e<\/strong> \u5230 VPasCode \u754c\u9762\u4e2d\u3002\u7cfb\u7d71\u6703\u81ea\u52d5\u5075\u6e2c\u8a9e\u8a00\uff0c\u586b\u5165\u7de8\u8f2f\u5668\uff0c\u4e26\u5728\u6beb\u79d2\u5167\u751f\u6210\u5c0d\u61c9\u7684\u5716\u8868\u3002<\/p>\n

\u7acb\u5373\u9ad4\u9a57\uff1aTypeScript \u52d5\u7269\u5c64\u7d1a\u7d50\u69cb<\/h2>\n

\u70ba\u4e86\u5c55\u793a\u6b64 \u7dda\u4e0a TypeScript \u5716\u8868\u5de5\u5177<\/strong>\u5982\u4f55\u7cbe\u78ba\u5730\u6620\u5c04\u7269\u4ef6\u5c0e\u5411\u6982\u5ff5\uff0c\u8b93\u6211\u5011\u4f86\u770b\u770b\u4e00\u500b\u6a19\u6e96\u7684\u52d5\u7269\u5c64\u7d1a\u7d50\u69cb\u6a21\u578b\uff0c\u8a72\u6a21\u578b\u4f7f\u7528\u4ecb\u9762\u3001\u62bd\u8c61\u985e\u5225\u3001\u5c01\u88dd\u8207\u7e7c\u627f\u3002<\/p>\n

\n
\nTypeScript<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f TypeScript<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n TypeScript<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit TypeScript in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
\/\/ TypeScript \u52d5\u7269\u5c64\u7d1a\u7d50\u69cb\u7bc4\u4f8b\r\ninterface Comparable<T> {\r\n    compareTo(other: T): number;\r\n}\r\n\r\ninterface Playable {\r\n    play(): void;\r\n}\r\n\r\nabstract class Animal implements Comparable<Animal> {\r\n    protected name: string;\r\n    private age: number;\r\n\r\n    constructor(name: string, age: number) {\r\n        this.name = name;\r\n        this.age = age;\r\n    }\r\n\r\n    abstract makeSound(): void;\r\n\r\n    public getInfo(): string {\r\n        return this.name + \" \u662f \" + this.age + \" \u6b72\"\r\n    }\r\n\r\n    compareTo(other: Animal): number {\r\n        return this.name.localeCompare(other.name);\r\n    }\r\n}\r\n\r\nclass Dog extends Animal implements Playable {\r\n    private breed: string;\r\n    static species: string = \"\u72ac\u79d1\";\r\n\r\n    constructor(name: string, age: number, breed: string) {\r\n        super(name, age);\r\n        this.breed = breed;\r\n    }\r\n\r\n    makeSound(): void {\r\n        console.log(\"\u6c6a\u6c6a!\");\r\n    }\r\n\r\n    play(): void {\r\n        console.log(this.name + \" \u6b63\u5728\u73a9\u63a5\u7403\");\r\n    }\r\n}\r\n\r\nclass Cat extends Animal implements Playable {\r\n    private furColor: string;\r\n\r\n    constructor(name: string, age: number, furColor: string) {\r\n        super(name, age);\r\n        this.furColor = furColor;\r\n    }\r\n\r\n    makeSound(): void {\r\n        console.log(\"\u55b5\u55b5!\");\r\n    }\r\n\r\n    play(): void {\r\n        console.log(this.name + \" \u6b63\u5728\u73a9\u6bdb\u7dda\");\r\n    }\r\n}\r\n\r\nclass Zoo {\r\n    private animals: Animal[];\r\n\r\n    constructor(animals: Animal[]) {\r\n        this.animals = animals;\r\n    }\r\n\r\n    public listAnimals(): void {\r\n        for (const a of this.animals) {\r\n            console.log(a.getInfo());\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit TypeScript in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f TypeScript<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u7576\u60a8\u5c07\u6b64\u7a0b\u5f0f\u78bc\u8cbc\u5165 VPasCode \u6642\uff0c\u5b83\u80fd\u5b8c\u7f8e\u8b58\u5225 `Animal` \u62bd\u8c61\u985e\u5225\u3001\u5176\u5c0d `Comparable` \u4ecb\u9762\u7684\u5be6\u4f5c\uff0c\u4ee5\u53ca\u8207 `Dog` \u548c `Cat` \u985e\u5225\u7684\u7e7c\u627f\u95dc\u4fc2\u3002\u540c\u6642\uff0c\u5b83\u4e5f\u6703\u5c07\u7cbe\u78ba\u7684\u5c6c\u6027\uff08\u4f8b\u5982\u975c\u614b\u7684 `species` \u5b57\u4e32\uff09\u8207\u65b9\u6cd5\u5c0d\u61c9\u81f3\u6a19\u6e96\u7684 UML \u6b04\u4f4d\u4e2d\u3002<\/p>\n
\u60f3\u89aa\u81ea\u8a66\u8a66\u770b\u55ce\uff1f<\/strong> \u60a8\u73fe\u5728\u5c31\u53ef\u4ee5\u958b\u555f\u3001\u6aa2\u8996\u4e26\u7de8\u8f2f\u6b64\u4efd\u5b8c\u6574\u7684 TypeScript \u67b6\u69cb\u3002\u9ede\u64ca\u9019\u88e1\u89c0\u770b\u5373\u6642\u6e32\u67d3<\/a>.<\/p>\n
\u5c08\u70ba\u751f\u7522\u529b\u8207\u5354\u4f5c\u800c\u8a2d\u8a08<\/h2>\n
\u7531\u65bc VPasCode \u8a2d\u8a08\u70ba\u7121\u6469\u64e6\u7684\uff0c\u514d\u8cbb\u7684 TypeScript \u7de8\u8f2f\u5668<\/strong>\u4e14\u70ba\u53ef\u8996\u5316\u4e2d\u5fc3\uff0c\u6211\u5011\u5167\u5efa\u4e86\u591a\u9805\u529f\u80fd\uff0c\u78ba\u4fdd\u60a8\u751f\u6210\u7684\u5716\u8868\u4e0d\u50c5\u50c5\u505c\u7559\u5728\u700f\u89bd\u5668\u4e2d\uff1a<\/p>\n