您的位置:首页> 前端教程> TS教程

TypeScript 接口 可选属性

2019-3-4 13:13| 作者: admin| 查看: 715| 评论: 0|来自: 蚂蚁部落

有时接口所规定的属性不是必须的,或者在满足一定条件的时候才需要。

代码实例如下:

[typescript] 纯文本查看 复制代码
interface Itest {
  webName: string;
  age?:number;
}

上面代码规定age是可选的,在属性名称后面添加一个问号(?)。

代码实例如下:

[typescript] 纯文本查看 复制代码
interface Itest {
  webName: string;
  age?:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
let myObj = {
  webName:"蚂蚁部落", 
  address:"青岛市南区"
};
func(myObj);

由于age是可选属性,所以传递的参数可以没有age属性。

[typescript] 纯文本查看 复制代码
interface Itest {
  webName: string;
  age?:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
let myObj = {
    webName:"蚂蚁部落", 
    age: "ts",
    address:"青岛市南区"
};
func(myObj);

即便age是可选属性,一旦传递了age属性,那么它也要接受约束。

[typescript] 纯文本查看 复制代码
interface Itest {
  webName: string;
  age?:number;
}
 
function func(obj: Itest) {
  console.log(obj.webName);
}
 
func({
    webName:"蚂蚁部落", 
    age: "ts",
    address:"青岛市南区"
});

参数以直接量方式传递,那么不能具有额外的属性,在TypeScript 接口简介一文已经介绍。

strictNullChecks:true的影响:

如果在tsconfig.json文件中配置"strictNullChecks":true,那么可选属性会被自动地加上| undefined。

代码实例如下:

[typescript] 纯文本查看 复制代码
interface Itest {
  webName: string;
  age?:number;
}
  
function func(obj: Itest) {
  console.log(obj.webName);
}
  
let myObj = {
    webName:"蚂蚁部落", 
    age: 5,
    address:"青岛市南区"
};
func(myObj);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/04/131650polqlr6ftmmyzdt0.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特别说明:此语法并不仅作用域接口可选属性。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部