NoesisGUI 邂逅 AI：基于 TypeScript 的 MVVM 架构与自动化代码生成

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Unreal Engine 4

NoesisDemo - TypeScript + AI 赋能的 MVVM 开发方案

🔗 项目仓库: https://github.com/No-needto-recall/NoesisDemo

🎯 这个项目是做什么的？

这是一个 Unreal Engine 5.4 的示例项目，旨在演示：

用 TypeScript 编写 NoesisGUI 的 ViewModel - 利用 PuerTS 的 uclass_extends 特性，彻底告别蓝图开发。
完美复刻官方 Buttons 和 QuestLog 示例 - 证明该方案的完整性和可行性。
完整的 AI 辅助开发支持 (例如 Claude Code) - 实现近乎自动化的 UI 代码生成。
纯代码工作流 - XAML + TypeScript ，对版本控制极其友好，再无蓝图合并冲突。

核心理念：XAML 和 ViewModel 都是代码 → AI 完全理解 → 自动生成和修改 → 开发效率 dramatically improved

📑 目录

✨ 核心特性

✅ 完美复刻官方示例：成功使用 TypeScript 复刻了 NoesisGUI 官方的 Buttons 和 QuestLog 示例。

🚀 TypeScript 代码化 ViewModel：使用 PuerTS 的 uclass_extends 直接继承 UE 类并自动生成蓝图。

🔧 动态 DataContext 设置：自定义 UNoesisViewModeInstance，调整 DataContext 的赋值时机。

🤖 AI 友好：XAML 和 ViewModel 均为代码，易于 AI 理解和生成。

📦 版本控制友好：完全基于代码，告别蓝图合并的噩梦。

⚡ 属性自动通知：NoesisProxy 自动处理 PropertyChanged，并原生支持 TArray 和 TMap。

🤖 AI 辅助开发 - 近乎自动化的 UI 代码生成

为什么这套方案对 AI 友好？

本方案采用完全代码化的工作流：

✅ XAML 文件是纯文本格式 - AI 可以轻松理解和生成。

✅ ViewModel 使用 TypeScript 编写 - 这是 AI 的强项。

✅ 数据绑定逻辑清晰可读 - AI 能够进行推理。

这使得本项目与 AI 辅助开发工具（如 Claude Code, GitHub Copilot, Cursor 等）完全兼容。

AI 能做什么？

自动生成 ViewModel 代码

只需描述你的需求，AI 就能生成完整的 ViewModel：

// 输入："创建一个设置界面，包含音量和画质选项"
// AI 自动生成：
class TS_SettingsViewMode extends UE.Object {
    @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite)
    Volume: number = 80;

    @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite)
    Quality: string = "High";

    @ufunction(ufunction.BlueprintCallable)
    ApplySettings(): void {
        console.log(`Applying: Volume=${this.Volume}, Quality=${this.Quality}`);
    }
}

自动修改和重构代码

告诉 AI “增加一个音效开关” → 自动修改 TypeScript 和 XAML 。 AI 能理解数据绑定逻辑，自动添加相应的属性和命令。 AI 还能自动处理复杂的集合绑定 (TArray, TMap)。

快速生成完整界面

“创建一个包含用户列表的界面” → AI 自动生成 XAML + ViewModel 。 “增加搜索和筛选功能” → AI 自动补全相关代码。 “实现拖拽排序” → AI 生成完整的事件处理逻辑。

使用 Claude Code 等 AI 工具，只需描述 UI 需求和交互逻辑，AI 就能自动生成 XAML 和 ViewModel 代码。开发者只需审查和微调，极大地提升了开发效率，实现了近乎自动化的 UI 代码开发体验。

"再也不用手动拉蓝图连线了——AI 直接生成代码！" - 某开发者

🏗️ 技术架构亮点

PuerTS `uclass_extends` - 自动生成蓝图类

通过 TypeScript 装饰器定义属性和方法，PuerTS 会自动生成对应的蓝图类：

class TS_ButtonsViewMode extends UE.Object {
    static Path(): string {
        return "/Game/BluePrints/TypeScript/ViewMode/Buttons/TS_ButtonsViewMode_C";
    }

    @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite)
    TestValue: string = "Hello NoesisGUI";

    @ufunction(ufunction.BlueprintCallable)
    StartCommand(): void {
        console.log("Button clicked!");
    }
}

