目录
一、接口是什么?
ts中的接口:
关键字:interface
- 接口一方面可以在面向对象编程中表示为行为的抽象,另外可以用来描述对象的现状
- 接口就是把一些类中共有的属性和方法抽象出来,可以用来约束实现此接口的类
- 一个类可以实现多个接口,一个接口也可以被多个类实现,但一个类可以有多个子类,但只能有一个父类
- 同名的接口可以写多个,类型会自动合并
二、接口的使用
1.表示对象的形状
interface Speakable {
name: string;
speak(): void;
}
let speakMan: Speakable = {
name: 'Jerry',
speak() {}
}
2.表示行为的抽象
interface Speakable {
speak(): void;
}
interface Eatable {
eat(): void;
}
class Person implements Speakable, Eatable {
name: string;
speak(): void {
throw new Error("Method not implemented.");
}
eat(): void {
throw new Error("Method not implemented.");
}
}
3.任意属性 【key:string】: any
interface Person2 {
readonly id: number;
name: string;
[key: string]: any; // 加上后,可以添加任意的属性
}
let p: Person2 = {
id: 1,
name: '张三',
age: 12
}
4.接口的继承
namespace a {
interface Speakable {
speak(): void;
}
// 子接口通过 extends 继承父接口的属性和方法
interface SpeakChinese extends Speakable {
speakChinese(): void;
}
class Chinese implements SpeakChinese {
speakChinese(): void {
throw new Error("Method not implemented.");
}
speak(): void {
throw new Error("Method not implemented.");
}
}
}
5.readonly 在接口中的使用
namespace b {
interface Person {
readonly id: number
}
let p: Person = {
id: 1
}
console.log(p.id); // 1
// p.id = 2; // 无法分配到 "id" ,因为它是只读属性。ts(2540)
}
6.函数类型接口
namespace c {
interface Discount {
(price: number): number;
}
let discount: Discount = (price: number): number => {
return price * .8;
}
console.log(discount(10)); // 8
}
7.可索引接口
// 对数组和对象进行约束
namespace d {
interface User {
[index: number]: string; // index是自己随便写的属性
}
let user1: User = { 0: '1', 1: '2', 2: '3' };
console.log(user1); // { '0': '1', '1': '2', '2': '3' }
let user2: User = ['1', 'tom', '3'];
console.log(user2); // [ '1', 'tom', '3' ]
}
8.构造函数类型
namespace e {
class Person {
constructor(public name: string) {}
}
interface WithNameClass {
// 修饰普通函数不用加new,修饰构造函数要加new
new(name: string): any;
}
function created (cla: WithNameClass, name: string): void {
return new cla(name);
}
let res = created(Person, '张三');
console.log(res); // Person { name: '张三' }
}
9.修饰函数接口的另一种写法
namespace f {
interface Type1 {
(name: string): any;
age: number;
}
interface Type2 {
a: (name: string) => any;
}
let t: any = (name: string) => { }; // 此处修饰的是一个函数
t.age = 10;
let t1: Type1 = t;
let t2: Type2 = { a: t1 }; // 此处修饰的是对象中的属性(属性值是一个函数)
}
总结
本篇文章主要记录ts的接口,下次再见