TypeScript中Interface接口的深度探索与实践

news2024/11/15 20:38:42

定义接口

在TypeScript中,interface是一个强有力的概念,它用于定义类型签名,特别是对象的结构。接口可以用来描述对象应该有哪些属性、方法,以及这些成员的类型。它们是实现类型系统中“鸭子类型”(duck typing)的关键,这意味着如果一个对象“看起来像鸭子,走起路来像鸭子”,那么就可以认为它是一只鸭子——即如果一个对象满足某种结构,那么就可以用作那种结构的对象。

interface Person {  
    name: string;  
    age: number;  
    greet: (greeting: string) => void;  
}  
  
let person: Person = {  
    name: "Alice",  
    age: 30,  
    greet: function(greeting: string) {  
        console.log(greeting + ", " + this.name);  
    }  
};  
  
person.greet("Hello"); // 输出: Hello, Alice

在这个例子中,Person接口定义了三个成员:两个属性name和age,以及一个方法greet。实现(或说“符合”)这个接口的对象必须包含这三个成员。

可选属性

interface的可选属性是一个非常有用的特性,它允许你在定义接口时指定某些属性不是必须存在的。可选属性可以让你的接口更加灵活,适用于多种不同的应用场景,尤其是在处理可能缺少某些属性的对象时。

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

使用可选属性

alice 没有任何可选属性,bob 有 age 属性,而 charlie 则包含了所有的属性。

const alice: Person = {
    name: "Alice"
};

const bob: Person = {
    name: "Bob",
    age: 30
};

const charlie: Person = {
    name: "Charlie",
    age: 25,
    address: "123 Elm Street"
};

访问可选属性

当你访问一个可能不存在的可选属性时,TypeScript 会认为该属性可能为 undefined。这意味着你必须处理这种可能性,要么使用可空联合类型,要么使用可选链操作符(?.)

alice.age; // 编译器警告:可能为 undefined
alice.age = 22; // 错误:不能给可选属性赋值,除非已经确定它存在

if (alice.age) {
    console.log(`Alice is ${alice.age} years old.`);
}

// 或者使用可选链操作符(?.)
console.log(alice?.age); // 如果 alice.age 不存在,则输出 undefined 而不是抛出错误

只读属性

在TypeScript中,interface的只读属性(read-only properties)是一种特殊类型的属性,它限制了属性在初始化后不能被再次赋值。只读属性在定义时使用readonly关键字进行标记,这可以确保对象的某些部分在创建后保持不变,从而有助于维护数据的完整性。

基本用法

定义只读属性的基本语法是在属性名称前加上readonly关键字:

interface Point {
    readonly x: number;
    readonly y: number;
}

const point: Point = { x: 10, y: 20 };
point.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.

在这个例子中,Point接口定义了两个只读属性xy。当你尝试修改这些属性的值时,TypeScript编译器会报错,因为这些属性被声明为只读。

初始化只读属性

只读属性必须在创建对象时被初始化,或者在声明时给出默认值。如果在接口或类中声明只读属性而没有给出初始值,那么它必须在构造函数中初始化。

class Circle {
    readonly radius: number;

    constructor(radius: number) {
        this.radius = radius;
    }
}

const circle = new Circle(5);
// circle.radius = 10; // Error: Cannot assign to 'radius' because it is a read-only property.

只读数组

readonly关键字也可以应用于数组类型,创建一个只读数组。只读数组不允许添加、删除或修改元素。

let numbers: readonly number[] = [1, 2, 3];
numbers.push(4); // Error: Property 'push' does not exist on type 'readonly number[]'.
numbers.pop();   // Error: Property 'pop' does not exist on type 'readonly number[]'.

只读索引签名

你甚至可以在索引签名中使用readonly关键字,这样就可以创建一个只读的索引类型。

interface ReadonlyDictionary<T> {
    readonly [key: string]: T;
}

