12 函数与接口 📦之实现接口

在前面的章节中，我们了解了什么是接口以及它在 TypeScript 中的重要性。在这一节中，我们将深入探讨如何在 TypeScript 中实现接口，并通过示例来加深理解。接口不仅定义了对象的结构，还提供了一种契约，让我们能够更清晰地组织代码。

接口的实现

在 TypeScript 中，当我们定义一个接口后，可以通过类或者对象来实现该接口。以下是接口的基本定义：

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

在这个例子中，我们定义了一个名为 Person 的接口，它包含三个属性：name 和 age（都是基本数据类型），以及一个方法 greet。

使用类实现接口

接下来，我们可以使用类来实现这个接口。类需要提供实现接口中定义的所有属性和方法。

class User implements Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet(): string {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

在上面的代码中，User 类实现了 Person 接口。它包含了 name 和 age 属性，以及 greet 方法的具体实现。在对象被创建时，我们就可以通过：

const user = new User('Alice', 30);
console.log(user.greet());
// 输出: Hello, my name is Alice and I am 30 years old.

对象字面量实现接口

除了类，我们还可以使用对象字面量来实现接口。这种方式更加灵活，适合于创建简单的对象。

const user: Person = {
    name: 'Bob',
    age: 25,
    greet(): string {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
};

console.log(user.greet());
// 输出: Hello, my name is Bob and I am 25 years old.

在这个例子中，我们定义了一个类型为 Person 的对象 user，并实现了所有接口中的属性和方法。

可选属性与接口实现

有时，接口中的某些属性是可选的。在接口定义中，使用 ? 来标记可选属性。这样，类或者对象实现时可以选择是否提供这些属性。

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

class User implements Person {
    name: string;
    age?: number;

    constructor(name: string, age?: number) {
        this.name = name;
        if (age) {
            this.age = age;
        }
    }

    greet(): string {
        return this.age ?
            `Hello, my name is ${this.name} and I am ${this.age} years old.` :
            `Hello, my name is ${this.name}.`;
    }
}

const user1 = new User('Charlie');
const user2 = new User('David', 28);

console.log(user1.greet());
// 输出: Hello, my name is Charlie.

console.log(user2.greet());
// 输出: Hello, my name is David and I am 28 years old.

在这个示例中，age 属性被定义为可选，因此在创建 User 对象时可以不提供这个属性。

只读属性

接口还允许在属性前加上 readonly 修饰符，这表示一旦设定，属性的值就不能被修改。这在某些情况下非常有用，比如需要保护某些数据不被意外修改。

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

const user: Person = {
    id: 1,
    name: 'Eve',
    age: 22
};

// user.id = 2; // 错误：不能修改 readonly 属性

console.log(user);
// 输出: { id: 1, name: 'Eve', age: 22 }

在以上代码中，id 属性是只读的，我们不能对它进行赋值操作。

总结

在这一章中，我们详细探讨了如何在 TypeScript 中实现接口，以及与接口相关的可选属性、只读属性等特性。实现接口的能力使得 TypeScript 代码更加规范和可维护。在接下来的章节中，我们将继续探索面向对象编程的其他特性，比如类与继承。准备好了吗？让我们一起深入了解！