GUI 数据结构与绑定定义 - TypeScript 接口解析 - 常规

TypeScript 中的 GUI 数据结构与绑定定义

本文将详细解析 TypeScript 中用于定义 GUI 数据结构和绑定机制的接口。

1. GUIData 接口

interface GUIData {
    name: string;
    attributes?: {
        [name: string]: string | number;
    };
    children?: GUIData[];
}

接口 GUIData 定义了 GUI 数据结构，包含以下属性：

name: 字符串类型，表示 GUI 元素的名称。
attributes: 可选属性，包含一组键值对，键为字符串类型，值可以是字符串或数字类型，用于存储 GUI 元素的属性信息。
children: 可选属性，是一个 GUIData 数组，用于存储子 GUI 元素。

2. GUIBind 接口

interface GUIBind<T extends string> {
    event: string;
    selector?: string;
    action: T;
}

接口 GUIBind 定义了 GUI 绑定的数据结构，包含以下属性：

event: 字符串类型，表示触发的事件类型。
selector: 可选属性，字符串类型，表示事件触发的目标选择器。
action: 泛型 T，必须是字符串类型，表示事件触发的动作类型。

3. GUIBindDefinition 接口

interface GUIBindDefinition<T> {
    drag: {
        attributes: {
            [name: string]: 'x' | '-x' | 'y' | '-y';
        };
        targetSelector: string;
    };
    show: {
        name: T;
        allowMultiple?: boolean;
    };
    remove: {
        targetSelector: string;
    };
    sendMessage: {
        messageName: string;
        messageData?: string[];
    };
    clipboardWrite: {
        targetSelector: string;
        attributeName: string;
    };
}

接口 GUIBindDefinition 定义了一组 GUI 绑定的定义，包括以下属性：

drag: 包含一组键值对，键为字符串类型，值只能是 'x'、'-x'、'y'、'-y' 四种，用于定义拖拽操作的方向。
show: 包含一个 name 属性，必须是泛型 T，表示显示操作的名称，以及一个可选的 allowMultiple 属性，布尔类型，用于表示是否允许同时显示多个元素。
remove: 包含一个 targetSelector 属性，字符串类型，表示移除操作的目标选择器。
sendMessage: 包含一个 messageName 属性，字符串类型，表示发送的消息名称，以及一个可选的 messageData 属性，字符串数组类型，用于存储发送的消息数据。
clipboardWrite: 包含一个 targetSelector 属性，字符串类型，表示目标选择器，以及一个 attributeName 属性，字符串类型，表示要写入到剪贴板的属性名称。

4. GUIBindTypeMap 类型

declare type GUIBindTypeMap<T> = {
    [key in keyof GUIBindDefinition<T>]: GUIBind<key> & GUIBindDefinition<T>[key];
};

类型 GUIBindTypeMap<T> 定义了一组 GUI 绑定的类型，是一个键值对集合，键为 GUIBindDefinition<T> 的键，值为 GUIBind 类型和 GUIBindDefinition<T> 的值的交集。

5. GUIBindTypes 类型

declare type GUIBindTypes<T> = GUIBindTypeMap<T>[keyof GUIBindTypeMap<T>];

类型 GUIBindTypes<T> 定义了 GUI 绑定的类型，是 GUIBindTypeMap<T> 中值的联合类型。

6. GUIConfigItem 接口

interface GUIConfigItem<T extends string> {
    display?: boolean;
    bindings?: GUIBindTypes<T>[];
    data: string | GUIData;
}

接口 GUIConfigItem<T> 定义了一个 GUI 配置项的数据结构，包含以下属性：

display: 可选属性，布尔类型，表示是否显示该配置项。
bindings: 可选属性，GUIBindTypes<T> 数组类型，用于存储该配置项的绑定信息。
data: 字符串类型或 GUIData 类型，表示该配置项的数据。

7. GUIConfig 类型

declare type GUIConfig<T extends string, U extends T> = {
    [name in T]: GUIConfigItem<U>;
};

类型 GUIConfig<T, U> 定义了一个 GUI 配置的数据结构，是一个键值对集合，键为泛型 T，值为 GUIConfigItem<U> 类型。

总结

这些接口为构建灵活、可扩展的 GUI 系统提供了基础，可以方便地定义和管理 GUI 元素的数据结构、绑定信息和配置信息。