在打字稿的定义接口中添加属性

Question

I have two interface define as below.

  interface TitleFont{
      fontFamily:string;
      fontStyle:string;
      size:string; \\ need only for the title property.
      opacity:number;
   }
  interface ChartFont{
      fontFamily:string;
      fontStyle:string;
      opacity:number;
   }

Two property in my class is of defined interface type:

 class Chart  {
     title: TitleFont;
     chartTitle: ChartFont;  
  }

Size is the extra property added in TilteFont when compared to ChartFont . Is there any way to define one interface and make use of it for both the property?

Thanks in advance

Answer 1

Would not be a solution here to use inheritance and extend TitleFont from ChartFont

interface ChartFont{
    fontFamily:string;
    fontStyle:string;
    opacity:number;
}
interface TitleFont extends ChartFont {
    size:string; \\ need only for the tilte property.
}

We still have two interfaces, but in many cases we will be able to work with just a base one (ChartFont) like this

var fontSetting1 : ChartFont = Chart.title
var fontSetting2 : ChartFont = Chart.chartTitle
...
// follows common behaviour for ChartFont interface
...

And if later needed, we can up-cast:

var titleFontSetting : TitleFont = <TitleFont>fontSetting1;