数据结构的类型接口答案

【问题标题】：Type Interface for Data structure数据结构的类型接口
【发布时间】：2021-06-16 07:52:10
【问题描述】：

运行此代码片段后，我将以下数据结构打印到控制台

let editorDelta: DeltaStatic | undefined = editor?.getContents()
console.log(editorDelta)

控制台：

ops: [
  {
    attributes: {
      underline: true, 
      italic: true, 
      color: "#000fff", 
      background: "#fff000", 
      bold: true
    }, 
    insert: "this"
  },
  {
    attributes: {
      underline: true, 
      italic: true, 
      color: "#000fff", 
      background: "#fff000", 
      bold: true
    }, 
    insert: "that"
  },
]

我正在尝试为此数据创建类型变量，但遇到了一些问题。下面的界面正在工作，但我想为一些更嵌套的数据定义类型，如属性和插入分机。

interface DeltaStatic {
    ops?: object[]
}

我尝试过但不起作用的其他一些示例。

interface DeltaStatic {
  ops?: {
    attributes: {
      underline: boolean, 
      italic: boolean, 
      color: string, 
      background: string, 
      bold: boolean
    }, 
    insert: string
  }[] 
}
    
interface DeltaStatic {
  ops?: [
    {
      attributes: {
        underline: boolean, 
        italic: boolean, 
        color: string, 
        background: string, 
        bold: boolean
      }, 
      insert: string
    }
  ] 
}

【问题讨论】：

标签： typescript tsx

【解决方案1】：

界面通常描述对象的形状。假设 editorDelta 是一个具有唯一属性 ops 的对象，它具有您所描述的对象数组，这将是：

interface DeltaStatic {
  ops: {
    attributes: {
      underline: boolean;
      italic: boolean;
      color: string;
      background: string;
      bold: boolean;
    };
    insert: string;
  }[];
}

请记住，接口使用; 表示项目的结束，而不是,。

【讨论】：

哇！对不起，我的例子中的错字。我已经尝试过了，但是 VSCode 根本不喜欢它。我一直在努力让这个工作一整天，我认为应该可以正常工作。但无济于事。只是想说谢谢你的帮助，我想我需要更多地研究这个。
它的类型很长列表 'import("c:/Users/*/Documents/GitRep/*/node_modules/@types/quill/index").DeltaStatic | undefined' 不可分配给类型 'DeltaStatic |不明确的'。类型 'import("c:/Users/Christian/Documents/GitRep/lessondesigner/node_modules/@types/quill/index").DeltaStatic' 不可分配给类型 'DeltaStatic'。属性“操作”的类型不兼容。键入'DeltaOperation [] | undefined' 不能分配给类型 '{ attributes: { underline: boolean;斜体：布尔值；颜色：字符串；背景：字符串；粗体：布尔值； };插入：字符串； }[] |未定义'。
getContents() 究竟返回了什么？是数组，还是属性为ops的对象，其值为数组？
是后者，一个带有ops属性和数组值的对象Delta {ops: Array(1)}
使用我创建的原始类型，它只表示ops: 属性，我可以记录editorDelta?.ops，它返回一个对象数组。 (2) [{…}, {…}]

【解决方案2】：

type DeltaOperation = { insert?: any, delete?: number, retain?: number } & OptionalAttributes;

interface StringMap {
    [key: string]: any;
}

interface OptionalAttributes {
    attributes?: StringMap;
}

interface DeltaStatic {
    ops?: DeltaOperation[];
    retain(length: number, attributes?: StringMap): DeltaStatic;
    delete(length: number): DeltaStatic;
    filter(predicate: (op: DeltaOperation) => boolean): DeltaOperation[];
    forEach(predicate: (op: DeltaOperation) => void): void;
    insert(text: any, attributes?: StringMap): DeltaStatic;
    map<T>(predicate: (op: DeltaOperation) => T): T[];
    partition(predicate: (op: DeltaOperation) => boolean): [DeltaOperation[], DeltaOperation[]];
    reduce<T>(predicate: (acc: T, curr: DeltaOperation, idx: number, arr: DeltaOperation[]) => T, initial: T): T;
    chop(): DeltaStatic;
    length(): number;
    slice(start?: number, end?: number): DeltaStatic;
    compose(other: DeltaStatic): DeltaStatic;
    concat(other: DeltaStatic): DeltaStatic;
    diff(other: DeltaStatic, index?: number): DeltaStatic;
    eachLine(predicate: (line: DeltaStatic, attributes: StringMap, idx: number) => any, newline?: string): DeltaStatic;
    transform(index: number, priority?: boolean): number;
    transform(other: DeltaStatic, priority: boolean): DeltaStatic;
    transformPosition(index: number, priority?: boolean): number;
}

【讨论】：