Jupyter AI

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

📅 发表日期: 2024年9月14日

分类: 🟦TypeScript 入门

👁️阅读: --

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

接口的实现

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

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

在这个例子中,我们定义了一个名为 Person 的接口,它包含三个属性:nameage(都是基本数据类型),以及一个方法 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 接口。它包含了 nameage 属性,以及 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 代码更加规范和可维护。在接下来的章节中,我们将继续探索面向对象编程的其他特性,比如类与继承。准备好了吗?让我们一起深入了解!

🟦TypeScript 入门 (滚动鼠标查看)