TypeScript - 环境设置

我们已经在线设置了 TypeScript 编程环境，这样您就可以在学习理论知识的同时在线执行所有可用的示例。这将增强您对所读内容的信心，并允许您使用不同选项检查结果。请随意修改任何示例并在线执行。

var message:string = "Hello World" 
console.log(message)

编译后，它将生成以下 JavaScript 代码。

var message = "Hello World";
console.log(message);

在本章中，我们将讨论如何在 Windows 平台上安装 TypeScript。我们还将解释如何安装 Brackets IDE。

您可以使用 The TypeScript Playground 在线测试您的脚本。在线编辑器会显示编译器生成的相应 JavaScript 代码。

您可以使用 Playground 尝试以下示例。

var num:number = 12 
console.log(num)

编译后，它将生成以下 JavaScript 代码。

var num = 12;
console.log(num);

上述程序的输出如下所示 −

12

本地环境设置

TypeScript 是一项开源技术。它可以在任何浏览器、任何主机和任何操作系统上运行。要编写和测试 TypeScript 程序，您需要以下工具 −

文本编辑器

文本编辑器帮助您编写源代码。一些编辑器的示例包括 Windows Notepad、Notepad++、Emacs、vim 或 vi 等。使用的编辑器可能因操作系统而异。

源文件的扩展名通常为 .ts

TypeScript 编译器

TypeScript 编译器本身是一个 .ts 文件，被编译成 JavaScript (.js) 文件。TSC (TypeScript Compiler) 是一个源到源的编译器（transcompiler / transpiler）。

TSC 会生成传递给它的 .ts 文件的 JavaScript 版本。换句话说，TSC 从作为输入的 TypeScript 文件生成等效的 JavaScript 源代码。此过程称为转译（transpilation）。

然而，编译器会拒绝传递给它的任何原始 JavaScript 文件。编译器仅处理 .ts 或 .d.ts 文件。

本 TypeScript 教程基于最新的 TypeScript 5.5.2 版本。

安装 Node.js

Node.js 是一个开源的、跨平台的服务器端 JavaScript 运行时环境。Node.js 可在无需浏览器支持的情况下运行 JavaScript。它使用 Google V8 JavaScript 引擎来执行代码。您可以从此处下载 Node.js 源代码或适用于您平台的预构建安装程序 − https://nodejs.org/en/download

在 Windows 上安装

按照以下步骤在 Windows 环境中安装 Node.js。

步骤 1 − 下载并运行 Node 的 .msi 安装程序。

步骤 2 − 要验证安装是否成功，请在终端窗口中输入命令 node v。

步骤 3 − 在终端窗口中输入以下命令来安装 TypeScript。

npm install -g typescript

在 Mac OS X 上安装

要在 Mac OS X 上安装 Node.js，您可以下载预编译的二进制包，这将使安装变得简单快捷。请访问 http://nodejs.org/ 并点击安装按钮下载最新包。

按照安装向导从 .dmg 安装包，这将同时安装 Node 和 npm。npm 是 Node Package Manager，它便于安装 Node.js 的附加包。

在 Linux 上安装

在安装 Node.js 和 NPM 之前，您需要安装一些依赖项。

• Ruby 和 GCC。您需要 Ruby 1.8.6 或更高版本，以及 GCC 4.2 或更高版本。

• Homebrew。Homebrew 是一个最初为 Mac 设计的包管理器，但已移植到 Linux 作为 Linuxbrew。您可以在 http://brew.sh/ 了解更多关于 Homebrew 的信息，以及 http://brew.sh/linuxbrew 了解 Linuxbrew。

安装这些依赖项后，您可以使用以下终端命令安装 Node.js −

brew install node.

IDE 支持

TypeScript 可以在众多开发环境中构建，例如 Visual Studio、Sublime Text 2、WebStorm/PHPStorm、Eclipse、Brackets 等。本文讨论 Visual Studio Code 和 Brackets IDE。这里使用的开发环境是 Visual Studio Code（Windows 平台）。

Visual Studio Code

这是一个来自 Visual Studio 的开源 IDE。它支持 Mac OS X、Linux 和 Windows 平台。VScode 可从以下地址获取 − https://code.visualstudio.com/

Windows 上的安装

步骤 1 − 下载 Windows 版的 Visual Studio Code。

步骤 2 − 双击 VSCodeSetup.exe 以启动安装过程。这只需一分钟。

步骤 3 − 以下是 IDE 的截图。

步骤 4 − 您可以通过右键单击文件 → 在命令提示符中打开，直接导航到文件路径。同样，“在资源管理器中显示”选项会在文件资源管理器中显示该文件。

Mac OS X 上的安装

Visual Studio Code 在 Mac OS X 上的特定安装指南可在以下地址找到

https://code.visualstudio.com/Docs/editor/setup

Linux 上的安装

Visual Studio Code 在 Linux 上的特定安装指南可在以下地址找到

https://code.visualstudio.com/Docs/editor/setup

Brackets

Brackets 是由 Adobe Systems 创建的免费开源 Web 开发编辑器。它支持 Linux、Windows 和 Mac OS X。Brackets 可从 http://brackets.io/ 获取

Brackets 的 TypeScript 扩展

Brackets 通过 Extension Manager 支持扩展以添加额外功能。以下步骤说明使用 Extension Manager 安装 TypeScript 扩展。

• 安装完成后，单击编辑器右侧的扩展管理器图标 。在搜索框中输入 typescript。

• 安装 Brackets TSLint 和 Brackets TypeScript 插件。

您可以通过添加 Brackets Shell 扩展，在 Brackets 内部运行 DOS 提示符 / shell。

安装后，您会在编辑器右侧看到 shell 图标 。单击图标后，将看到如下所示的 shell 窗口 −

注意 − TypeScript 也可作为 Visual Studio 2012 和 2013 环境的插件使用（https://www.typescriptlang.org/#Download）。VS 2015 及更高版本默认包含 TypeScript 插件。

现在，您已准备就绪！！！