标签：TypeScript 断言 示例 接口 初学者 类型 我们 友好

对 TypeScript 友好（第 2 部分）：超级友好的初学者指南

本文适用于任何试图掌握 TypeScript 世界的人。

建议阅读 “对 TypeScript 友好（第 1 部分）：超级友好的初学者指南” 在阅读本文之前。

本文将涵盖：

• 类型注释
• 类型断言
• 类型和接口的区别
• 可选属性
• 很多简单的代码示例

Photo by Aleksandar Pasaric: https://www.pexels.com/photo/yellow-banana-fruits-3310691/

所以，你回来了更多！伟大的。或者，也许你不小心在这里跌跌撞撞。这也很棒。欢迎（回来）参加聚会。

在 第1部分 ，我们专注于 类型 , 接口 和 联合类型 .在第 2 部分中，我们将更深入地研究这些主题，并为您的 TypeScript 碗添加更多成果。

这仍然是一个非常“初学者指南”，我们将保持简单，所以请高枕无忧。享受车程。

类型注释和类型断言

类型注释
首先，我想澄清一下 类型注释。

我在 第1部分 那加 细绳 , 数字 , 布尔值 或变量的任何其他类型称为 类型注释。

type annotation example

类型注解基本上说明了变量的数据类型，它们用于 强制类型检查 从编译器。

他们也 确保代码的可读性和维护更容易， 这在多人处理同一代码时特别有用。

这些注释清楚地说明了每个变量应该是哪种类型。

我们实际上不必在 TypeScript 中使用类型注释，但是使用它的意义何在？

**类型断言
** 类型断言基本上是我们告诉 TypeScript 我们知道得更好（ 呵呵呵呵 ）。

首先我们看一些例子，然后是解释。

在下面的示例中，我们有一个变量 类型断言示例 , 这是类型 未知 .因为是类型 未知 ，我们基本上可以为它分配任何值。下面，我们给它赋值 细绳 但它可能是一个 数字 , 布尔值 ， ETC。

simple type annotation

我们可以使用这种类型创建新变量，但可以 断言 新的 它们的类型（例如，变量将不是类型 未知 但会有不同的类型）。

......我有点困惑，这是什么意思？

您可以在下面看到我们创建了两个新变量 数字示例 和 布尔示例 , 两者都有类型 类型断言示例 （类型 未知 ) 但我们已经声明 ( 使用类型断言 ) 我们希望它们是类型 数字 和 布尔值 ， 分别。

type assertion ‘as’ example

我们通过像通常那样明确说明类型来做到这一点
（例如 让数字示例：数字 )

然后我们分配它类型 类型断言示例 并使用 作为 关键字后跟我们想要的类型。

......我仍然很困惑，你能添加一个“注释”来澄清这意味着什么吗？

注意：我们只能在类型具有重叠属性时进行这些类型断言。例如，不能断言 **数字** 到一个最初是类型的变量 **细绳** 因为它们不具有相同的属性。

在上面的示例中，我们使用类型断言来使新变量类型比原始类型更具体（例如 **数字** 比更具体 **任何** 或者 **未知** , 但不比 **细绳** ）。

我们还可以使用类型断言使类型更通用：

type assertion example

在上面的例子中，我们有 宠物类型 , 具有性质 名称：字符串 和 所有者名称：字符串 .我们可以创建一个新的变量 宠物类型 通过使用类型断言仅采用这些属性之一，例如， 作为宠物 .

Photo by PhotoMIX Company: https://www.pexels.com/photo/sliced-kiwi-fruits-867349/

有 二 做这些类型断言的方法，第一个显然是上面的例子，我们使用 作为 关键词。

我们可以进行类型断言的第二种方法如下：

type assertion ‘<>’ example

这是完全相同的概念，除了我们使用尖括号 <> 而不是 作为 关键词。

这两种方法的工作原理完全相同，因此请随意使用对您来说更直观的一种。

类型和接口——有什么区别？

在 第1部分 ，我说你不用太担心这两者的区别。好吧，我认为自那篇文章以来我们都成长了很多，我们已经准备好面对事实……

