angular - 在 Angular 2 中获取 "Property X is missing in type error"

Question

获取

Property 'conf' is missing in type '{ text: string; label: string; }'.

来自这个对象:

{
  //...
  digitalSkills: {
    skills: [
      {
        name: '...',
        tooltip: {
          text: '...',
          label: '...'
        }
      },
      {
        name: '...',
        tooltip: {
          text: '...',
          label: '...'
        }
      }
    ],
     //...
  }
  //...
}

从这个设置:

export interface TooltipConfig {
  text:string;
  label:string;
  conf?:string;
}

export class Tooltip implements TooltipConfig {
  text:string;
  label:string;
  conf:(any);

  constructor(c:TooltipConfig) {
    this.text = c.text;
    this.label = c.label;
    c.conf && (this.conf = c.conf);
  }
}

export interface Section {
  //...
  digitalSkills?:{
    skills?:{
      name:string,
      tooltip:Tooltip
    }
}

我的问题是我在其他类中以相同的方式声明了可选参数，它们似乎工作得很好。我不明白这里出了什么问题以及如何解决它。

注意:我并不是想通过将(可选的？)参数添加为空字符串来轻松修复。我想知道造成这种情况的原因和一般原则。

尝试正确理解和学习 TypeScript。

Answer 1

您需要在 Tooltip 类中将 conf 属性设为可选。

export class Tooltip implements TooltipConfig {
  text:string;
  label:string;
  conf?:(any);

  constructor(c:TooltipConfig) {
    this.text = c.text;
    this.label = c.label;
    c.conf && (this.conf = c.conf);
  }
}

或者您需要使用TooltipConfig接口(interface)作为Section接口(interface)中tooltip属性的类型。

export interface Section {
  //...
  digitalSkills?:{
    skills?:{
      name:string,
      tooltip:TooltipConfig 
    }
}

或者您可以在对象创建中实例化 Tooltip 类:

{
  //...
  digitalSkills: {
    skills: [
      {
        name: '...',
        tooltip: new Tooltip({
          text: '...',
          label: '...'
        })
      },
      {
        name: '...',
        tooltip: new Tooltip({
          text: '...',
          label: '...'
        })
      }
    ],
     //...
  }
  //...
}

看看这个sample code .