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

定义接口

在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.mzph.cn/web/48485.shtml

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

相关文章

【22】Android高级知识之Window(三) -WMS

一、概述 这次开始到了WindowManagerService&#xff08;WMS&#xff09;&#xff0c;你可以把它看做一个WindowManager&#xff0c;只不过呢&#xff0c;属于系统服务进程&#xff08;system_server&#xff09;中的一员&#xff0c;和应用不在同一进程&#xff0c;所以涉及了…

CSS(二)——CSS 背景

CSS 背景 CSS 背景属性用于定义HTML元素的背景。 CSS 背景属性 Property描述background简写属性&#xff0c;作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把…

《程序猿学会 Vue · 基础与实战篇》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

数据结构(二叉树-1)

文章目录 一、树 1.1 树的概念与结构 1.2 树的相关术语 1.3 树的表示 二、二叉树 2.1 二叉树的概念与结构 2.2特殊的二叉树 满二叉树 完全二叉树 2.3 二叉树的存储结构 三、实现顺序结构二叉树 3.1 堆的概念与结构 3.2 堆的实现 Heap.h Heap.c 默认初始化堆 堆的销毁 堆的插入 …

2024100读书笔记|《飞花令·夏》——鲜鲫银丝脍,香芹碧涧羹,人皆苦炎热,我爱夏日长

2024100读书笔记|《飞花令夏》——鲜鲫银丝脍&#xff0c;香芹碧涧羹&#xff0c;人皆苦炎热&#xff0c;我爱夏日长 《飞花令夏&#xff08;中国文化古典诗词品鉴&#xff09;》素心落雪 编著&#xff0c;飞花令得名于唐代诗人韩翃《寒食》中的名句“春城无处不飞花”&#xf…

matlab仿真 模拟调制(下)

&#xff08;内容源自详解MATLAB&#xff0f;SIMULINK 通信系统建模与仿真 刘学勇编著第五章内容&#xff0c;有兴趣的读者请阅读原书&#xff09; clear all ts0.001; t0:ts:10-ts; fs1/ts; dffs/length(t); msgrandi([-3 3],100,1); msg1msg*ones(1,fs/10); msg2reshape(ms…

Stable Diffusion 使用详解(1)---- 提示词及相关参数

目录 背景 提示词 内容提示词 人物及主体特征 场景 环境光照 画幅视角 注意事项及示例 标准化提示词 画质等级 风格与真实性 具体要求 背景处理 光线与色彩 负向提示词 小结 常用工具 另外几个相关参数 迭代步数 宽度与高度 提示词引导系数 图片数量 背景…

Unity | Shader基础知识(第十九集:顶点着色器的进一步理解-易错点讲解)

目录 一、前言 二、网格 三、方法UnityObjectToClipPos 四、顶点着色器和片元着色器的POSITION 五、作者的碎碎念 一、前言 之前我们简单讲解过顶点着色器&#xff0c;也简单讲解了表面着色器&#xff0c;并且一起做了一些案例&#xff0c;因为顶点着色器本身是更自由一些…

【Git多人协作开发】不同的分支下的多人协作开发模式

目录 0.前言背景 1.开发者1☞完成准备工作&协作开发 1.1查看分支情况 1.2创建本地分支feature-1 1.3三板斧 1.4push推本地分支feature-1到远程仓库 2.开发者2☞完成准备工作&协作开发 2.1创建本地分支feature-2 2.2三板斧 2.2push推送本地feature-2到远程仓库…

FineBI连接MySQL5.7

一、在FineBI系统管理中&#xff0c;点击【新建数据库连接】 选择MySQL数据库 配置数据库连接&#xff0c;如下&#xff0c;其中数据库名称就是需要连接的目标数据库

【通信协议-RTCM】MSM语句(2) - RINEXMSM7语句总结(重要!自动化开发计算卫星状态常用)

注释&#xff1a; 在工作中主要负责的是RTCM-MSM7语句相关开发工作&#xff0c;所以主要介绍的就是MSM7语句相关内容 1. 相位校准参考信号 2. MSM1、MSM2、MSM3、MSM4、MSM5、MSM6和MSM7的消息头内容 DATA FIELDDF NUMBERDATA TYPENO. OF BITSNOTES Message Number - 消息编…

DML数据操作语句和基本的DQL语句

一、MySQL对数据的增删改查 1.DML语句 1.1 增加数据(INSERT) insert into 表名 (字段名,字段名,...字段名) values/value (值,值,...值) 1.1.1 新增数据的具体实现 &#xff08;1&#xff09;全字段的插入 方式一&#xff1a; insert into student (sid,sname,birthday,ssex,…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 开源项目热度排行榜(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆Coding ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测,专栏文章质量平均 93 分 最新华为OD机试目录…

Linux网络-配置IP

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 本来IP配置应该放在Linux安装完成的就要配置的&#xff0c;但是由于那个时候对Linux不怎么熟悉&#xff0c;所以单独列了一个…

JVM系列(一) -浅谈虚拟机的成长史

一、摘要 众所周知&#xff0c;Java 经过多年的发展&#xff0c;已经从一门单纯的计算机编程语言&#xff0c;发展成了一套成熟的软件解决方案。从互联网到企业平台&#xff0c;Java 是目前使用最广泛的编程语言。 以下这段内容是来自 Java 的官方介绍&#xff01; 从笔记本电…

图片变更检测

20240723 By wdhuag 目录 前言&#xff1a; 参考&#xff1a; 文件监控&#xff1a; 图片占用问题&#xff1a; 源码&#xff1a; 前言&#xff1a; 由于第三方图像处理软件不能回传图片&#xff08;正常都能做&#xff0c;这里只是不想做&#xff09;&#xff0c;只能在…

Postman接口测试工具的使用

一、postman简介 Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。作用&#xff1a;常用于进行接口测试。不需要安装。 特征&#xff1a;简单&#xff0c;实用&#xff0c;美观&#xff0c;大方。 二、Postman接口测试工具的使用 Postman不需要安…

MySQL的账户管理

目录 1 密码策略 1.1 查看数据库当前密码策略&#xff1a; 1.2 查看密码设置策略 1.3 密码强度检查等级解释&#xff08;validate_password.policy&#xff09; 2 新建登录账户 3 账户授权 3.1 赋权原则 3.2 常见的用户权限 3.3 查看权限 3.4 赋权语法 4 实例 4.1 示例1&#x…

python脚本制作循环执行命令行

python import subprocess import sysif __name____main__:ret 1while ret!0:ret subprocess.call(sys.argv[1:], textTrue)pack pip install pyinstaller pyinstaller --onefile loop.py 使用场景 使用上面生成的loop.exe调用cmd命令&#xff0c;执行失败了返回值&#xf…

项目实战二

Git 服务器 公共代码平台GitLab 配置gitlab 1.设置管理员帐号密码 2.让程序员传代码到20主机上需要配置&#xff1a; 创建用户 mark 1234.com 创建用户组devops 然后把mark 添加到devons 创建项目 http://192.168.88.20/devops/myproject.git 3.客户端操作&#x…