`UNoesisViewModeInstance` - 解决 DataContext 限制

自定义的 UNoesisInstance 子类，在 XamlLoaded 回调中自动设置 DataContext，解决了官方类不支持动态设置的问题。

`NoesisProxy` - 属性自动通知

利用 JavaScript Proxy API 自动拦截属性修改，并触发 NoesisGUI 的更新：

const proxy = createNoesisProxy<TS_ButtonsViewMode>(viewMode);

// 任何属性修改都会自动通知 NoesisGUI
proxy.TestValue = "New Value"; 

// 支持 TArray 自动通知
proxy.items.Add(newItem);       // 自动调用 NotifyArrayPostAdd
proxy.items.RemoveAt(0);        // 自动调用 NotifyArrayPreRemove + PostRemove

// 支持 TMap 自动通知
proxy.map.Add("key", value);    // 自动调用 NotifyMapPostAdd

数据绑定流程：

TypeScript 类定义 (@uproperty, @ufunction)
↓
PuerTS 生成蓝图类
↓
TypeScript 创建实例 (UE.NewObject)
↓
绑定到 UNoesisViewModeInstance (PendingDataContext)
↓
XAML 加载完成 (XamlLoaded 回调)
↓
自动设置 DataContext
↓
数据绑定生效 (XAML Binding → ViewModel 属性)
↓
属性更新 (NoesisProxy → NotifyPropertyChanged → UI 刷新)

🎨 完美复刻官方示例

Buttons 示例

演示了基础的 MVVM 数据绑定：

基本属性绑定
命令绑定
XAML 动画与样式

QuestLog 示例

演示了复杂的数据绑定：

TArray 集合绑定 - 任务列表
复杂数据对象 - Quest 类（标题、图片、难度、描述等）
动态数据操作 - AddQuest 方法，自动触发 UI 更新

// QuestLog ViewModel 示例
class TS_QuestLogViewMode extends UE.Object {
    @uproperty(uproperty.EditAnywhere, uproperty.BlueprintReadWrite)
    Quests: UE.TArray<TS_Quest>;

    @ufunction(ufunction.BlueprintCallable)
    AddQuest(Title: string, Image: UE.Texture2D, ...): TS_Quest {
        const Quest = UE.NewObject(TS_Quest);
        Quest.Initialize(Title, Image, ...);
        
        // 使用 Proxy 自动触发 TArray 更新通知
        let Proxy = createNoesisProxy<TS_QuestLogViewMode>(this);
        Proxy.Quests.Add(Quest);
        
        return Quest;
    }
}

🚀 快速开始

环境要求：

Unreal Engine 5.4
NoesisGUI 插件 3.2+
PuerTS 插件 (最新版)

获取项目：

git clone https://github.com/No-needto-recall/NoesisDemo.git

⚠️ 重要提示：

✅ Windows 用户：克隆后，直接双击 NoesisDemo.uproject 即可打开，开箱即用。
⚠️ Mac/Linux 用户：需要手动编译 C++ 代码。

详细的安装步骤、配置说明和使用教程，请访问项目的 GitHub 仓库查看完整文档。

📚 相关链接

GitHub 仓库: https://github.com/No-needto-recall/NoesisDemo
PuerTS UClass Extends 文档: https://puerts.github.io/docs/puerts/unreal/uclass_extends/
NoesisGUI 属性变更通知: 官方文档

💡 总结

这个项目为 Unreal Engine 中的 NoesisGUI 开发提供了一种全新的思路：

✅ 使用 TypeScript 替代蓝图编写 ViewModel

✅ 完全代码化，版本控制友好，无蓝图合并冲突

✅ 全面兼容 AI 辅助开发工具，实现近乎自动化的 UI 代码生成

✅ 复刻官方示例，证明了方案的完整性和可行性

✅ 自动属性通知，支持复杂的 TArray 和 TMap 绑定

非常适合：

需要频繁迭代 UI 的项目
多人协作的团队项目
希望利用 AI 辅助开发的开发者
试图杜绝蓝图合并冲突的开发者

如果这个项目对你有帮助，请给它一个 Star ⭐！欢迎提交 PR 来复刻更多官方 UI 示例，一起完善这个方案！ 🎉

Made with ❤️ for the NoesisGUI Community

目前尚无回复

TypeScript mvvm AI