Typescript 类型终极指南

Posted on by

Typescript 是一种建立在 Javascript 之上的强类型语言。因此，当我们编写代码时，必须在 Typescript 中定义类型，而不是像通常在 Javascript 中那样进行推断。

在本指南中，我们将深入探讨 Typescript 中的类型如何工作，以及如何充分利用它们。如果您对 Typescript 完全陌生，请从我们的制作您的第一个 Typescript 项目的指南开始。

Typescript 中的基本类型#

Javascript有许多不同的类型。如果您想了解类型在 Javascript 中的工作方式，请在此处阅读我们的指南。在本指南中，我们将介绍您可以在 Typescript 中使用的主要类型。了解 Javascript 类型会很有用，但为简单起见，下面列出了您最常看到的最基本的 Typescript 类型：

  • undefined– 当代码中未定义或不存在某些内容时。
  • any – 指任何类型 – 根本不强制执行类型。
  • enum – 一个枚举 –有关枚举的更多信息，请参见此处。
  • number – 介于 -2^53 – 1 和 2^53 – 1 之间的数字，即 1。
  • string– 字符组合，即测试。
  • boolean– 真或假。
  • bigint – 一个大于 253 – 1 的数字。
  • symbol– 一个完全唯一的标识符。
  • function– 自我解释 – 一个功能。
  • object – 一个对象或数组
  • never – 在函数中使用 – 用于当函数从不返回值并且只抛出错误时。
  • void – 在函数中使用 – 当函数从不返回值时。

Typescript 中的自定义类型

Typescript 还允许我们定义自己的自定义类型。你可以在这里了解。

Typescript 中的类型基础#

现在我们已经概述了 Typescript 使用的所有基本类型，让我们看看它们是如何工作的。首先，让我们从语法基础开始。

在变量中使用 Typescript 类型#

Typescript 中变量类型的语法相对简单。如果我们期望一个变量是一个特定的类型，我们在一个冒号之后，在变量名之后定义它。例如，以下变量被定义为具有 type number。

let x:number = 5;

同样，字符串类型可能如下所示：

let x:string = "Some String";

如果没有正确定义变量的类型，Typescript 会抛出错误。例如，let x:string = 5会抛出以下错误：

Type 'number' is not assignable to type 'string'.

在 Typescript 中定义对象类型#

对象在 Javascript 中无处不在，在 Typescript 中也不例外。Typescript 中的对象是 type object，但对象内部的值也有自己的类型。在最基本的例子中，我们可以将变量定义为类型对象，它引用任意长度或值集的对象：

let myObject:object = { a: 1 };

如果我们想要更复杂一点，我们还可以在对象中定义预期的属性类型。假设我们有一个对象，其中有 3 个属性：

  • 名称,类型string
  • 年龄,类型number
  • 兴趣类型object，其中兴趣是可选的

我们可以使用以下格式明确定义每一个：

let userOne:{ name: string, age: number, interests?: object } = { name: "John Doe", age: 24, interests: [ 'skiing', 'hiking', 'surfboarding' ] };

您可能会注意到，这变得有点混乱！通常，当我们这样做时，我们会创建自定义类型。您可以在此处了解有关自定义类型的更多信息，但作为示例，这里是使用自定义类型的相同代码：

type User = {
  name: string,
  age: number,
  interests?: object
}

let userOne:User = { name: "John Doe", age: 24, interests: [ 'skiing', 'hiking', 'surfboarding' ] };

现在我们有了一个很好的干净User类型，可以应用于任何变量或函数。接下来，让我们看看数组。

在 Typescript 中定义数组类型#

由于数组和对象可以包含它们自己的类型，因此我们定义它们的方式略有不同。对于数组，定义类型的最基本方法是使用type[]语法。例如，一个字符串数组如下所示：

let arrayOfStrings:string[] = [ 'some', 'strings' ];

在这里，string可以替换为任何其他有效类型。如果我们知道将出现在数组中的元素的确切数量和类型，我们可以这样定义它：

