TypeScript 教程：学习 TypeScript 的分步指南

Typescript 简介

TypeScript 教程：学习 TypeScript 的分步指南

结论

Typescript 简介

什么是 Typescript？

Typescript 是 JavaScript 的类型化超集，由微软于 2012 年创建，旨在帮助 JavaScript 开发者开发大规模应用程序。Typescript 的设计初衷是作为一种大型代码库的结构化机制，因为它有助于避免拖慢开发速度的常见错误。由于该语言允许修改并生成可读的代码，它使团队更容易在同一个项目上工作。如果一个项目由多个开发人员共同开发，Typescript 可以避免在调试上浪费大量时间。

想跟专业人士学习 TypeScript？Netflix 高级工程师、前微软高级工程师 Patrick Desjardins 凭借多年经验，为您带来TypeScript 学习的完整指南。

这门语言使我们能够更有效地运用 JavaScript 技能。事实上，编译代码后，所有 Typescript 代码都会消失，并生成干净、跨平台安全的 JavaScript 代码。除了互操作性之外，Typescript 还添加了独特的功能，包括静态类型、接口、类等等。

TypeScript 与 JavaScript 相比？

Javascript 是一种用于创建交互式网页的动态脚本语言，因此它并非为复杂的应用程序而设计。而 Typescript 是一种静态脚本语言，它是 Javascript 的超集，这意味着它是在 JS 代码之上的一个额外层。Typescript 的设计目的并非取代或替换 Javascript。事实上，它绝不会覆盖现有的行为。它利用 Javascript 的现有行为来弥补其局限性，并利用该语言的常见问题。

Typescript 和 JavaScript 之间有很多区别。以下仅列举几个：

• TypesScript 是一种面向对象的编程语言，而 JavaScript 是一种脚本语言。
• TypeScript 具有静态类型，而 JavaScript 没有。
• TypeScript 使用类型和接口来描述数据的使用方式。
• TypeScript 具有接口，这是在代码中定义契约的强大方法。
• TypeScript 支持 JavaScript 不支持的函数可选参数。

我为什么要使用 Typescript？

使用 Typescript 有很多重要的好处。让我们来详细分析一下。

Typescript 能够提前捕获 JavaScript 代码中的错误。Typescript 能够在运行时之前捕获 bug 和错误，让您能够编写可靠的代码，并减少 JavaScript 中那些仅在运行时才会出现的缺陷。

• 转译功能允许您生成 ECMAScript，并且您可以指定要使用的 JavaScript 版本。这意味着您可以编写与旧版浏览器兼容的代码，同时使用最新的工具。

• Typescript 支持 JS 库和 API 文档，包括 JQuery、BootStrapJS、React 等。您可以使用所有熟悉的工具，因此学习难度不大。

• Typescript 引入了静态类型来构建代码并改进面向对象的编程技术。Typescript 的静态类型功能还使代码更易于重构，因为您可以导航到函数成员的引用。

• Typescript 使用 NPM，它允许您访问数百万个可靠的库。这也使得学习 Typescript 变得更加容易，因为您无需编写自定义工具来访问库。

• TypeScript 更易于维护。该语言通常更易于阅读和使用。内置的自文档功能使检查代码中的类型和对象更加容易。

• Typescript 让 Reach、Angular 和 Vue 的使用更加便捷。Typescript与这些框架集成良好，尤其是 React，它被誉为与 Typescript 完美契合。Typescript 的使用并非这些框架的强制要求，但它可以提高生产力并提升易用性。

TypeScript 教程：学习 TypeScript 的分步指南

现在您已经掌握了基础知识，我们将教您开始使用 Typescript 所需的一切知识。

步骤 1：设置 Typescript

安装 Typescript

您可以通过安装 TS Visual Studio 插件或使用NPM（节点包管理器）来访问 Typescript 。

安装NPM后，在终端中写入以下命令来安装TS。

npm install -g typescript

要检查您正在使用的版本，请在 shell 中运行以下命令行

tsc -v 

Typescript 编译器
要编译 TS 代码，我们运行命令tsc filename.ts。这将创建一个同名的 JS 文件，因此我们最终可以在浏览器上使用它。

第 2 步：探索 Typescript 类型

类型
顾名思义，Typescript 中的一切都与类型有关。由于 Typescript 是 JS 的类型化版本，我们可以在声明变量时指定其类型。这使得你的代码更具可扩展性和可靠性，并且你可以在运行时之前检查代码是否正常运行。

