TypeScript接口Interface定义学习

TypeScript官网关于接口的介绍

One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural subtyping”.

TS核心原则之一就是对值所具有的“造型”进行类型检查,这就是“鸭式辨型”或“结构性子类型化”。

鸭式辨型:长得像鸭子,游泳像样子,叫声像鸭子,那么它就有可能是一只鸭子。

TyepScript区别类型是靠分辨对象的“shape”去判断,而不像java判断接口类型,只要有implements关键字就能判定该对象的接口类型。

通俗点讲:判断对象的接口类型,TypeScript就是“外貌党",是看对象的外部指标,而java则是“基因决定论”,完全由该对象是否实现(implements)相应接口决定的。

 

 //我定义的第一个TypeScript接口:该接口要求必须有一个类型为string且变量名为name

function showAnimal(animal: { name: string }):void {
    console.log("小动物名叫" + animal.name);
}

let dog = { name: "道格", age: 3 };
let pig = { name: "佩奇", age: 1 };
showAnimal(dog);
showAnimal(pig);

第一种方式太不“面向对象”了,于是我又用下面方式定义了接口,代码如下:

//定义Animal接口
interface Animal {
    name: string;
    eat(): void;
}

function showAnimal(animal: Animal): void {
    console.log("来了一只小动物,名叫" + animal.name);
    console.log("到开饭时间了,小动物开始吃饭啦=>");
    animal.eat();
}

let dog = {
    name: "道格", age: 3, eat() {
        console.log(this.name + "吃骨头,嘎嘣嘎嘣...\n");
    }
};
let pig = {
    name: "佩奇", age: 1, eat() {
        console.log(this.name + "拱白菜,哼哈哼哈...\n");
    },
    sex: "male",//子对象可以有接口未定义的字段
    habit: "sleep"
};

showAnimal(dog);
showAnimal(pig);


console.info(pig.name + "的性别为:" + pig.sex + ",最大的喜好为:" + pig.habit);
/**
 * 不像java一样只要用instanceof关键字就可以判断对象的接口类型
 * TypeScript是根据对象是否拥有接口所定义的字段属性去判断该对象的接口类型的
 **/
function instanceOfAnimal(object): object is Animal {
    return 'name' in object && "eat" in object;
}

console.info(dog.name + "是否为Animal:" + instanceOfAnimal(dog));
console.info(pig.name + "是否为Animal:" + instanceOfAnimal(pig));

执行结果如下:

PS D:\ts_demo> tsc .\MyInterface.ts 
PS D:\ts_demo> node .\MyInterface.js
来了一只小动物,名叫道格
来了一只小动物,名叫道格
到开饭时间了,小动物开始吃饭啦=>
道格吃骨头,嘎嘣嘎嘣...

来了一只小动物,名叫佩奇
到开饭时间了,小动物开始吃饭啦=>
佩奇拱白菜,哼哈哼哈...

佩奇的性别为:male,最大的喜好为:sleep
道格是否为Animal:true
佩奇是否为Animal:true

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值