当前位置：首页 > news >正文

三小时快速上手TypeScript之接口

news 2025/4/29 8:47:57

在TypeScript（TS）中，接口（Interface）是一种非常重要的概念，它用于定义对象的结构，包括对象中必须包含哪些属性以及这些属性的类型。接口的作用主要有以下几个方面：

1. 接口的定义

接口使用 interface 关键字定义，语法如下：

interface Person {name: string;age: number;sayHello(): void;
}

在这个例子中，Person 接口定义了一个对象的结构，要求对象必须包含以下内容：

name 属性，类型为 string。
age 属性，类型为 number。
sayHello 方法，返回类型为 void。

2. 接口的作用

（1）类型检查

接口的主要作用是为对象提供类型检查。当你使用接口定义的类型时，TypeScript 会检查对象是否符合接口的结构。例如：

let person: Person = {name: "Alice",age: 25,sayHello() {console.log("Hello, my name is " + this.name);}
};

如果对象缺少接口中定义的属性或方法，或者类型不匹配，TypeScript 会报错：

let wrongPerson: Person = {name: "Bob" // 缺少 age 和 sayHello
}; // Error: Type '{ name: string; }' is missing the following properties from type 'Person': age, sayHello

（2）可选属性

接口中可以定义可选属性，使用 ? 表示。例如：

interface Person {name: string;age?: number; // 可选属性
}

在这种情况下，age 属性可以存在，也可以不存在：

let person1: Person = {name: "Alice"
}; // 合法let person2: Person = {name: "Bob",age: 30
}; // 也合法

（3）只读属性

接口中可以使用 readonly 关键字定义只读属性，这些属性只能在对象创建时赋值，之后不能修改：

interface Person {readonly name: string;age: number;
}

let person: Person = {name: "Alice",age: 25
};
person.age = 30; // 合法
person.name = "Bob"; // Error: Cannot assign to 'name' because it is a read-only property.

（4）索引签名

接口可以定义索引签名，表示对象可以通过某种类型的键来访问值。例如：

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

这表示 StringArray 是一个数组，其索引是数字类型，值是字符串类型：

let arr: StringArray = ["a", "b", "c"];
console.log(arr[0]); // 输出 "a"

（5）函数类型接口

接口也可以定义函数的类型，包括参数和返回值。例如：

interface SearchFunc {(source: string, subString: string): boolean;
}

使用时：

let mySearch: SearchFunc = function (source: string, subString: string): boolean {return source.search(subString) !== -1;
};

（6）继承接口

接口可以继承其他接口，使用 extends 关键字。例如：

interface Person {name: string;age: number;
}interface Employee extends Person {department: string;
}

Employee 接口继承了 Person 接口的所有属性，并添加了一个 department 属性。

3. 接口的实现

虽然接口本身不能直接实例化，但可以通过类来实现接口。例如：

class Student implements Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}sayHello() {console.log("Hello, my name is " + this.name);}
}