获取"属性X在类型错误"中缺失在Angular 2中

时间:2016-10-07 11:20:07

标签: angular typescript

获取

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。

1 个答案:

答案 0 :(得分:2)

您需要在conf类中使Tooltip属性可选。

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接口作为tooltip接口中Section属性的类型。

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