深入理解TypeScript——接口

1,限定属性

对象限定

这个输入必须只有string类型的name属性,否则报错。

/*对象限制*/
function sayName1(obj: {
     
      name: string }) {
    
    
	console.log("我的名字叫:" + obj.name);
}
sayName1({
    
    name: "张三"})

效果:

我的名字叫:张三

接口限定

功能同上。

interface People {
    
    
	name: string
}
function sayName2(obj: People) {
    
    
	console.log("我的名字叫:" + obj.name);
}
sayName2({
    
    name: "李四"})

效果:

我的名字叫:李四

一些写法

可选的
没有也行。

作为一个类型,会有代码提示。

interface People {
    
    
	name: string
	age?:number
}

只读的
这是属性的通用限定

interface People {
    
    
	readonly id:number
	name: string
	age?:number
}

3,限定其他

函数类型

可以限定函数的参返。

参数名没有要求,但类型需要一致。

interface sayName {
    
    
	(obj: {
    
     name: string }): void
}
let a: sayName
a = function (s: {
     
      name: string }): void {
    
    
	console.log(s.name)
}

数组类型

可以限定数组的值类型。

interface MyStringArray {
    
    
	[index: number]: string;
}

let myArray: MyStringArray;
myArray = ["AAA", "BBB"];

let myStr: string = myArray[0];

4,限定类

简单使用

一个类实现一个接口,必须具有其所有的属性和方法。

interface User {
    
    
	name:string
	sayName():void
}
class MyUser implements User {
    
    
	name:string;
	sayName() {
    
    
		console.log(this.name)
	}
}
let a=new MyUser()
a.name="( ⊙ o ⊙ )啊!"
a.sayName()

继承关系

接口可以继承多个接口。限定会进行叠加。

接口还可以继承类。

5,糊弄编译器(不建议)

告诉编译器,这个对象属于这个接口,不用再检查了。

类型断言

断言之后,编译器不会检查有没有。

interface People {
    
    
	name: string
}
function sayName2(obj: People) {
    
    
	console.log(1)
}
sayName2({
    
    } as People)

属性限定

放宽属性的要求,编译器就不报错了。

interface People {
    
    
	name?: string
	[propName: string]: any
}
function sayName2(obj: People) {
    
    
	console.log(1)
}
sayName2({
    
    age:3})

猜你喜欢

转载自blog.csdn.net/qq_37284843/article/details/123768071