TypeScript 互动版

可选属性


  有时不是所有定义在interface中的属性都是必须的,typescript中便为我们提供了可选属性。带有可选属性的interface定义和c#语言很相似,以?紧跟变量名后边表示。如下代码:

interface SquareConfig { //定义了两个可选属性
  color?: string;  
  width?: number;
}
function createSquare(config: SquareConfig): {color: string; area: number} {//定义函数
  var newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

var mySquare = createSquare({color: "black"}); //调用函数,
document.write(mySquare.color);   //结果为: black

  大家可能会问既然是可选属性,可有可无的,那么为什么还要定义呢?对比起完全不定义,定义可选属性主要是:如果存在属性,能约束类型,而这也是十分关键的。

在右面的编辑器中去试一试吧!