const dictionary: ReadonlyDictionary<string> = { key: "value" };
dictionary.key = "new value"; // Error: Cannot assign to 'key' because it is a read-only or constant property.

只读属性的使用场景

只读属性在以下场景中特别有用:

  • 当你希望某些数据在对象创建后保持不变时,比如配置或常量。
  • 当你想要保证数据的不可变性,以提高程序的并发安全性。
  • 当你想要防止不小心修改数据,尤其是在复杂的代码库中,这有助于避免潜在的bug。

额外属性

在TypeScript中,接口(interface)的额外属性检查(Excess Property Checking)是一种类型检查机制,它确保对象没有包含接口定义中不存在的额外属性。这有助于保持代码的健壮性和一致性,避免因无意中向对象添加不必要的属性而导致的潜在问题。

额外属性检查的规则

当一个对象被赋值给一个期望特定接口类型的变量或参数时,TypeScript编译器会检查对象是否包含接口中定义的所有必需属性,并且不允许对象包含任何额外的属性,除非这些属性被明确地允许。

默认情况下不允许额外的属性

假设我们有一个简单的接口定义:

interface SquareConfig {
    color?: string;
    width?: number;
}

如果我们尝试将一个具有额外属性的对象赋值给期望SquareConfig类型的变量,TypeScript将发出错误:

let config: SquareConfig = {
    color: "blue",
    width: 100,
    extra: true // 错误: Object literal may only specify known properties, and 'extra' does not exist in type 'SquareConfig'.
};

允许额外的属性

要允许对象具有超出接口定义的额外属性,可以使用索引签名或者使用特殊的never类型来覆盖默认的检查行为。

使用索引签名

通过在接口中添加一个索引签名,你可以指定额外属性的类型:

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any; // 允许任何额外属性
}
使用never类型

另一种方法是在接口中定义一个返回never类型的索引签名,然后在使用该接口的地方添加一个额外的类型,该类型允许额外的属性:

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: never; // 默认情况下禁止额外属性
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
}

// 使用类型断言来允许额外属性
const configWithExtraProps: SquareConfig & { extra: boolean } = {
    color: "blue",
    width: 100,
    extra: true
};

createSquare(configWithExtraProps); // 不会报错

函数类型接口

接口(interface)不仅可以用来定义对象的形状,包括它们应该拥有的属性和方法,还可以用来定义函数类型。通过接口来描述函数类型,可以确保函数具有预期的参数类型和返回类型,从而提高代码的健壮性和可维护性。

基本的函数类型接口

当你想要定义一个函数类型时,可以在接口中直接描述该函数的参数和返回值的类型。函数类型的接口通常不包含属性,而是直接包含一个或多个函数签名。

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

// 使用函数类型接口
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string): boolean {
    return source.search(subString) !== -1;
};

// 或者使用箭头函数
mySearch = (source: string, subString: string): boolean => {
    return source.includes(subString);
};

// 直接赋值给变量时,TypeScript 可以自动推断类型,但接口提供了显式声明
let anotherSearch: SearchFunc = (src, sub) => src.includes(sub);

在这个例子中,SearchFunc接口定义了一个函数类型,该函数接受两个字符串参数sourcesubString,并返回一个布尔值。任何符合这个签名的函数都可以被赋值给mySearch变量。

可索引的类型

接口(interface)的可索引类型(Indexed Types)允许你定义对象的索引签名,这些索引签名描述了当使用索引(如数组索引或对象的键)访问对象时,应该返回什么类型的值。这种类型定义对于数组、字典(对象字面量作为映射)或其他类似的集合非常有用。

基本语法

可索引类型通过[key: Type]: ValueType;的形式来定义,其中key是索引的类型(如numberstring),ValueType是当访问索引时返回值的类型。

数组类型

虽然你通常不会直接为数组类型定义一个接口(因为TypeScript已经内置了数组类型),但了解可索引类型如何与数组类似的结构一起工作是有帮助的。

interface NumberArray {
    [index: number]: number;
}

