ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

TypeScript中的类型与接口

2023-08-17 20:38:00  阅读:217  来源: 互联网

标签:TypeScript 接口 


接口

接口指定每个实体必须遵循的语法。

接口定义了接口的成员,即其属性、方法和事件。

只有成员的声明包含在接口中。派生类负责定义成员。

TypeScript编译器使用接口进行类型检查,它经常有助于建立派生类所遵循的标准结构。我们使用interface关键字来创建接口。

接口人{
名称:字符串;
年龄:数字;
}

const john:人 = {
姓名:“约翰”,
年龄:26岁
}

类型和类型别名

在TypeScript中,数据类型由其类型定义。有许多基本类型,包括字符串、布尔值和数字。

此外,TypeScript具有高级类型,其中包括一个称为astype别名的功能。

类型别名允许我们更改类型的名称,而无需真正定义新类型。因此,我们使用type关键字来制作一个新的类型别名。

类型 Person = {
名称:字符串;
年龄:数字;
}

const john:人 = {
姓名:“约翰”,
年龄:26岁
}

类型和接口之间的差异

虽然两种类型和界面在表面外观上看起来相似,但它们之间有很多差异。

例如,接口本质上是描述数据形状的一种手段,就像对象一样。

另一方面,类型是数据类型的定义,如原始、交集、联合、元组或不同类型。在本节中,我们将讨论TypeScript中接口和类型之间的一些关键区别。

声明合并

当声明两个具有相同名称的接口时,它可以合并这两个接口。

接口人{
名称:字符串
}

接口人{
年龄:数字
}

const john:人 = {
姓名:“约翰”,
年龄:26岁
}

如果使用类型关键字声明具有相同变量名的两种不同类型,TypeScript编译器将生成错误。

类型 Person = {
名称:字符串
}

// 这给出了重复标识符“人”错误
类型 Person = {
年龄:数字
}

延伸和交叉

接口可以用类型或类型别名扩展。TypeScript接口的最佳特征之一是它在扩展类时的简单性。

接口 PersonNameInterface { name: string }
接口 Person1 扩展 PersonNameInterface { age: number }

类型 PersonNameType = { name: string }
接口 Person2 扩展 PersonNameType { age: number }

class PersonClass { name = "Jhon" }
接口 Person3 扩展 PersonClass { 年龄:数字 }

由于类型或类型别名无法扩展,并且不支持此功能,因此类型无法扩展类。

然而,我们可以将多种类型组合成一种类型,形成交集类型。我们还可以组合两个接口,通过使用&关键字创建一个新的交集类型。

但值得记住的是,结合两个接口不能创建接口的交集。

类型 PersonNameType = { name: string; }
type Person1 = PersonNameType & { age: number; }

接口 PersonNameInterface { name: string; }
类型 Person2 = PersonNameInterface & { age: number; }

// 我们可以组合两个接口来创建交集类型,但不能创建交集接口
接口 PersonNameInterface { name: string; }
界面 PersonAgeInterface { age: number; }
类型 Person3 = PersonNameInterface & PersonAgeInterface

实施和联盟

类可以以相同的方式实现接口或类型别名。但请记住,类和接口是静态蓝图。

因此,他们无法实现或扩展引用联合类型的类型别名。

接口 PersonInterface {
名称:字符串;
年龄:数字;
}

类John实现了PersonInterface {
名字 = "约翰";
年龄 = 26;
}

类型 PersonType = {
名称:字符串;
年龄:数字;
};

类Ann实现PersonType {
姓名 = "Ann";
年龄 = 26;
}

type UnionType = { name: string; } | { age: number; };

// 给出一个错误
类Joel实现了UnionType {
姓名 = "Joel";
年龄= 2;
}

TypeScript的类型不支持实现。我们无法使用可用于定义变量的实现来创建类型别名。但我们可以创建联盟类型。

通过组合两个接口或类型,我们可以创建一个新的联合类型,该类型可以使用|关键字包含一个或多个类型。

类型 PersonNameType = {
名称:字符串
};

类型 PersoneAgeType = {
年龄:数字
};

类型 Person1 = PersonNameType | PersoneAgeType;

接口 PersonNameInterface {
名称:字符串
};

接口 PersoneAgeInterface {
年龄:数字
};

类型 Person2 = PersonNameInterface | PersoneAgeInterface;

其他类型

与接口不同,类型别名可用于其他类型,如原语、联合体和元组。

// 原始
类型名称=字符串;

// 对象
类型 PersonName = { name: string; };
类型 PersonAge = { y: number; };

// 工会
类型 PartialPoint = PersonName | PersonAge;

// 元组
类型 数据 = [数字,字符串];

在TypeScript中,我们只能使用类型来指定上述“其他类型”,而不是接口。

然而,我们仍然可以在界面中使用那些,如以下示例所示:

接口人{
名称:字符串
obj:{}
联合:字符串 | 数字
元组:[字符串,数字]
}

标签:TypeScript,接口,
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有