TypeScript怎么运行？TypeScript环境搭建教程

TypeScript是由Microsoft开发的一种开放源代码语言。它是JavaScript的一个超集，这意味着你可以继续使用已开发的JavaScript技能，并添加以前不可用的某些功能。那么TypeScript怎么安装并运行？本教程主要介绍下TypeScript环境搭建的操作步骤。

一、安装TypeScript

您可以通过下面两种常用方法来获得项目可用的TypeScript：

通过安装TypeScript的Visual Studio插件
通过NPM(node.js包管理器)

1、目前Visual Studio 2019已为JavaScript开发提供了丰富的支持，既可以直接使用JavaScript，也可以使用TypeScript 编程语言。所以您可以下载安装最新版本的Visual Studio，来获得TypeScript。

2、如果你是JavaScript开发人员，则可能已在计算机上安装了npm。打开命令提示符窗口并输入npm version即可进行验证。如果安装了npm，你将看到版本和编译器命令的列表，接下来便可以使用npm。

如果未安装npm，你将看到一条消息，它显示无法识别该命令。那么就需要先安装Node.js：

转到 Node.js 下载页。
选择 Node.js 的任意可用版本，进行下载和安装。
若要验证是否已安装 npm，请打开“命令提示符”窗口，然后输入npm version。

TypeScript在npm注册表中以typescript包的形式提供。安装最新版本的TypeScript：

在“命令提示符”窗口中，输入 npm install -g typescript。
输入 tsc 确认已安装 TypeScript。如果已成功安装，则此命令应显示编译器命令和选项列表。

二、在Visual Studio Code中设置TypeScript项目

在此步骤中，你将在 Visual Studio Code 中创建一个项目工作区，然后初始化该工作区。

1、打开 Visual Studio Code。

2、在“欢迎”窗格上，选择“添加工作区文件夹”。

3、创建一个新的项目文件夹，然后选择“添加”。

4、在左侧窗格中，选择“资源管理器”按钮。

5、在“资源管理器”窗格中，选择“新建文件”图标。

6、在“模块 01 练习”下，键入文件名“module01.ts”，然后选择 Enter。 TypeScript 文件将出现在新的代码编辑器中。

三、生成 tsconfig.json 文件

在编译 TypeScript 源代码时，TypeScript 编译器会应用默认行为。但你可以通过将 tsconfig.json 文件添加到 TypeScript 项目文件夹的根目录来修改 TypeScript 编译器选项。此文件定义了 TypeScript 项目设置，例如编译器选项和应包括的文件。你可以使用 TypeScript 编译器的 init 选项，生成具有默认选项的 tsconfig.json 文件。

1、在 Visual Studio Code 中，选择“终端”>“新建终端”，打开新的终端窗口。

2、在命令提示符处，输入 tsc –init。注意，新的 tsconfig.json 文件已添加到“资源管理器”窗格中。可能需要刷新“资源管理器”窗格以查看文件。

3、在代码编辑器中打开 tsconfig.json 文件。你将看到它具有许多选项，其中大部分都被注释掉了。查看每个启用的选项的说明。

4、在 tsconfig.json 文件中，查找目标选项，并将其更改为 "ES2015"。

5、更新 tsconfig.json 文件，以便编译器将所有 JavaScript 文件保存到新文件夹中。

在“资源管理器”窗格中，在项目中创建一个名为“build”的新文件夹。
在 tsconfig.json 文件中，查找 outDir 选项，删除注释，并将参数设置为“build”。

6、保存 tsconfig.json 文件。

7、在命令提示符处，输入 tsc。这会读取 tsconfig.json 文件并重置项目的选项。

四、将 TypeScript 编译为 JavaScript

这里，你可以将一些 JavaScript 代码添加到 TypeScript 文件，然后对其进行编译。例如，将以下 JavaScript 代码复制并粘贴到 module01.ts 编辑器中。

Javascript

function addNumbers(x, y) {
return x + y;
}

console.log(addNumbers(3, 6));

即使尚未编译代码，Visual Studio Code 已使用其内置的 TypeScript 支持来进行类型检查。与之前一样，addNumbers 函数的两个参数存在类型错误。

1、更新 TypeScript 代码，指定每个参数的类型。将 x 替换为 x: number，将 y 替换为 y: number。

2、保存 TypeScript 文件。 TypeScript 编译器仅适用于已保存的文件版本。

3、在终端命令提示符下，输入 tsc module01.ts。编译器应该正常运行。

注意，已添加了一个新的 JavaScript 文件，但它不在资源管理器的 build 文件夹中。可能需要刷新“资源管理器”窗格以查看文件。在单个文件上运行 tsc 命令时，编译器将忽略 tsconfig.json 文件。

4、若要加载配置文件并编译文件夹中的所有 .ts 文件，请在不使用文件名的情况下运行 tsc。这应该会将 .js 文件添加到 build 文件夹。请记得删除根文件夹中的多余的 .js 文件。

5、打开 module01.js 文件，然后选择右上角的“向右拆分编辑器”按钮，以打开新的编辑器视图。

现在，你应该可以并排查看 .ts 和 .js 文件。注意，它们是相同的，只不过 .js 文件不包含新的类型注释。

6、在终端命令提示符下，输入 node .\build\module01.js`。这会运行 JavaScript 并在控制台日志中显示结果。

五、添加HTML文件

最后，你可以将 HTML 文件添加到项目中，以便运行并测试 JavaScript 代码，相关步骤如下：

1、在资源管理器中，选择“新建文件”按钮。

2、键入文件名 module01.html，然后选择 Enter。 HTML 文件将出现在新的代码编辑器中。然后将以下 HTML 复制并粘贴到编辑器中，然后保存该文件。

HTML

<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”UTF-8″>
<title>Test JavaScript</title>
</head>
<body>
<h1>Test JavaScript</h1>
<p id=”date”></p>
<p>This page calls the script module01.js and is used for testing.</p>
<script src=”./build/module01.js”></script>
</body>
</html>

3、在资源管理器中，右键单击 module01.html，然后选择“使用默认浏览器打开”。

4、激活浏览器的开发人员工具，接下来便可在 TypeScript 中开始编码了。

拓展阅读：《TypeScript和JavaScript哪个好 TypeScript和JavaScript的区别》

(本文由美国主机侦探原创，转载请注明出处“美国主机侦探”和原文地址！)