let myArray: NumberArray = [1, 2, 3];
// 正确,因为数组的每个元素都是数字

// myArray = ['a', 2, 3]; // 错误,因为数组中有非数字元素

注意:在实际应用中,你通常会直接使用number[]Array<number>来表示数字数组,而不是定义一个具有可索引签名的接口。

字符串索引的映射

对于对象(通常用作字典或映射),你可以使用字符串作为索引的类型。

interface StringMap {
    [key: string]: any; // 注意:这里使用any作为示例,但在实际应用中,最好指定更具体的类型
}

let myMap: StringMap = {
    'name': 'Alice',
    'age': 30,
    'city': 'New York'
};

// 访问和设置值
console.log(myMap['name']); // 输出: Alice
myMap['country'] = 'USA';

类类型

在TypeScript中,接口(interface)的类类型(Class Types)并不是指接口本身直接定义了一个类,而是指接口可以被用来描述一个类的实例应该具有哪些属性和方法。这种描述方式允许你定义一种契约(contract),任何实现了这个契约的类(即其实例符合接口定义的类)都可以被当作该接口类型的实例来使用。

基本用法

当你使用接口来描述一个类类型时,你实际上是在定义该类的实例必须遵守的形状(shape)。这意味着类的实例必须包含接口中声明的所有属性和方法。

interface Point {
    x: number;
    y: number;
    moveTo(x: number, y: number): void;
}

class SomePoint implements Point {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    moveTo(x: number, y: number): void {
        this.x = x;
        this.y = y;
    }
}

let point: Point = new SomePoint(1, 2);
point.moveTo(3, 4);

在这个例子中,Point接口定义了一个点应该具有xy两个属性,以及一个moveTo方法。SomePoint类通过实现Point接口,明确表明其实例将具有这些属性和方法。因此,SomePoint的实例可以被赋值给Point类型的变量。

类的静态部分和实例部分

需要注意的是,接口只能描述类的实例部分,即类的属性和方法(不包括构造函数)的形状。接口不能描述类的静态部分,即那些直接附加到类本身而不是其实例上的属性和方法。

如果你需要描述一个包含静态成员的类的形状,你可能需要使用类型别名(Type Aliases)配合typeof关键字来创建一个类型,该类型描述了类的静态部分。但是,这通常不是通过接口来实现的。

类的构造函数

虽然接口不能直接描述类的构造函数,但你可以通过定义一个包含构造函数签名的接口来间接地描述它。然而,这种方法并不常见,因为TypeScript通常通过类本身或类型别名来处理构造函数类型。

不过,你可以使用接口来定义一个构造函数签名,并通过实现该接口的类来间接地实现这个构造函数签名。但是,这通常是通过在类上定义一个静态方法来模拟的,因为TypeScript不允许直接通过接口来强制实现特定的构造函数。

泛型接口与类

接口还可以与泛型一起使用,以定义能够工作于多种类型上的类的形状。这使得接口更加灵活和强大。

