TypeScript 学习笔记 — 接口的使用（六）
在 TS 中，使用接口（Interfaces）来定义对象的类型。可用于对类的一部分行为进行抽象以外，也常用于对对象的形状（Shape）进行描述。
(接口都是抽象的，接口中不能含有具体的实现逻辑)
一.函数接口参数
const fullName = ({ firstName, lastName }: { firstName: string; lastName: string }): string => {
return firstName + lastName;
};
// 可以约束函数中的参数，但是类型无法复用，可以通过接口进行描述
interface IFullName {
firstName: string;
lastName: string;
}
const fullName = ({ firstName, lastName }: IFullName): string => {
return firstName + lastName;
};
getFullName({ firstname: "j", lastname: "w" });
二.函数类型接口
通过接口限制函数的参数类型和返回值类型
interface IFullName {
firstName: string;
lastName: string;
}
interface IFn {
(obj: IFullName): string;
}
const fullName: IFn = ({ firstName, lastName }) => {
return firstName + lastName;
};
三.函数混合类型
interface ICounter {
(): number; // 限制函数类型
count: 0; // 限制函数上的属性
}
let fn: any = () => {
return fn.count++;
};
fn.count = 0;
let counter: ICounter = fn;
console.log(counter());
console.log(counter());
四.对象接口(最常用)
对象接口用来描述对象的形状结构,定义一个接口 Person(接口一般首字母大写)，定义一个变量 tom 类型是 Person。这样就约束了 tom 的形状必须和接口 Person 一致。
interface Person {
name: string;
age: number;
}
let p1: Person = {
name: "Tom",
age: 25,
};
确定属性
确定属性：赋值时，定义的变量的形状必须与接口形状保持一致。变量的属性比接口少或多属性都是不允许的：
interface Person {
name: string;
age: number;
}
let p1: Person = {
// 类型中缺少属性 "age"，但类型 "Person" 中需要该属性。
name: "Tom",
};
let p2: Person = {
// 多余 gender 属性
name: "Tom",
age: 25,
gender: "male",
};
可选属性
可选属性：是指该属性可以不存在。有时不需要完全匹配一个接口时，可以用可选属性，但此时仍然不允许添加未定义的属性
interface Person {
name: string;
age?: number;
}
let p1: Person = {
// 编译通过
name: "Tom",
};
let p2: Person = {
// 编译通过
name: "Tom",
age: 25,
};
let p3: Person = {
// 多余 gender 属性
name: "Tom",
age: 25,
gender: "male",
};
其他三种不太常用的 实现可选参数的方法：
- 断言案例：
interface IVeg {
color: string;
taste: string;
size: number;
}
let veg: IVeg = {
color: "red",
taste: "sour",
size: 10,
xx: 1,
} as IVeg;
- 同名接口案例：
interface IVeg {
color: string;
taste: string;
size: number;
}
interface IVeg {
xx: number;
}
let veg: IVeg = {
color: "red",
taste: "sour",
size: 10,
xx: 1,
};
- 基于当前类型，声明一个新的类型，实现参数的可选
interface IVeg {
color: string;
taste: string;
size: number;
}
interface IVegWithX extends IVeg {
xx?: number;
}
let veg: IVegWithX = {
// 此时变量的类型 为新创建的类型
color: "red",
taste: "sour",
size: 10,
xx: 1,
};
任意属性
任意属性：允许一个接口有任意的属性,使用 [propName: string] 定义了任意属性的属性名取 string 类型的值。属性值为任意值 any,
任意属性对必填属性做限制，其余的可以随意增减
interface Person {
name: string;
age?: number;
// 对象的key 可以有三种类型 string number symbol
[propName: string]: any;
}
let p1: Person = {
name: "Tom",
gender: "male",
[Symbol()]: "xxx",
};
注意：一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：
例一：任意属性的类型是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以会报错。
interface Person {
name: string;
age?: number;
[propName: string]: string;
}
let p1: Person = {
// 属性“age”与索引签名不兼容。不能将类型“number”分配给类型“string”。
name: "Tom",
age: 25,
gender: "male",
};
例二：一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，可以在任意属性中使用联合类型：
interface Person {
name: string;
age?: number;
[propName: string]: string | number;
}
let p1: Person = {
// 编译通过
name: "Tom",
age: 25,
gender: "male",
year: 2021,
};
只读属性
对象中的一些字段只能在创建时被赋值，可以使用 **readonly **定义只读属性：
例一：使用 readonly 定义的属性 id 初始化后，又被重新赋值，所以会报错。
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
let p1: Person = {
id: 89757,
name: "Tom",
gender: "male",
};
p1.id = 9527; // 无法分配到 "id" ，因为它是只读属性。
例二：只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值时：
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
let p2: Person = {
// 缺少属性 "id"，但类型 "Person" 中需要该属性。
// 第一次给对象赋值
name: "Tom",
gender: "male",
};
p2.id = 89757;
可索引接口
可索引接口可以用于标识数字索引、数组
interface IArr {
[key: number]: any;
}
const obj: IArr = {
0: 100,
"1": 10, // 数字字符串可以转为数字，所以编译会通过
2: 200,
};
let arr: IArr = [1, "d", "c"];
索引访问符
通过索引访问符来访问接口中的属性类型
interface Person {
name: string;
age: string;
address: {
num: 316;
};
[key: string]: any; // 如果写了任意类型，则取出的val 就是任意类型 any
}
type PersonName = Person["name"];
type PersonNum = Person["address"]["num"]; // 316
type PropTypeUnion = keyof Person; // 取key name | age | address
let xxx: PropTypeUnion; // 取key name | age | address
type PropTypeValueUnion = Person[keyof Person]; // 取值 string | {num:316}
// 案例：
{
interface Person {
name: string;
age: string;
address: {
num: 316;
};
[key: string]: any;
}
// 如果写了任意类型，则取出的val 就是任意类型 any
type PropTypeValueUnion = Person[keyof Person]; // 取值 any
}
类接口
描述类中的属性和方法。一个类可以实现多个接口，在类中必须实现接口中的方法和属性
interface Speakable {
name: string;
speak(): void;
}
interface SpeakChinese {
speakChinese(): void;
}
class Speak implements Speakable, SpeakChinese {
name!: string;
speak() {}
speakChinese() {}
}
接口继承
interface Speakable {
name: string;
speak(): void;
}
interface SpeakChinese {
speakChinese(): void;
}
interface SpeakEnglish extends Speakable, SpeakChinese {
speakEnglish(): void;
}
// 可以实现多个类型
class Speak implements SpeakEnglish {
name!: string;
speak(): void {
console.log("speak");
}
speakChinese(): void {
console.log("speakChinese");
}
speakEnglish(): void {
console.log("speakEnglish");
}
}
构造函数类型
interface Clazz {
new (): any;
}
function createClass(target: Clazz) {
return new target(); // 传入的是一个构造函数
}
class Animal {}
let r = createClass(Animal);
但是上述代码无法标识返回值类型，此时需要引入泛型的概念,在下一章节会详细学习泛型的概念及使用方法，
new() 表示当前是一个构造函数类型。 在使用 createClass 时动态传入类型。
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
泛型类似于函数的参数 , 泛型的声明一般采用一个大写字母来表示,
其中 T 代表 Type，在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替
interface Clazz<T> {
new (): T;
}
function createClass<T>(target: Clazz<T>): T {
return new target();
}
class Animal {}
let r = createClass(Animal);
type 和 interface 的区别
interface 通常描述 对象、类的结构比较多，可以被扩展和实现、继承、混合类型，能重名
type 描述函数的签名、联合类型、工具类型、映射条件类型，不能重名
