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.rhkb.cn/news/383034.html

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

相关文章

vue3实现在新标签中打开指定的网址

有一个文件列表&#xff0c;如下图&#xff1a; 我希望点击查看按钮的时候&#xff0c;能够在新的标签页面打开这个文件的地址进行预览&#xff0c;该如何实现呢&#xff1f; 比如&#xff1a; 实际上要实现这个并不难&#xff0c;参考demo如下&#xff1a; 首先&#x…

网络安全等级保护解决方案的主打产品

网络安全等级保护解决方案的主打产品&#xff1a; HiSec Insight安全态势感知系统、 FireHunter6000沙箱、 SecoManager安全控制器、 HiSecEngine USG系列防火墙和HiSecEngine AntiDDoS防御系统。 华为HiSec Insight安全态势感知系统是基于商用大数据平台FusionInsight的A…

浅谈C语言整型类数据在内存中的存储

1、整型类数据 C语言中的整型类数据都归类在整型家族中&#xff0c;其中包括&#xff1a;char、short、int、long、long long这5个大类&#xff0c;而每个大类中又分为两类signed和unsigned,这些都是C语言中的内置类型。以下重点基于char和int这两种类型的数据进行阐述&#x…

dsa加训

refs: OI Wiki - OI Wiki (oi-wiki.org) 1. 枚举 POJ 2811 熄灯问题 refs : OpenJudge - 2811:熄灯问题 如果要枚举每个灯开或者不开的情况&#xff0c;总计2^30种情况&#xff0c;显然T。 不过我们可以发现&#xff1a;若第i行的某个灯亮了&#xff0c;那么有且仅有第i行和第…

springcloud接入skywalking作为应用监控

下载安装包 需要下载SkyWalking APM 和 Java Agent 链接: skywalking 安装 下载JDK17&#xff08;可不配置环境变量&#xff09; 目前skywalking 9.0及以上版本基本都不支持JDK8&#xff0c;需要JDK11-21&#xff0c;具体版本要求在官网查看。 我这里使用的是skywalking9.…

德国云手机:企业移动办公解决方案

在现代商业环境中&#xff0c;移动办公已经成为一种趋势。德国云手机作为一种高效的解决方案&#xff0c;为企业提供了强大的支持。本文将探讨德国云手机如何优化企业的移动办公环境。 一、德国云手机的主要优势 高灵活性 德国云手机具有高度的灵活性&#xff0c;能够根据用户需…

链式法则和自动求导

向量链式法则 说明&#xff1a; 1.第一个式子&#xff0c; y是标量&#xff0c;u是标量&#xff0c;x是n维向量 2.第二个式子&#xff0c;y是标量&#xff0c;u是k维向量&#xff0c;x是n维向量&#xff0c;所以y对u求导是k维的行向量&#xff0c;u对x求导是k行n列的矩阵&…

Spark实时(三):Structured Streaming入门案例

文章目录 Structured Streaming入门案例 一、Scala代码如下 二、Java 代码如下 三、以上代码注意点如下 Structured Streaming入门案例 我们使用Structured Streaming来监控socket数据统计WordCount。这里我们使用Spark版本为3.4.3版本&#xff0c;首先在Maven pom文件中导…

Android中Service学习记录

目录 一 概述二 生命周期2.1 启动服务startService()2.2 绑定服务bindService()2.3 先启动后绑定2.4 先绑定后启动 三 使用3.1 本地服务&#xff08;启动式&#xff09;3.2 可通信的服务&#xff08;绑定式&#xff09;3.3 前台服务3.4 IntentService 总结参考 一 概述 Servic…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十章 Linux设备树

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

Springboot 开发之 RestTemplate 简介

一、什么是RestTemplate RestTemplate 是Spring框架提供的一个用于应用中调用REST服务的类。它简化了与HTTP服务的通信&#xff0c;统一了RESTFul的标准&#xff0c;并封装了HTTP连接&#xff0c;我们只需要传入URL及其返回值类型即可。RestTemplate的设计原则与许多其他Sprin…

spring boot(学习笔记第十四课)

spring boot(学习笔记第十四课) Spring Security的密码加密&#xff0c;基于数据库认证 学习内容&#xff1a; Spring Security的密码加密基于数据库认证 1. Spring Security的密码加密 如果用户的密码保存在数据库中是以明文保存&#xff0c;对于公司的安全将是灾难性的&…

【PyTorch】图像多分类项目部署

【PyTorch】图像多分类项目 【PyTorch】图像多分类项目部署 如果需要在独立于训练脚本的新脚本中部署模型&#xff0c;这种情况模型和权重在内存中不存在&#xff0c;因此需要构造一个模型类的对象&#xff0c;然后将存储的权重加载到模型中。 加载模型参数&#xff0c;验证模型…

NFTScan 浏览器现已支持 .mint 域名搜索功能!

近日&#xff0c;NFT 数据基础设施 NFTScan 浏览器现已支持用户输入 .mint 域名进行 Mint Blockchain 网络钱包地址的搜索查询&#xff0c; NFTScan 用户能够轻松地使用域名追踪 NFT 交易&#xff0c;为 NFT 钱包地址相关的搜索查询功能增加透明度和便利性。 NFTScan explorer…

goenv丝滑控制多版本go

安装 先装下goenv brew install goenv去 ~/.bash_profile 添加一下 export GOENV_ROOT"$HOME/.goenv" export PATH"$GOENV_ROOT/bin:$PATH" eval "$(goenv init -)"执行一下让配置生效 source ~/.bash_profile插一嘴&#xff0c;如果之前是在…

VScode 批量操作

VScode 批量操作 批量修改 按住 alt/option 键&#xff0c; 选择需要批量操作的位置 如果是多行&#xff0c;则按住 altshift 键 可以直接操作 但是有时候比如变量命名&#xff0c;可能需要递增操作的命名 需要下载插件 Increment Selection 按照1的方法多选光标之后&am…

Java | 自制AWT单词猜一猜小游戏(测试版)

目录 游戏标题 开发过程 开发想法 技术栈 代码呈现 导包 核心代码 游戏标题 探索知识的迷宫&#xff0c;体验自制AWT单词猜一猜小游戏 在数字时代&#xff0c;学习可以是多彩的&#xff0c;游戏可以是智慧的。我们自豪地推出“单词猜猜猜”是一款结合了教育与娱乐的自制…

MQTTX连接华为云IoTDA

目录 华为IoTDA平台 MQTTX连接参数的设置 物模型的构建 属性上报 基本数据格式 时戳 我以前上课都是用巴法云服务器来演示MQTT的&#xff0c;前几天因为测试工业互联网关使用了华为的IoTDA&#xff0c;觉得也不算太复杂&#xff0c;今天尝试用MQTTX连接华为云&#xff0c…

Python读取grib数据获取变量推荐姿势

前情提要 最近使用的EC和GFS预报数据给的都是grib2格式的&#xff0c;之前用惯nc格式的&#xff0c;python读取grib2数据的时候还走了些弯路&#xff0c;看到很多博客上给的教程其实不能满足我的需求&#xff0c;现在搞明白了分享一下 pygrib安装 第一个问题就是我电脑上pyg…

HTTPS 的加密过程 详解

HTTP 由于是明文传输&#xff0c;所以安全上存在以下三个风险&#xff1a; 窃听风险&#xff0c;比如通信链路上可以获取通信内容。篡改风险&#xff0c;比如通信内容被篡改。冒充风险&#xff0c;比如冒充网站。 HTTPS 在 HTTP 与 TCP 层之间加入了 SSL/TLS 协议&#xff0c…