网站规划文案,百度云网站建设教程,网站前台图片设置,望野千枝叶系列文章目录
引入一#xff1a;Typescript基础引入#xff08;基础类型、元组、枚举#xff09; 引入二#xff1a;Typescript面向对象引入#xff08;接口、类、多态、重写、抽象类、访问修饰符#xff09; 第一章#xff1a;Typescript基础知识#xff08;Typescri…系列文章目录
引入一Typescript基础引入基础类型、元组、枚举 引入二Typescript面向对象引入接口、类、多态、重写、抽象类、访问修饰符 第一章Typescript基础知识Typescript介绍、搭建TypeScript环境、基本数据类型 第二章Typescript常用类型任意值any、数组Array、函数Function、元组Tuple、类型推论、联合类型 第三章Typescript基础知识类型断言、类型别名、字符串字面量类型、枚举、交叉类型 第四章Typescript基础知识类型拓宽、类型缩小 第五章TypeScript进阶知识之类类的定义、类的基本使用、类的构造函数、类的属性和方法、访问修饰符、类的继承、抽象类 第六章TypeScript进阶知识之接口(接口定义、接口属性、可索引类型、接口表示函数类型、额外的属性检查、接口继承、接口与类型别名的区别) 文章目录 系列文章目录一、接口定义二、接口属性2.1 可选属性2.2 只读属性2.3 任意属性 三、可索引类型四、接口表示函数类型五、额外的属性检查5.1 什么是额外的属性检查5.2 绕开额外的属性检查 六、接口相关的继承6.1 类实现接口6.2 接口继承接口6.3 接口继承类 七、接口与类型别名的区别 一、接口定义 TypeScript 中接口Interface是一种用来定义对象的结构和行为的类型。通过接口我们可以定义对象应该有哪些属性、属性的类型以及方法。 使用关键字 interface 来定义接口。声明接口后直接使用接口名称作为变量的类型。方法的定义和函数的定义类似包括参数和返回值类型。
二、接口属性
2.1 可选属性 带有可选属性的接口与普通的接口定义差不多只是在可选属性名字定义的后面加一个 ? 符号。 interface Person {name: string;age?: number; // 可选属性
}const p1: Person { name: Alice };
const p2: Person { name: Bob, age: 25 };可选属性的好处有2个 可以对可能存在的属性进行预定义可以捕获引用了不存在的属性时的错误
2.2 只读属性 有时候我们希望某些属性在对象创建后不能被修改可以将这些属性声明为只读属性。 通过在属性名称前面加上 readonly 关键字就可以将属性设置为只读。 interface Point{readonly x:number,readonly y:number,
}let point:Point{x:10,y:20,
}point.x100;// Error:Cannot assign to x because it is a read-only property.上述例子中声明了一个Point的接口接口中的属性 x 和 y 都是只读的然后创建了一个 point 对象类型为 Point此时我们不能再给对象中的 x 和 y 重新赋值会报错因为它们都是只读属性。 TypeScript 还提供了 ReadonlyArray 类型它与 Array 相似只是把所有可变方法去掉了确保数组创建后再也不能被修改。 let a:number[][1,2,3];
let a2:ReadonlyArraynumbera;a2[0]100;//ErrorIndex signature in type readonly number[] only permits reading.2.3 任意属性 一个接口中除了包含必选和可选属性之外还允许有其他的任意的属性这时我们可以使用 索引签名 的形式来满足上述要求。 interface Person{name:string,age?:number,//Error:Property age of type number | undefined is not assignable to string index type string.[propName:string]:string,
}let p:Person{name:Tom,age:25,gender:male,location:Shanghai
}上述例子中任意属性的值允许是 string但是可选属性 age 的值却是 numbernumber 不是 string 的子属性所以报错了。 注意1一旦定义了任意属性那么必选属性和可选属性的类型都必须是它的类型的子集 注意2一个接口中只能定义一个任意属性。如果接口中有多个类型的属性则可以在任意属性中使用联合类型。 interface Person {name: string;age?: number; // 这里age真实的类型应该为number | undefined[propName: string]: string | number | undefined;
}let person: Person {name: Echo,age: 25,gender: male
}三、可索引类型 接口可以描述具有索引签名的对象这样我们就可以通过索引来访问对象的属性。 interface StringArray {[index: number]: string;
}let myArray: StringArray [Bob, Fred];let myStr: string myArray[0];//BobTypeScript 支持两种索引签名字符串和数字。可以同时使用两种类型的索引但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number 来索引时JavaScript 会将它转换成 string 然后再去索引对象。 也就是说用 100一个number去索引等同于使用100一个string去索引因此两者需要保持一致。
四、接口表示函数类型 使用接口表示函数类型我们需要给接口定义一个调用签名。 它 就像是一个只有参数列表和返回值类型的函数 定义参数列表里的每个参数都需要名字和类型。 interface Fun{(name:string,age:number):string
}在上述例子中Fun是一个接口它表示一个接收两个参数 number 和 age参数类型都为 string并且返回值为 string 类型的函数。这样定义后我们可以像使用这个接口定义函数类型的变量了。 下面的例子创建一个函数类型的变量并将一个同类型的函数赋值给这个变量。 interface Fun{(name:string,age:number):string
}const fun:Fun(name:string,age:number){return name is age years old;
}注意对于函数类型的类型检查来说函数的参数名不需要与接口里定义的名字相匹配。 interface Fun{(name:string,age:number):string
}const fun: Fun (n: string, a: number) {return n is a years old;
};函数的参数会逐个进行检查要求对应位置上的参数类型是兼容的。 如果不想指定类型TypeScript 的类型系统会推断出参数类型因为函数直接赋值给了 Fun 类型变量。函数的返回值类型是通过其返回值推断出来的 interface Fun{(name:string,age:number):string
}const fun: Fun (n, a) {return n is a years old;
};对象里面通常有函数方法同样也可以在接口里面定义在接口里定义的函数参数、返回值在使用的时候必须按照约束传入。 interface Person {name: string;age: number;say: (message: string) void;
}let p: Person {name: Tom,age: 25,say: (message: string) {console.log(message);},
};p.say(hello);//hello五、额外的属性检查
5.1 什么是额外的属性检查 当我们使用对象字面量赋值给接口类型时TypeScript 会自动进行额外的属性检查。这意味着赋值的对象不能包含接口中未定义的额外属性否则会导致编译错误。 interface Person {name: string;
}let p:Person { name: Tome, age: 25 };//Error5.2 绕开额外的属性检查 鸭式辨型法 就是通过制定规则来判定对象是否实现这个接口。 interface Person {name: string;
}// let p:Person { name: Tome, age: 25 };function printName(person: Person) {console.log(person.name);
}let p { name: Tome, age: 25 };printName(p);printName({ name: Tome, age: 25 });//Error上面代码在参数里写对象就相当于是直接给person赋值这个对象有严格的类型定义所以不能多参或少参。而当你在外面将该对象用另一个变量p接收p不会经过额外属性检查但会根据类型推论为let p: { name: string; age: number} { name: Tome, age: 25 };然后将这个p再赋值给person此时根据类型的兼容性两种类型对象参照鸭式辨型法因为都具有name属性所以被认定为两个相同故而可以用此法来绕开多余的类型检查。 类型断言 类型断言的意义就等同于你在告诉程序你很清楚自己在做什么此时程序自然就不会再进行额外的属性检查了。 interface Person{name:string,age:number,money?:number
}let p1:Person{name:Tom,age:25,money:100,sex:0,
} as Person索引标签 interface Person{name:string,age:number,money?:number, [key:string]:any,
}let p2:Person{name:Tom,age:25,money:100,sex:0,
} 六、接口相关的继承
6.1 类实现接口
实现implements是面向对象中的一个重要概念。一般来讲一个类只能继承自另一个类有时候 不同类之间可以有一些共有的特性这时候就可以把特性提取成接口interfaces用 implements 关键字来实现。
举例门是一个类防盗门是门的子类。如果防盗门有一个报警器的功能我们可以给防盗门添加一个报警方法。这时候如果有另一个类车也有报警器的功能就可以考虑把报警器提取出来作为一个接口防盗门和车都去实现它。
interface Alarm {alert(): void;
}class Door {
}class SecurityDoor extends Door implements Alarm {alert() {console.log(SecurityDoor alert);}
}class Car implements Alarm {alert() {console.log(Car alert);}
}一个类可以实现多个接口。就好比一个车不只有报警功能还有开关车灯的功能
interface Alarm {alert(): void;
}interface Light {lightOn(): void;lightOff(): void;
}class Car implements Alarm, Light {alert() {console.log(Car alert);}lightOn() {console.log(Car light on);}lightOff() {console.log(Car light off);}
}6.2 接口继承接口
接口与接口之间可以是继承关系A接口要继承B接口的属性可以通过extends关键字继承。
通过继承子接口可以获得父接口中定义的属性和方法并可以在自身接口中添加新的属性和方法。
interface Shape {color: string;
}interface Circle extends Shape {radius: number;getArea(): number;
}const circle: Circle {color: red,radius: 5,getArea() {return Math.PI * this.radius * this.radius;}
}在上面的例子中使用 extends 关键字实现了接口 Circle 继承 Shape。继承后Circle 就有了 Shape 中的 color 属性以及自身的 radius 属性以及 getArea() 方法。
6.3 接口继承类
常见的面向对象语言中接口是不能继承类的但是在 TypeScript 中却是可以的
class Point {x: number;y: number;constructor(x: number, y: number) {this.x x;this.y y;}
}interface Point3d extends Point {z: number;
}let point3d: Point3d {x: 1, y: 2, z: 3};实际上当我们在声明 class Point 时除了会创建一个名为 Point 的类之外同时也创建了一个名为 Point 的类型实例的类型。 所以我们既可以将 Point 当做一个类来用使用 new Point 创建它的实例 class Point {x: number;y: number;constructor(x: number, y: number) {this.x x;this.y y;}
}const p new Point(1, 2);也可以将 Point 当做一个类型来用使用 : Point 表示参数的类型 class Point {x: number;y: number;constructor(x: number, y: number) {this.x x;this.y y;}
}function printPoint(p: Point) {console.log(p.x, p.y);
}printPoint(new Point(1, 2));这个例子实际上可以等价于 class Point {x: number;y: number;constructor(x: number, y: number) {this.x x;this.y y;}
}interface PointInstanceType {x: number;y: number;
}function printPoint(p: PointInstanceType) {console.log(p.x, p.y);
}printPoint(new Point(1, 2));上例中我们新声明的 PointInstanceType 类型与声明 class Point 时创建的 Point 类型是等价的。 所以回到 Point3d 的例子中我们就能很容易的理解为什么 TypeScript 会支持接口继承类了 class Point {x: number;y: number;constructor(x: number, y: number) {this.x x;this.y y;}
}interface PointInstanceType {x: number;y: number;
}// 等价于 interface Point3d extends PointInstanceType
interface Point3d extends Point {z: number;
}let point3d: Point3d {x: 1, y: 2, z: 3};上述案例中当我们声明 interface Point3d extends Point 时Point3d 继承的实际上是类 Point 的实例的类型。
所以「接口继承类」和「接口继承接口」没有什么本质的区别。
值得注意的是PointInstanceType 相比于 Point缺少了 constructor 方法这是因为 声明 Point 类时创建的 Point 类型是不包含构造函数的。另外除了构造函数是不包含的静态属性或静态方法也是不包含的实例的类型当然不应该包括构造函数、静态属性或静态方法。
换句话说声明 Point 类时创建的 Point 类型只包含其中的实例属性和实例方法
class Point {/** 静态属性坐标系原点 */static origin new Point(0, 0);/** 静态方法计算与原点距离 */static distanceToOrigin(p: Point) {return Math.sqrt(p.x * p.x p.y * p.y);}/** 实例属性x 轴的值 */x: number;/** 实例属性y 轴的值 */y: number;/** 构造函数 */constructor(x: number, y: number) {this.x x;this.y y;}/** 实例方法打印此点 */printPoint() {console.log(this.x, this.y);}
}interface PointInstanceType {x: number;y: number;printPoint(): void;
}let p1: Point;
let p2: PointInstanceType;上例中最后的类型 Point 和类型 PointInstanceType 是等价的。同样的在接口继承类的时候也只会继承它的实例属性和实例方法。
七、接口与类型别名的区别 相同点 都可以用于定义对象的结构和类型。 不同点 接口更适合用于描述真实存在的对象而类型别名更适合用于定义复杂的类型。 接口可以被其他对象实现而类型别名只是给类型起了一个别名。 两者都可以用来描述对象或函数的类型但是语法不同。 interface Point {x: number;y: number;
}interface SetPoint {(x: number, y: number): void;
}type Point {x: number;y: number;
};type SetPoint (x: number, y: number) void;与接口不同类型别名还可以用于其他类型如基本类型原始值、联合类型、元组。 // primitive
type Name string;// object
type PartialPointX { x: number; };
type PartialPointY { y: number; };// union
type PartialPoint PartialPointX | PartialPointY;// tuple
type Data [number, string];// dom
let div document.createElement(div);
type B typeof div;与类型别名不同接口可以定义多次会被自动合并为单个接口。 interface Point { x: number; }
interface Point { y: number; }
const point: Point { x: 1, y: 2 };
