对 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