如果您以前使用过 JavaScript，您就会知道它有八种类型：字符串、数字、空值、未定义、对象、符号、大整数和布尔值。JavaScript 是动态类型的，这意味着它直到运行时才知道变量的类型，并且变量可以更改其类型。即使我们有意更改它们，也经常会出现错误和 bug。TypeScript 通过在代码中添加静态类型来帮助解决这个问题。

Typescript 中有三类类型：任意、内置和用户定义。

• 该any类型是所有 Typescript 数据类型的超集，也是我们可用的最宽松的类型。这意味着变量可以是任何类型。如果我们使用此类型，它将覆盖类型检查。
• Built-in类型包括数字、字符串、布尔值、未定义、空值和无效。
• User-defined类型包括枚举、数组、接口、类和元组。

让我们更深入地了解每一个类型以及如何使用 Typescript 类型。

分配类型

要在 Typescript 中分配类型，您需要一个冒号:、类型的名称、一个等号=以及该变量的值。我们来看一个例子。

let variableName: typeScriptType = value;  

数字

Typescript 支持十进制、十六进制、八进制和二进制字面量。在 Typescript 中，所有数字都是浮点值。

let num: number = 0.444;
let hex: number = 0xbeef;
let bin: number = 0b0010;

布尔值

布尔值的功能与在 Javascript 中一样。

let yes: boolean = true;
let no: boolean = false;

大批

在 Typescript 中，数组是同一对象的集合。您可以通过两种方式声明类型数组：使用数据类型后跟 [ ]，或者使用 的通用数组方法Array<elemType>。

您还可以使用|运算符为一个数组分配多种类型，或者创建一个多维数组，使用运算符将​​一个数组保存到另一个数组中[ ]。

const arr3: (Date| string[])[] = [new Date(), new Date(), ["1", "a"]];

元组

元组与数组非常相似，但我们可以定义存储在每个位置的数据类型。元组类型使您可以创建有序的数组。当您知道固定数量元素的类型并按顺序预定义类型时，就可以表示数组。

let numberTuple: [number, number, number];

Void
Void 是 的子类型undefined。它是一种返回类型，可以根据需要替换为其他类型。当我们返回函数时，使用 Void。它本质上告诉我们函数将返回 undefined。这确保函数不会返回任何值。

枚举
允许我们定义一组命名的预定义常量。这些常量使用 enum 关键字定义。您可以定义数字或字符串枚举。

enum MyStringEnum {
    ChoiceA = "A",
    ChoiceB = "B",
}

字符串
Typescript 遵循与 Javascript 相同的语法，使用双引号或单引号将文本括起来。您还可以使用反引号来使用多行，或${expression}在字符串内部启用求值操作。

let w = "Value1";
let x = "this is a string with the value " + w;
let y = 'this is a string with the value ' + w;
let z = `this is a string ${w}`;
console.log(w,x,y,z)

步骤3：变量基础

与大多数编程语言一样，我们使用变量来存储值，例如字符串、布尔值、数字或表达式。在 TypeScript 中，我们可以使用var、let和 来定义变量const。使用 时会出现一些问题var。例如，在函数内部用 声明的变量var具有函数作用域，但在函数外部声明时则具有全局作用域。这可能会导致 JavaScript 代码出现错误。

关键字let通过在声明变量的代码块中设置变量的生命周期来解决这个问题。类似地，const解决了与 相同的问题let，但它只能在声明时初始化一次。TypeScript 将确保不会设置任何值。

Typescript 中的变量遵循与许多其他编程语言类似的语法规则。

• 它们可以由字母表中的小写字母和大写字母组成
• 不能以数字开头
• 它们可以包含特殊字符，例如$或@。

步骤 4：在 TypeScript 中添加注释

TS 中的注释使用与 Javascript 相同的语法，双斜线表示单行注释，斜线星号表示打开注释块，星号斜线表示关闭注释块

Typescript 引入了一种特殊的语法。如果您添加/*!，Typescript 将在转换为 Javascript 时保留注释。这使您能够将版权信息保留在需要在 JS 中生成的 TS 文件的顶部。

let x = 1; // This is a single line comment 

/* This can be spread on  
multiple  
lines */ 
let y = 2;  

步骤5：类型推断

类型推断是编译器用来判断不同类型的方法。它足够智能，可以根据值推断出类型。这样，您就无需在代码中指定类型了。这是 TypeScript 的一个强大功能，允许您操作类型并进行组合。

