03:TypeScript — 从初学者到专家 |对象、数组和函数

03:TypeScript — 从初学者到专家 |对象、数组和函数

级别:初学者

我们已经了解了什么是变量以及如何使用语句设置它们。我们还看到了可用于指定值类型的不同原始类型。当我们构建更有用的应用程序时,有更多可用的类型将成为我们使用 TypeScript 的基础。事实上,有很多类型可供使用,我们甚至可以构建自己的类型定义。稍后再谈。现在,让我们看看最常见的:对象、数组和函数。

对象、数组和函数

对象

我们已经了解了如何制作非结构化数据,例如一段文本、一个布尔切换或一个数字。这些都很棒,但是,我们需要更多的能力来定义复杂, 结构化的 数据。假设我们想保存一个人的信息。根据我们目前掌握的信息,它可能看起来像这样。

 const person1Name: string = "Jenifer";  
 const person1Height: number = 1.8;

这行得通,但会弄乱许多要跟踪的部分。更好的选择是使用花括号构建对象。

 const person1 = { name: "Jenifer", height: 1.8 };

对象允许收集在一组键值对中相关的结构化数据。现在 人 1 包含我们需要知道的关于一个人的一切。如果我们想访问这些数据,我们可以使用点表示法,如下所示:

 // 来自 person1 的日志名称  
 控制台.log(person1.name); //将“Jenifer”记录到控制台

对象类型

在上面的示例中,我们创建了一个名为 人 1 .它的值是一个对象。它有两个由键显示的属性: 姓名 高度 .有价值观 '詹妮弗' (一个字符串)和 1.8 (一个号码)。但是请记住,当您在变量具有与之关联的类型之前定义变量时。我们如何定义类型 人 1 ?

它与值非常相似,除了不是每个键都有一个值,而是它有一个类型,如下所示:

 常量人1:{名称:字符串;高度:数字} = ...

注意分号而不是逗号。

尝试将此添加到上面的示例中。提供类型后,名称必须始终为字符串,高度必须始终为数字。

数组 [ ]

我们还可以存储事物列表。在上面的示例中,我们可能想要存储多个人。这可以通过使用方括号创建一个数组并用逗号分隔每个实体来实现。这是一个包含 2 个人的数组。

 常量人= [人1,人2];

像对象一样,我们可以从数组中提取元素,但是,我们使用方括号和元素的索引来代替点符号。要得到 人2 从上面的列表中,我们可以这样做:

 常量 secondElement = 人[1];

数组是零索引的,这意味着第一个元素位于位置 0。这就是为什么在上面的示例中我们使用 1 而不是 2。

以下是一些数组示例以及我们如何指定它们的类型:

功能

到目前为止,我们还没有真正做太多事情。我们可以创建一个变量,也许做一些数学运算,然后我们可以记录这个变量。这算不上什么程序。为了让我们能够做任何有用的事情,我们需要一个非常强大的东西,叫做函数。函数是一个数学概念,您可能听说过它们。在数学中,您可能会这样说:

 f(x) = 3x + 1

这是一个接受值的函数, X 可以是任何数字。然后它将 x 乘以 3 并加 1。如果我们给它 10 作为 x,我们将得到 31。

这实际上被称为 纯的 功能。这只是意味着如果我们多次给它相同的输入,结果总是相同的,10 总是得到 31。

这是 TypeScript 中的相同数学函数。

让我们看一下创建函数的语法:

**功能** 乘以 3 然后加一

我们使用关键字 功能 声明一个函数。还有其他方法我们稍后会看到。 function 关键字之后是函数的名称,类似于变量的工作方式,我们不是将一个状态与名称相关联,而是与函数相关联,而是将一个工作与名称相关联。该名称应该描述该函数正在做什么,以帮助我们以后使用它。

 (X: **数字** )

然后,用括号括起来,我们可以列出多个参数作为函数的输入。每个参数都有类型,类似于使用冒号后跟类型声明变量类型的方式。多个参数用逗号分隔。

 : **数字**

括号后面是可选的返回类型。这声明了我们将要返回的事物的类型。在我们的示例中,它将是 数字 .

 {  
  **返回** (3 * x) + 1;  
 }

然后我们通过用花括号包裹函数体来创建我们的实现。在这里,我们输入另一个 范围 .我将很快解释这个术语。花括号内可以是多行。最后,我们可以使用 返回 关键字返回函数的结果。稍后我们将看到我们可以在一个函数中使用多个返回。

调用函数

一旦我们定义了一个函数,我们可以像这样调用它,传入我们想要的参数:

 常量 y1 = multiplyBy3ThenAddOne(50); // y1 将是 151  
 常量 y2 = multiplyBy3ThenAddOne(10); // y2 将是 31

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

本文链接:https://www.qanswer.top/38498/44222112

posted @ 2022-09-21 12:45  哈哈哈来了啊啊啊  阅读(83)  评论(0编辑  收藏  举报