TypeScript介绍及安装

80 阅读5分钟

让我们以这个问题开始本教程。"什么是TypeScript?"

TypeScript是一个类型化的JavaScript超集,可以编译成普通JavaScript。打个比方,如果JavaScript是CSS,那么TypeScript就是SCSS。

你写的所有有效的 JavaScript 代码也是有效的 TypeScript 代码。然而,通过TypeScript,你可以使用静态类型和最新的功能,这些功能被编译为普通的JavaScript,并被所有浏览器所支持。TypeScript旨在解决使JavaScript可扩展的问题,而且它做得相当好。

在本教程中,你将首先阅读TypeScript的不同特性,以及为什么学习它是一个好主意。文章的其余部分将涵盖TypeScript的安装和编译,以及一些流行的文本编辑器,为你提供TypeScript语法和其他重要功能的支持。

为什么要学习TypeScript?

如果你以前从未使用过TypeScript,你可能会想,既然它最终会编译成JavaScript,你为什么还要费心学习它呢?

让我向你保证,你不必在学习TypeScript时花费大量时间。TypeScript和JavaScript都有非常相似的语法,你只需将你的.js 文件重命名为.ts ,然后开始编写TypeScript代码。这里有几个特点,应该可以说服你开始学习TypeScript。

  1. 与JavaScript的动态类型不同,TypeScript允许你使用静态类型。这一特点本身使代码更易维护,并大大减少了由于对某些变量类型的不正确假设而导致的错误的机会。作为额外的奖励,TypeScript可以根据变量的使用情况确定其类型,而无需你明确指定类型。然而,为了清晰起见,你应该总是明确地指定一个变量的类型。
  2. 说实话,JavaScript的设计并不是为了作为一种大规模的开发语言。TypeScript为JavaScript添加了所有这些缺失的功能,使其真正可扩展。有了静态类型,你所使用的IDE现在能够以更好的方式理解你所写的代码。这使IDE有能力提供诸如代码完成和安全重构等功能。所有这些都会带来更好的开发体验。
  3. TypeScript还允许你在代码中使用所有最新的JavaScript功能,而不必担心浏览器的支持问题。一旦你写好了代码,你可以轻松地将其编译为所有浏览器支持的普通JavaScript。
  4. 很多流行的框架,如Angular和Ionic现在都在使用TypeScript。这意味着,如果你决定在未来使用任何一个框架,现在学习TypeScript是一个好主意。

安装

在你开始写一些很棒的TypeScript代码之前,你需要先安装TypeScript。这可以在npm的帮助下完成。如果没有安装npm,你将不得不在安装TypeScript之前先安装npm。要安装TypeScript,你需要启动终端并运行以下命令。

npm install -g typescript

一旦安装完成,你可以通过在终端运行tsc -v 命令来检查已经安装的TypeScript版本。如果一切安装正常,你会在终端看到安装的TypeScript版本号。

将 TypeScript 编译成 JavaScript

假设你在.ts 文件中写了一些 TypeScript 代码。浏览器将不能自己运行这段代码。你必须将TypeScript编译成浏览器可以理解的普通JavaScript。

如果使用的是IDE,代码可以在IDE中被编译成JavaScript。例如,Visual Studio允许你直接将TypeScript代码编译为JavaScript。你将不得不创建一个tsconfig.json文件,在那里你指定所有的配置选项来编译你的TypeScript文件到JavaScript。

当你不在一个大项目上工作时,最适合初学者的方法是使用终端本身。首先,你必须在终端中移动到TypeScript文件的位置,然后运行以下命令。

tsc first.ts

这将在同一位置创建一个名为first.js的新文件。请记住,如果你已经有一个名为first.js的文件,它将被覆盖。

如果你想编译当前目录下的所有文件,你可以在通配符的帮助下这样做。记住,这不会递归工作。

tsc *.ts

最后,你只能通过在一行中明确提供它们的名字来编译一些特定的文件。在这种情况下,将以相应的文件名创建JavaScript文件。

tsc first.ts product.ts bot.ts

让我们看看下面的程序,它在TypeScript中乘以两个数字。

let a: number = 12;
let b: number = 17;

function showProduct(first: number, second: number): void {
    console.log("The product is: " +  first * second);
}

showProduct(a, b);

当目标版本设置为ES6时,上面的TypeScript代码会编译成下面的JavaScript代码。请注意,你在TypeScript中提供的所有类型信息在编译后已经消失。换句话说,代码被编译成可以被浏览器理解的JavaScript,但你可以在一个更好的环境中进行开发,这可以帮助你捕捉到很多bug。

let a = 12;
let b = 17;
function showProduct(first, second) {
    console.log("The product is: " + first * second);
}
showProduct(a, b);

在上面的代码中,我们将变量ab 的类型指定为数字。这意味着,如果以后你试图将b 的值设置为 "apple "这样的字符串,TypeScript会显示一个错误,"apple "不能被分配到number 的类型。你的代码仍然会被编译成JavaScript,但是这个错误信息会让你知道你犯了一个错误,并帮助你在运行时避免问题。

下面是一张截图,显示了Visual Studio Code中的错误信息。

type error in TypeScripttype error in TypeScripttype error in TypeScript

上面的例子显示了TypeScript如何不断给你提示代码中可能出现的错误。这是一个非常基本的例子,但是当你在创建非常大的程序时,像这样的信息对帮助你写出健壮的代码,减少出错的机会有很大作用。

最后的思考

本系列的入门教程旨在让你对不同的TypeScript功能有一个非常简要的概述,并帮助你安装该语言,同时对你可以用于开发的IDE和文本编辑器提出一些建议。下一节介绍了将TypeScript代码编译成JavaScript的不同方法,并向你展示了TypeScript如何帮助你避免一些常见的错误。