两个都 类型 和 接口 描述一个物体的“形状”，但是 接口必须具有对象形状 ，而一个 type 的语法更类似于 JavaScript 中的变量声明 ：

Interface needs an object shape. Type needs a variable declaration (type Y =).

如第 1 部分所述，“ 你可以有多个同名的接口，但是一旦你给一个类型一个名字，你就不能把这个名字给另一个类型或接口。”

从这个意义上说，您应该将 Type 视为一个变量——所有变量都需要唯一的名称。

**声明合并
** 有了接口，我们可以做一些叫做 声明合并。

这是 TypeScript 编译器将两个或多个具有相同名称的接口合并到一个声明中的时候。 ¹

declaration merging example

正如您在上面的示例中所看到的， 界面歌曲 被声明了两次，但每次都有不同的属性。 TypeScript 看到了这一点，并将“两个”接口合并为一个，这样 界面歌曲 两者都有 艺术家姓名 和 songName 特性。

注意：你可以有任意数量的同名接口，TypeScript 会将所有属性合并到一个接口中。

声明合并不适用于类型 （我们甚至不能记住两种同名的类型……）。

Photo by Oleksandr Pidvalnyi: https://www.pexels.com/photo/opened-coconut-on-sands-322483/

**交叉口类型
** 交叉类型是当我们从多种类型中创建一个新类型时。

这听起来很像 声明合并 ， 正确的？是的，但是 Intersection 类型有不同的名称。

在下面的示例中，我们创建类型 专辑 按合并类型 艺术家 和 歌曲 成一种新的类型。

Intersection type example

注意这里的语法：我们使用 & 创建交叉点类型。

注意：交集类型与联合类型具有相似的语法，除了它们使用和 _ &_ 运算符而不是 or _|_ 操作员。新类型 专辑 是一个组合 艺术家 和 歌曲 所以 不得不 包括每个的所有属性 ：

Intersection example

如上例所示，我们可以通过组合两种类型来创建 Intersection 类型。

我们也可以通过组合两个接口来创建Intersection类型，但是我们不能通过组合两种类型来创建Intersection接口：

error message trying to create an Intersection interface from two types

完全相同的逻辑适用于联合类型：

error when trying to create a Union interface from two types

**元组
** 元组只能声明为类型而不是接口（请记住，接口需要具有对象形状）。

如果元组位于对象内部，则只能在接口中使用元组。

tuple examples with Type and Interface

随着您获得更多使用 TypeScript 的经验，您会遇到类型和接口之间的更多差异（可能我什至还不知道），但这绝对是现在拥有的坚实知识库。

Photo by Elaine Bernadine Castro: https://www.pexels.com/photo/hand-holding-a-slice-of-watermelon-with-blue-swimming-pool-water-in-the-background-2403850/

可选属性

下面是对 TypeScript 中简单类型的复习。任何具有这种类型的变量都必须遵循 精确的 相同的形状。

a simple Type in TypeScript

可选属性正是锡上所说的。简单的添加 ? 一个或多个属性将使它们成为可选的。

optional property in TypeScript

在上面的例子中，我们添加了 国籍 其次是 ?

这意味着 国籍 是可选的，我们不必为具有类型的变量提供此值 人 .

optional property example

看？我们创建了一个名为 泰德 并为其分配类型 人 当我们不包括 国籍 价值。问号的力量 钱币 .

注意：您可以将问号添加到任意数量的属性中。

感谢您加入我的 TypeScript 之旅。我希望它对你来说是“富有成果的”。

( 是的，我知道椰子不是水果…… )

请继续关注第 3 部分，如果您喜欢这篇文章，请随时从“与...友好相处”系列中查看更多信息：

对终端友好：超级友好的初学者指南

使用 git 变得友好：一个超级友好的初学者指南

使用 TypeScript（第 1 部分）：超级友好的初学者指南

不断挑战自己并记住，不舒服意味着你正在成长。

Fingers typing on a laptop

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/2040/26213103

标签：TypeScript,断言,示例,接口,初学者,类型,我们,友好
来源： https://www.cnblogs.com/amboke/p/16641581.html

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