Typescript 推断功能可以在以下场景中推断类型：

• 变量声明和初始化时
• 当将默认值设置为参数时
• 当函数返回类型确定时

步骤6：功能

Typescript 并没有对 JavaScript 的函数作用域核心做出任何重大改变。然而，Typescript 确实通过强签名增强了函数，我们可以用它来定义参数和返回类型。

我们使用关键字 声明一个函数function。您也可以使用fat arrow来创建不带关键字的函数。TypeScript 也是如此。我们可以使用 TypeScript 类型作为函数参数。我们使用冒号来实现这一点。请看以下示例：

function functionWithParameters(arg1: string, arg2: number){}

Typescript 函数分为两类：函数表达式或函数声明。函数声明是指通过不将函数分配给变量来定义函数，而函数表达式则分配给变量。

在 Typescript 中，你可以使用关键字指定函数的类型this。具体方法是：使用 ，this后跟冒号，再跟函数签名的类型。

步骤 7：映射类型

此功能允许您从现有类型创建新类型。例如，您可以让现有接口保留所有相同的成员，但更改为只读或可选。在映射类型之前，我们必须创建一个额外的接口来反映我们想要的最终状态，这可能会污染代码并导致问题。

如果没有映射类型，每个接口都需要一个单独的函数，情况很快就会失控。多亏了 Typescript 中映射类型的自定义逻辑，我们不必处理这些问题。

Typescript 中有不同的映射函数：partial、nullable、pick、omit、record、extract、exclude 和 ReturnType。

步骤 8：对象和 OOP

Typescript 支持面向对象编程，并添加了新功能来改进 JavaScript 的 OOP 功能。Typescript 支持通过使用关键字来使用类class。可以将其想象成对象的模板。我们来看一个例子：

class class_Name{    
    field;    
    method;    
} 

这将生成以下 JavaScript 代码：

// Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

Typescript 引入了使用对象的全新方式。Typescript 中有许多不同的对象类型：Object、object和{object}。Typescript 可以使用花括号创建对象，并且必须在初始化时定义其成员。这是一种更快捷的数据组织方式，而且由于 Typescript 并非结构化语言，因此无需命名。

步骤 9：类型检查和断言

让我们看看如何检查变量是否具有正确的类型。以下是两种最常见的方法。

实例

此运算符可以检查 JavaScript 中未定义的自定义类型。下面，我们首先编写一个自定义类型，创建它的一个实例，并检查它是否确实是正确的变量。

class Dog{
 name: string;
 constructor(data: string) {
  this.name = data;
 }
}
let dog = new dog('Rover')
if(dog instanceof Dog){
 console.log(`${dog.name} is a dog`)
}

类型

此运算符可以检查基本数据类型。下面，我们创建一个字符串变量，使用 typeof 命令将其与另一个变量进行比较，然后打印结果。

let myObject = { name: "test" };
let myOtherObject: typeof myObject; // Borrow type of the "myObject"
myOtherObject = { name: "test2" };
type TypeFromTypeOf = typeof myOtherObject; // Borrow 

有时，我们需要将变量转换为某种数据类型，通常是在使用通用类型并需要使其更具体时。有几种不同的方法可以做到这一点。让我们讨论两种常用的方法。

As关键词

在变量名称后使用 as 关键字，并以所需的数据类型结尾。

let str: any = 'This is a String'
let strLength = (str as string).length

< >操作员

我们也可以使用运算符来强制转换变量< >。这对我们的代码具有相同的效果，但实现了更简单的语法。

let str: any = 'This is a String'
let strLength = (<string>str).length

结论

现在你已经对 TypeScript 有了基本的了解，并且能够理解它如何降低 JavaScript 代码的 bug 风险。现在，你已经准备好学习更高级的概念了。由于 TypeScript 在 Web 开发领域发展势头强劲，对于那些想要开启并重塑前端职业生涯的人来说，有大量的优秀资源可供选择。

对于想要掌握 TypeScript 的人来说，最扎实的课程是Patrick Desjardins 的《学习 TypeScript：初学者完整课程》。Desjardins 是 Netflix 的高级工程师，曾任微软高级工程师，拥有超过 20 年的专业开发经验。这门互动式实践课程从零基础入门到 TypeScript 的高级概念，例如迭代器、对象操作等等。对于任何想要掌握这门必备语言的前端开发者来说，这门课程都是一站式学习平台。

学习愉快！