重庆建站免费模板,wordpress4.7安装,微信如何开公众号,网站关键字优化技巧ts 接口
当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到复用的目的 示例如下
当一个对象类型被多次使用时,可以看到,很明显代码有大量的冗余
let personTom: { name: string, age?: number, sayHi(name: string): void } {name: Tom,sayHi(n…ts 接口
当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到复用的目的 示例如下
当一个对象类型被多次使用时,可以看到,很明显代码有大量的冗余
let personTom: { name: string, age?: number, sayHi(name: string): void } {name: Tom,sayHi(name: string) {console.log(Hi, ${name})}
}
let personJack: { name: string, age?: number, sayHi(name: string): void } {name: Tom,sayHi(name: string) {console.log(Hi, ${name})}
}这个时候可以将这个对象定义为接口,以进行复用,可以看到,这样代码就少了很多冗余
interface Person {name: stringage?: numbersayHi(name: string): void
}
let personTime: Person {name: time,sayHi(name: string) {console.log(hello ${name})}
}let personJohn: Person {name: John,sayHi(name: string) {console.log(hello ${name})}
}
使用interface关键字来声明接口接口名称(比如,此处的Person)可以是任意合法变量名称声明接口后,直接使用接口名称作为变量的类型因为每一行只有一个属性类型,因此,属性类型后没有分号或逗号
interface 与 type 类型别名的区别
在 TypeScript中interface和type都可以用来定义类型的别名
定义方式type别名可以用来给一个类型起新名字使用type创建类型别名。它更加灵活可以用来定义任意类型的别名包括原始类型、函数、对象等。而interface则是命名数据结构的另一种方式仅限于描述对象类型声明语法也不同于type的声明语法。使用范围与type不同interface仅限于描述对象类型。也就是说interface无法用来定义非对象类型的别名如原始类型、函数等。type则没有这些限制可以用来定义各种类型的别名。组合类型在TypeScript中type可以使用交叉类型intersection type和联合类型union type来组合多个类型而interface则不能。这意味着type可以创建更复杂和灵活的类型结构而interface在这方面的能力较弱。 总的来说type和interface在TypeScript中都可以用来定义类型的别名但它们在定义范围、组合类型的能力等方面存在明显的差异。
interface(接口)和type(类型别名)的对比
相同点: 都可以给对象指定类型不同点: - 接口只能为对象指定类型 - 类型别名,不仅可以为对象指定类型,实际上可以给任意类型指定别名
代码示例
interface Person {name: stringage?: numbersayHi(name: string): void
}type animal {name: stringage?: numbersayHi(name: string): void
}在编译器中使用,两者都可以实现对对象的类型监测
接口的继承
如果两个接口之间有相同的属性或方法,可以将公共的属性或方法,抽离出来,通过继承来实现复用 比如,这两个接口都有x,y两个属性,重复写两次,可以,但是很繁琐 interface Point2D { x: number, y: number }interface Point3D { x: number, y: number, z: number }这个时候就可以使用extends继承来让Point3D 继承Point2D 就可以省去x和y的定义了 如下 interface Point2D { x: number, y: number }// interface Point3D { x: number, y: number, z: number }interface Point3D extends Point2D { z: number } tips:
使用extends(继承)关键字实现了接口Point3D 继承Point2D继承后,Point3D 就有了Point2D的所有方法和属性了(此时Point3D 同时有x,y,z三个属性)
继承多个接口
一个接口可以继承多个接口,如下 video3D继承了video接口和3D接口 ,继承后,Video3D接口就同时拥有两个接口的所有属性和方法了
interface Point2D { x: number, y: number }
// interface Point3D { x: number, y: number, z: number }
interface Point3D extends Point2D { z: number }interface Video { video: object }interface Video3D extends Video, Point3D {lookAt(target: Point3D): void;
}let v: Video3D { video: {}, x: 10, y: 10, z: 10, lookAt: (t) { } } typescript 多态
先看下面这个例子
interface Animal { name: string; age: number; sound: () void;
} interface Dog extends Animal { breed: string;
} let myDog: Dog { name: Rex, age: 3, breed: German Shepherd, sound: () console.log(Bark!)
};在这个例子中Dog 接口继承了 Animal 接口。这意味着Dog 对象必须包含 Animal 接口定义的所有属性和方法也就是 name、age 和 sound。然后Dog 接口还定义了自己的额外属性即 breed。 这是一个很有意思的现象,因为这已经是静态类型语言才能实现多态的基础了
如上在 TypeScript 中接口继承可以实现多态性。如果你有一个函数接受 Animal 类型的参数那么你也可以传入一个 Dog 类型的参数因为 Dog 是 Animal 的子类型。这是基于 Liskov 替换原则也就是子类型必须能够替换它们的基类型。 原理有了,开始实现 //定义基类interface Animal {name: string;age: number;sound: () void;}//定义基础interface Dog extends Animal {breed: string;}let myDog: Dog {name: Rex,age: 3,breed: German Shepherd,sound: () console.log(Bark!)};//实现多态function polymorphicDisplay(a: Animal) {a.sound();}polymorphicDisplay(myDog);输出成功, js牛逼! ,不对ts牛逼
