迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 编程语言 > TypeScript >

在 TypeScript 中的 Implements 关键字

作者:迹忆客 最近更新:2023/03/12 浏览次数:

本文解释了 TypeScript implements 关键字。

TypeScript 类型检查

TypeScript 是 JavaScript 的超集,其中包括编译时的类型检查。编译时类型检查主要关注变量或参数值是否具有应有的形状。

这种技术在 TypeScript 中称为 Duck 类型。作为Duck类型的结果,TypeScript 编译器检查两个对象是否相同。

它确保了 TypeScript 程序中的类型安全。

类型检查检查两个给定对象是否包含相同的属性和方法。如果没有,TypeScript 编译器会抛出错误。

假设我们有三个 TypeScript 类,如下所示。

class Person {
    gender: string;
}

class Employee {
    gender: string;
    empId: string;
}

class Manager {
    gender: string;
    empId: string;
}

让我们创建新的 PersonEmployee 对象。

let person1: Person = new Person();
let employee1: Employee = new Employee();

此代码将成功编译,因为它不违反类型检查规则。

让我们尝试将 employee1 对象分配给 Person 类型的变量。

let person2: Person = employee1;

它已成功编译,因为 employee1 对象具有 Person 对象形状。因为 Person 对象应该只有一个名为 gender 的属性,所以它符合 employee1 对象。

额外的 empId 属性完全没问题。

让我们尝试将 person1 对象分配给 Employee 类型变量,如下所示。

let employee2: Employee = person1;

TypeScript Duck 类型规则不允许这样做。因此,TypeScript 编译器会引发错误。

TypeScript 编译器错误

通常,TypeScript 接口在 TypeScript 代码中扮演定义类型和协定的角色。

TypeScript 接口

TypeScript 接口为你的类提供了形状。每当 TypeScript 类派生自接口时,它必须实现接口定义的结构。

这就像一个现实世界的合同;只要一个类接受接口,它就应该遵守接口结构。接口不实现任何业务逻辑。

它只是声明属性和方法,如下所示。

interface IVehicle {
    vehicleNumber: string;
    vehicleBrand: string;
    vehicleCapacity: number;
    getTheCurrentGear: () => number;
    getFuelLevel(): string;
}

TypeScript 接口可以用作类型、函数类型、数组类型等。它可以用作类的契约,如下一节所述。

TypeScript 中的 implements 子句

TypeScript implements 关键字用于在类中实现接口。IVehicle 接口不包含任何实现级别的详细信息。

因此,IVehicle 接口可以由新的 VipVehicle 类实现。

class VipVehicle implements IVehicle {

}

VipVehicle 类与 IVehicle 接口达成契约,如上例所示。如果编译此 TypeScript 代码,它将引发错误,如下所示。

使用实现时的 TypeScript 编译器错误

TypeScript 编译器抱怨在 VipVehicle 类中没有实现三个属性和两个方法。因此,必须符合 IVehicle 接口的结构。

我们应该添加三个属性并相应地实现这两个方法。

class VipVehicle implements IVehicle {
    vehicleNumber: string;
    vehicleBrand: string;
    vehicleCapacity: number;

    getTheCurrentGear():number {
        return 3; // dummy numebr returning here for demo purposes
    }

    getFuelLevel():string {
        return 'full'; // dummy string returning here for demo purposes
    }

}

如果我们再次编译代码,它应该编译成功。

使用实现时 TypeScript 编译器成功

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 TypeScript 中返回一个 Promise

发布时间:2023/03/19 浏览次数:182 分类:TypeScript

本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便