interface GenericIdentityFn<T> {
    (arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;

在这个例子中,GenericIdentityFn是一个泛型接口,它描述了一个接受一个类型参数T的函数,该函数接受一个T类型的参数并返回相同类型的值。然后,我们定义了一个泛型函数identity,它实现了GenericIdentityFn接口(对于任何类型T)。最后,我们创建了一个GenericIdentityFn<number>类型的变量myIdentity,并将其初始化为identity函数的一个实例(这里我们隐式地指定了Tnumber)。

接口的继承

在TypeScript中,interface支持继承,这是一种非常强大的特性,它允许你创建新的interface,这些interface会继承现有interface的属性和方法。继承在interface中的工作方式与类的继承相似,但有一些关键的不同点,尤其是interface可以多重继承,而类不可以。

继承单一interface

你可以从一个interface继承来扩展或覆盖已有的类型定义。假设你有两个interface,一个描述了一个简单的Shape,另一个描述了一个更具体的Rectangle

interface Shape {
    color: string;
}

interface Rectangle extends Shape {
    width: number;
    height: number;
}

let rect: Rectangle = { color: "blue", width: 10, height: 5 };

在这个例子中,Rectangle interfaceShape interface继承了color属性,并添加了自己的widthheight属性。

多重继承

interface的一个强大特性是它们可以继承多个interface。这意味着你可以组合多个不同特性的interface到一个新的interface中:

interface Labelled {
    label: string;
}

interface Sized {
    size: number;
}

interface LabelledSized extends Labelled, Sized {
    // 新的接口包含label和size属性
}

let box: LabelledSized = { label: "Box", size: 100 };

添加新成员

在继承interface时,你可以添加新的成员,也可以覆盖已有的成员,但不能改变成员的类型签名。例如,你不能在继承的interface中改变一个方法的参数列表或返回类型。

interface Printable {
    print(): void;
}

interface EnhancedPrintable extends Printable {
    print(format: string): void; // 错误:不能改变已有成员的类型签名
}

正确的做法是添加一个重载,或者创建一个新方法:

interface EnhancedPrintable extends Printable {
    print(format?: string): void;
}

与类的交互

interface可以被类实现(implements),这样类就必须提供interface中所有成员的实现。同样,interface可以继承自类的公共成员,但不能继承其实现细节:

class Base {
    public baseMethod(): void {
        // ...
    }
}

interface DerivedFromBase extends Base {
    derivedMethod(): void;
}

class DerivedClass implements DerivedFromBase {
    baseMethod(): void {
        // 实现baseMethod
    }
    derivedMethod(): void {
        // 实现derivedMethod
    }
}

在上面的例子中,DerivedFromBase interface继承了Base类的baseMethod方法签名,然后DerivedClass实现了这两个方法。

接口继承类

在TypeScript中,接口(Interface)继承类(Class)的概念并不是直接的继承关系,而是指接口可以“借用”类的公共成员(属性和方法)来扩展自身的定义。这在TypeScript中被称为“从类中提取接口”,或者说是“从类中继承接口”。

从类中继承接口

当你想从一个类中提取公共的成员定义到接口中,以便其他类可以共享这些成员的签名,你可以创建一个接口并使用类名作为接口定义的一部分。TypeScript会自动分析类的公共成员并将它们添加到接口中。注意,只有类的公共(public)、受保护(protected)和声明的(declare)成员会被包含在接口中。

示例:

假设你有一个如下的类:

class BaseClass {
    public prop: string;
    protected method(): void {
        // 方法实现
    }
}

你可以在另一个文件或同一文件中定义一个接口,该接口将“继承”或“借用”BaseClass的公共和受保护成员:

interface DerivedFromBaseClass extends BaseClass {}

现在,DerivedFromBaseClass接口将包含prop属性和method方法的签名。然后,你可以使用这个接口来定义新的类,这些类将自动拥有BaseClass的公共和受保护成员的签名:

class NewClass implements DerivedFromBaseClass {
    prop: string;
    method(): void {
        // 实现方法
    }
}

注意点

  1. 实现与继承的区别

    • 当一个类实现一个接口时,它必须提供接口中所有成员的具体实现。
    • 类的继承关系中,子类可以继承父类的实现,而不仅仅是签名。
  2. 成员访问修饰符

    • 接口中的成员默认是公共的,即使在类中它们可能是受保护的或私有的。
    • 如果类中的成员是私有的(private),它们不会被包含在从类中提取的接口中。
  3. 静态成员

    • 类的静态成员不会被包含在从类中提取的接口中,因为接口主要用于描述对象的结构,而静态成员不属于对象实例。
  4. 构造函数

    • 类的构造函数不会被包含在从类中提取的接口中,因为接口不能描述构造函数签名。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1946854.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

小试牛刀-区块链WalletConnect协议数据解密

目录 1.编写目的 2.工作原理 3.分析过程 3.1 websokcet连接 3.2 连接后的消息 3.3 获取sym_key 3.4 解密数据 Welcome to Code Blocks blog 本篇文章主要介绍了 [WalletConnect协议数据解密] ❤博主广交技术好友&#xff0c;喜欢文章的可以关注一下❤ 1.编写目的 最近在…

<HMI><汇川>在汇川IT7000系列的HMI(触摸屏)中,如何为你的画面设置全局样式?

前言 汇川的HMI软件是使用了Qt来编写的,因此在汇川的HMI程序编写过程,是支持使用qt的样式来自定义部件样式的,即qss格式。 概述 汇川的软件本身提供三个系统的style样式,我们可以直接使用,但是,如果系统提供的样式不符合你的需求,那么你可以对其进行修改,或者自己新建…

计算机网络-配置路由器ACL(访问控制列表)

配置访问控制列表ACL 拓扑结构 拓扑结构如下&#xff1a; 要配置一个ACL&#xff0c;禁止PC0访问PC3&#xff0c;禁止PC4访问PC0&#xff0c;其它正常。 配置Router0 配置接口IP地址&#xff1a; interface fastethernet 0/0 ip address 192.168.1.1 255.255.255.0 no shu…

MongoDB教程(二十二):MongoDB固定集合

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、固定集…

基于JSP的课程思政元素收集遴选系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; JSPJavaBeansServlet 工具&#xff1a; IDE&#xff08;如Eclipse或IntelliJ IDEA&#xff…

vue上传Excel文件并直接点击文件列表进行预览

本文主要内容&#xff1a;用elementui的Upload 组件上传Excel文件&#xff0c;上传后的列表采用xlsx插件实现点击预览表格内容效果。 在项目中可能会有这样的需求&#xff0c;有很多种方法实现。但是不想要跳转外部地址&#xff0c;所以用了xlsx插件来解析表格&#xff0c;并展…

基于FPGA + Qt + OpenCv的人脸考勤系统

一:界面设计 客户端界面设计: 服务端界面设计: 简介:首先服务端在注册界面先注册人脸,然后客户端界面进行人脸识别,将人脸识别的图像发送给服务端以后,服务端在图像数据库里寻找人脸比对,若有数据就将查询到的个人信息发送给客户端,并在客户端显示,查询界面是用来查…

Hadoop、Hive、HBase、数据集成、Scala阶段测试

姓名&#xff1a; 总分&#xff1a;Hadoop、Hive、HBase、数据集成、Scala阶段测试 一、选择题&#xff08;共20道&#xff0c;每道0.5分&#xff09; 1、下面哪个程序负责HDFS数据存储&#xff08; C &#xff09; A. NameNode B. Jobtracher C. DataNode D. Sec…

机器学习数学基础(2)--最大似然函数

声明&#xff1a;本文章是根据网上资料&#xff0c;加上自己整理和理解而成&#xff0c;仅为记录自己学习的点点滴滴。可能有错误&#xff0c;欢迎大家指正。 在机器学习和统计学领域中&#xff0c;似然函数&#xff08;Likelihood Function&#xff09;是一个至关重要的概念。…

苍穹外卖跟练项目前端localhost打不开页面启动nginx报错[alert] could not open error log file问题解决

一、安装路径为纯英文 查看自己的安装路径是否为纯英文环境&#xff0c;刚开始下载的资料包是有中文路径的&#xff0c;要将资料包中的nginx-1.20.2文件夹复制一份然后粘贴到一个新建的纯英文的目录&#xff0c;我这里装到的是 D:\Program Files\nginx-1.20.2 二、删掉logs文件…

解决Pycharm找不到conda可执行文件

解决&#xff1a; 在 ‘Conda 可执行文件’ 的输入框里面&#xff0c;找到并选中 anaconda\library\bin 路径下的“ conda.bat ” ,再点击‘ 加载环境 ’&#xff0c;即可出现 ‘ 使用现有环境 ’ 的输入框&#xff0c;如图所示。

java8函数式编程学习(二):optional,函数式接口和并行流的学习

简介 java8函数式编程中optional的简单使用&#xff0c;函数式接口的了解&#xff0c;并行流的使用。 optional 可以更优雅的来避免空指针异常。类似于包装类&#xff0c;把具体的数据封装到optional对象内部&#xff0c;然后使用optional的方法去操作封装好的数据。 创建o…

Linux shell编程学习笔记67: tracepath命令 追踪数据包的路由信息

0 前言 网络信息是电脑网络信息安全检查中的一块重要内容&#xff0c;Linux和基于Linux的操作系统&#xff0c;提供了很多的网络命令&#xff0c;今天我们研究tracepath命令。 Tracepath 在大多数 Linux 发行版中都是可用的。如果在你的系统中没有预装&#xff0c;请根据你的…

四、GD32 MCU 常见外设介绍 (7) 7.I2C 模块介绍

7.1.I2C 基础知识 I2C(Inter-Integrated Circuit)总线是一种由Philips公司开发的两线式串行总线&#xff0c;用于内部IC控制的具有多端控制能力的双线双向串行数据总线系统&#xff0c;能够用于替代标准的并行总线&#xff0c;连接各种集成 电路和功能模块。I2C器件能够减少电…

Optima: 一个用于 Tapestri 平台的单细胞多组学数据分析的开源 R 包

分子条形码技术的最新进展使得在单细胞水平进行下一代转录组测序成为可能&#xff0c;例如10 Genomics Chromium和DropSeq。此外&#xff0c;CITE-seq 的出现使得可以在对单个细胞进行转录组分析的基础上同时对表面蛋白进行分析。同时&#xff0c;为了表征 DNA 和蛋白质谱&…

Harmony Next -- 图片选择库:宫格展示、全屏预览

hm_image_select_view OpenHarmony三方库中心仓&#xff1a;https://ohpm.openharmony.cn/#/cn/detail/image_select_view 介绍 Harmony Next 图片选择库&#xff0c;可设置最大选择数量、单行显示数量、横向竖向间隔&#xff1b;点击图片后全屏预览 软件架构 Harmony nex…

云计算复习--虚拟化技术

文章目录 虚拟化技术定义与原理虚拟机监视器&#xff08;VMM&#xff09;虚拟化技术服务器虚拟化存储虚拟化网络虚拟化应用虚拟化 关键技术新型虚拟化技术发展进展作业 虚拟化技术定义与原理 定义&#xff1a;虚拟化技术是一种将计算机物理实体&#xff08;如服务器、存储设备…

NOIP图论 最小生成树——Prim算法(详细图解)

最小生成树的概念 经典题目 prim算法简介 prim算法解析 &#xff08;详细图解&#xff09; 代码实现 代码实战 最小生成树的概念 在一给定的无向图G (V, E) 中&#xff0c;(u, v) 代表连接顶点 u 与顶点 v 的边&#xff0c;而 w(u, v) 代表此的边权重&#xff0c;若存在 …

AI绘画进阶工具 ComfyUI 新版来啦!操作界面详解!取消悬浮面板,自带工作流管理功能!(附安装包)

大家好&#xff0c;我是画画的小强 在 7 月初的一次更新中&#xff0c;ComfyUI 官方推出了 Beta 版 UI&#xff0c;取消了原本的悬浮面板&#xff0c;还新增了工作流管理功能&#xff0c;整体使用体验比之前好了很多。今天就为大家详细介绍一些新版 UI 的特点和用法。 一、启…

GraphRAG + GPT-4o mini 低成本构建 AI 图谱知识库

更好的效果&#xff0c;更低的价格&#xff0c;听起来是不是像梦呓&#xff1f; 限制 首先&#xff0c;让我们来介绍一个词&#xff1a;RAG。 简单来说&#xff0c;RAG&#xff08;Retrieval-Augmented Generation&#xff0c;检索增强生成&#xff09; 的工作原理是将大型文档…