TS复习----TS中的接口

目录

概念

属性接口

函数类型接口

可索引的类型

类类型接口

 接口继承


概念

接口的作用:在面向对象编程中,接口是一种规范的定义,他定义了行为和动作的规范,在程序设计里面,接口起到了一种限制和规范的作用接口定义了某一批类所需要遵守的规范,接口不关心这些类内部状态数据,也不关心这些类里的方法的实现细节,他只规定这批类里,必须提供的某些方法,提供这些方法的类就可以满足实际需求

属性接口

  • 类型检查器会查看printLabel的调用。 printLabel有一个参数,并要求这个对象参数有一个名为label类型为string的属性。
  • 需要注意的是,我们传入的对象参数实际上会包含很多属性,但是编译器只会检查那些必需的属性是否存在,并且其类型是否匹配。
function printLabel(labelledObj: { label: string }) {
    console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);
// printLabel('aaa')//错误写法,传入参数必须是以label为属性名的对象

对批量方法进行约束

只要传入的对象满足提到的必要条件,那么它就是被允许

可选属性接口 可选属性名字定义的后面加一个?符号。

//定义标准
interface FullName {
    firstName: string;//以分号结束
    secondName: string;
    age?: number

}
function printName(name: FullName) {
    //要求必须传入对象firstName secondName
    console.log(name.firstName + '----' + name.secondName);
}

printName({
    firstName: '张',
    secondName: '三'
})

函数类型接口

函数类型接口:对方法传入的参数,以及返回值进行约束,是批量的,对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配。

如果不指定类型,TypeScript的类型系统会推断出参数类型,

interface SearchFunc {
    (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function (src, sub) {
    let result = src.search(sub);
    return result > -1;
}
// let res1 = mySearch(1, 'a')
let res = mySearch('a', 'a')
console.log(res);

可索引的类型

可索引接口:对数组,对象的约束

//可索引接口
interface UserArr{
	//索引类型:value类型,此标准是索引是数字类型,value是字符串类型
    [index:number]:string
}
var arr:UserArr=['111','222']
console.log(arr[0]);//'111'

类类型接口

当一个类实现了一个接口时,只对其实例部分进行类型检查。类使用接口用implements 关键字

interface Animal {
    name: string;
    eat(str: string): void
}
class Dog implements Animal {

    constructor(public name: string) {
        this.name = name
    }
    eat() {
        console.log(`${this.name}吃骨头`);
    }
}
var d = new Dog('旺财');
d.eat()

 接口继承

和类一样,接口也可以相互继承。 一个接口可以继承多个接口,创建出多个接口的合成接口。

interface Animal {
    name: string;
    eat(): void
}
interface Person extends Animal {
    work(): void
}
class Programer {
    name: string;
    constructor(name: string) {
        this.name = name
    }
    coding(code: string) {
        console.log(`${this.name}${code}`);
    }
}
//继承类并且实现person接口,接口可以相互继承,类也可以
class Web extends Programer implements Person {
    constructor(name: string) {
        super(name)
    }
    eat() { //这个方法不写会报错,虽然我们只是继承person接口,但是这个接口是在animal标准之上建立的
        console.log(`${this.name}喜欢吃馒头`);
    }
    work() {//person接口标准
        console.log(`${this.name}喜欢敲代码`);
    }
}
var w = new Web('张三')
w.eat()//张三喜欢吃馒头
w.work()//张三喜欢敲代码
w.coding('在写ts')// 张三在写ts

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值