接口(Interfaces)是 TypeScript 中一个非常重要的概念,它用于定义对象的结构和类型。通过接口,我们可以定义对象应该具有的属性和方法,以确保代码的规范性和可读性。接口在面向对象编程中起着重要的作用,可以帮助我们更好地组织和管理代码。
基本概念
在 TypeScript 中,接口使用 interface
关键字进行定义。接口可以包含属性、方法或者索引签名等内容,具体语法如下:
interface InterfaceName {
property1: type;
property2: type;
method(): returnType;
}
接口只是描述了对象的结构,不包含对象的实际实现。在定义接口时,通常声明对象应该具有的属性和方法的名称和类型,但不会指定具体的值。接口可以在定义对象类型时使用,帮助我们检查代码的正确性。
定义接口
我们可以定义一个简单的接口来描述一个具有 name
和 age
属性的对象:
interface Person {
name: string;
age: number;
}
function greet(person: Person) {
return `Hello, ${person.name}!`;
}
let john: Person = { name: 'John', age: 30 };
console.log(greet(john)); // 输出:Hello, John!
在这个例子中,我们定义了一个 Person
接口,用于描述具有 name
和 age
属性的对象类型。然后我们定义了一个函数 greet
,它接受一个 Person
类型的参数,并返回一个问候语。最后创建了一个符合 Person
接口定义的对象 john
,并调用 greet
函数。
可选属性
接口的属性可以是可选的,即属性不是必须的。在定义接口时可以使用 ?
符号表示可选属性:
interface Point {
x: number;
y?: number;
}
let p1: Point = { x: 10 };
let p2: Point = { x: 20, y: 30 };
在这个例子中,Point
接口中的 y
属性是可选的,可以选择性地添加到对象中。我们可以创建一个只包含 x
属性的对象 p1
,也可以创建一个同时包含 x
和 y
属性的对象 p2
。
只读属性
接口的属性可以是只读的,即不能被修改。可以使用 readonly
关键字来将属性设置为只读:
interface Circle {
readonly radius: number;
}
let c: Circle = { radius: 5 };
c.radius = 10; // Error: Cannot assign to 'radius' because it is a read-only property.
在这个例子中,Circle
接口中的 radius
属性被标记为只读,创建对象后就无法修改其值。
函数类型
接口不仅可以描述对象的结构,也可以描述函数的结构。可以在接口中定义函数类型,并将接口作为函数的类型注释:
interface Calculate {
(x: number, y: number): number;
}
let add: Calculate = (a, b) => a + b;
console.log(add(10, 20)); // 输出:30
在这个例子中,我们定义了一个函数类型的接口 Calculate
,表示接受两个参数并返回一个数字的函数。然后我们创建了一个满足 Calculate
接口定义的箭头函数 add
,并调用该函数进行计算。
继承接口
接口可以继承其他接口,从而可以扩展接口的属性和方法。可以使用 extends
关键字来实现接口的继承:
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
let square: Square = { color: 'red', sideLength: 10 };
在这个例子中,Square
接口继承了 Shape
接口