let myArray:[ string, number ] = [ "some", 15 ]

在 Typescript 中，当我们像这样定义一个具有固定类型和固定长度的数组时，它被称为Tuple.

Typescript 中的混合数组类型

有时，数组可能由多种类型组成，但长度未知。在这种情况下，我们可以使用联合类型。例如，一个仅由字符串和数字组成的未知长度数组，看起来可以这样定义：

let myArray:(string|number)[] = [ "some", 15 ]

同样，对于更复杂的类型，我们可能想要定义自己的类型。您可以在此处了解有关自定义类型的更多信息。

在函数中使用 Typescript 类型#

同样的原则最终也适用于函数——这里唯一的区别是函数通常也有返回值。让我们从一个没有返回函数的简单示例开始。请注意，我们在函数中定义了每个参数的类型：

function generateName(firstName: string, lastName: string) {
  console.log(`Hello ${firstName} ${lastName}`)
}
// Run the function
generateName("John", "Doe");

这个函数将成功运行，因为我们在运行函数时已经给出了正确的类型（即两个参数都是字符串）。

Typescript 和 Javascript 之间的一个根本区别是，如果我们要 run generateName("John");，Typescript 会给我们以下错误：


Expected 2 arguments, but got 1.

由于 Typescript 比 Javascript 严格得多，因此它需要两个参数 – 而不是一个。如果我们想让它起作用，我们必须明确告诉 Typescript 参数 2 是可选的。我们可以通过?在第二个参数之后添加 a 来做到这一点。因此，以下代码工作正常，没有错误：

function generateName(firstName: string, lastName?: string) {
  console.log(`Hello ${firstName} ${lastName}`)
}
// Run the function
generateName("John");

在具有返回类型的函数中使用 Typescript

在 Typescript 中添加返回类型很简单。如果一个函数使用关键字返回一些东西return，我们可以强制数据return应该是什么类型。因为我们什么都不返回——所以我们的返回类型被称为void.

如果我们想将返回类型添加到这个函数，我们使用相同的:，所以我们的代码如下所示：

// Note that we have added : void!
function generateName(firstName: string, lastName: string): void {
  console.log(`Hello ${firstName} ${lastName}`)
}
// Run the function
generateName("John", "Doe");

现在 Typescript 知道这个函数永远不会返回任何东西。如果它开始返回一些东西，typescript 会抛出一个错误：


Type 'string' is not assignable to type 'void'.

因此，Typescript 有助于保护我们免受试图在函数中返回数据的未知代码片段的影响。假设我们想将函数更改为return，而不是console.log。由于我们的返回类型为string，我们只需将函数的返回类型更改为string：

function generateName(firstName: string, lastName: string): string {
  return `Hello ${firstName} ${lastName}`;
}
// Run the function
let firstUser = generateName("John", "Doe");

在 Typescript 中将函数编写为变量

Javascript 有一个共同的符号，其中函数被写为变量。在 Typescript 中，我们也可以这样做，我们只需要预先定义类型。如果我们想将上面的函数转换为变量格式，它看起来像这样：

let generateName:(firstName: string, lastName: string) => string = function(firstName, lastName) {
  return `Hello ${firstName} ${lastName}`;
}

请注意这里的一个小区别，即返回类型是 after =>，而不是:。另请注意，我们没有为或本身定义类型-firstName这是因为我们将它们定义为变量的一部分 – 所以不需要再次这样做。lastNamefunction()

结论#

在此之后，您应该对 Typescript 中的类型如何工作有一个很好的理解。在本文中，我们介绍了：

  • 基本和最常见的 Typescript 类型
  • 如何在 Typescript 中定义变量和函数类型
  • 如何在 Typescript 中设置函数的返回类型
  • 在 Typescript 中为对象创建基本的自定义类型
  • 如何在 Typescript 中创建数组和元组类型

我希望你喜欢这篇关于 Typescript 类型的介绍。你可以在这里找到更多的 Typescript 内容。

推荐阅读：