如何开始使用 Typescript

过去十年，Web 开发领域最重要的创新之一就是向 Typescript 的转变。随着越来越多的雇主希望减少技术债务，学习 Typescript 已成为获得 Web 开发人员职位的必要条件。

虽然动态类型语言在短期内让开发者的工作变得轻松，但它可能会导致一些直到运行时才被捕获的不必要的错误。我们可以借助 TypeScript 来避免这个问题。让我们仔细看看

什么是 TypeScript？

简而言之，TypeScript 是 JavaScript 的超集。这意味着，虽然传统的 JavaScript 代码在 TypeScript 中可以正常工作，但它还拥有一些额外的功能，使代码更简洁、更高效。TypeScript 使用名为 tsc 的编译器来检查代码中的错误，并生成（技术上称为“发射”）用于 Web 应用程序的 JavaScript 等效代码。

TypeScript 也可以被称为 JavaScript 的静态类型版本，但这样一来，我们就会忽略 TypeScript 提供的许多其他功能。在下一节中，我们将探讨使用 TypeScript 的一些优势。

使用 TypeScript 的优势

TypeScript 具有以下功能：

• 强类型- TypeScript 非常重视代码中使用的变量的类型。如果变量被赋值，而该值与类型不匹配，TypeScript 编译器 tsc 就会显示错误。

• 面向对象的特性——TypeScript 引入了大量面向对象的概念，有助于使代码更易于管理。

• 编译时错误- 由于涉及编译步骤，大多数错误是在编译时而不是运行时捕获的。

• 错误触发- TypeScript 会告知开发人员代码中可能存在的错误，但它会确保生成等效的 JavaScript 代码以保证开发流程的正常运行。最终决定权在开发人员手中。

• 出色的工具- TypeScript 提供了许多出色的工具，可帮助您在键入代码时进行编辑、错误检查等。

让我们通过这个简单的演示来了解如何做到这一点，该演示也突出了上述一些功能。

如何使用 TypeScript

在进入主要演示并查看类似于实际应用程序的场景之前，让我们先了解一下 TypeScript 的基本构建块。

原始人

JavaScript 常用的原语数字、字符串和布尔值也出现在此。此外，您还可以使用类型注释在声明时修复变量的类型。当变量已定义时，TypeScript 也会推断其类型。TypeScript 还有一种称为 any 的特殊类型，用于避免特定变量的类型检查错误。

函数和对象

函数也遵循类似的类型注释模式，其中参数类型与常规变量相同，而返回类型则在括号和花括号之间。匿名函数使用 TypeScript 中一种称为上下文类型（contextual types）的功能，其类型是根据函数使用上下文推断出来的。

对象与 JavaScript 几乎相同，除了它会推断其内部每个属性的类型。访问不存在的属性会导致编译器错误。TypeScript
允许我们使用类型别名（无法扩展）或接口（可扩展）来创建对象。

JavaScript 之上的类型

TypeScript 也添加了一些自己的类型。

• 元组是元素类型已经注释的数组，因此我们无法在该位置保存任何其他类型。

• 枚举是指为数字/字符串赋予人类可读的标识符。这使得代码管理更加容易，并避免了记忆固定值的麻烦。

• 联合允许你将同一个变量与多种类型的数据一起使用，而无需担心类型错误。这是通过使用竖线符号 (|) 为同一个变量标注多种类型来实现的。

在项目中使用 Typescript

既然我们已经熟悉了 TypeScript 的基本功能块，让我们构建一个小应用程序，看看如何使用它来编写更好的代码。这个应用程序将接受两个数字作为输入，并将它们的总和打印到浏览器控制台上。

1.在创建演示之前，我们需要在机器上设置 TypeScript。请按照以下说明在你的机器上设置 TypeScript。

https://www.typescriptlang.org/download

2.创建两个文件index.html和app.ts。确保app.js在 HTML 文件中调用 。我们将使用 来app.ts发送app.js文件以供浏览器环境使用。

3.如下所示创建index.html。此文件将包含两个数字输入和一个加法按钮。我们将把两个数字的和打印到控制台上。

4.在文件中app.ts添加以下代码。这段 TypeScript 代码会生成一个 JavaScript 文件，我们将使用该文件从 DOM 中获取值、添加值，并将结果打印到浏览器控制台上。

5.要发出app.js，请转到终端并运行以下命令来编译app.ts：

tsc —target es2015 app.ts

确保在你的文件夹内运行此命令app.ts。如前所述，tsc 是 TypeScript 编译器。它将编译我们的代码，并在出现任何错误时app.ts发出并生成错误消息。app.js

需要使用 target 标志来确保生成的 JavaScript 符合 ES2015 标准。默认情况下，tsc 生成的是 ES3 标准，这个标准已经比较老了。

6.如果您使用上面的代码，它应该可以立即运行。要查看 TypeScript 的实际效果，您需要删除类型注释。每次进行更改时，都需要app.ts重新编译。不符合 TypeScript 规范的更改将会产生错误。但是，它仍然会生成 JavaScript，您甚至可以运行它，但可能会产生意想不到的结果。

我们只是粗略地了解了 TypeScript 的功能！想要更熟悉 TypeScript，最重要的事情就是开始在你感兴趣的项目中使用它。你使用 TypeScript 越熟练，在公司里用它编写简洁的代码就越容易。

正在寻找部署干净代码的地方？不妨看看Codesphere，它是唯一一家让云端部署变得像本地测试一样简单的云服务提供商。

祝您编码愉快！