TypeScript - 环境搭建

TypeScript - 环境搭建

要开始使用 TypeScript 进行开发，你需要在系统上安装一些必备工具：一个代码编辑器 (code editor)、Node.js（包含 npm）以及 TypeScript 编译器本身。

前置要求：Node.js 和 npm

Node.js 是一个 JavaScript 运行时环境 (runtime environment)，允许你在浏览器之外运行 JavaScript 代码。它对于运行 TypeScript 编译器和许多其他开发工具至关重要。

npm (Node Package Manager) 随 Node.js 一起安装。它用于安装和管理项目依赖项 (project dependencies)，包括 TypeScript 编译器和外部库。

安装步骤：

1. 下载 Node.js： 访问 Node.js 官方网站：https://nodejs.org/
2. 选择安装程序： 下载推荐用于大多数用户的安装程序（通常 LTS - 长期支持版本 (Long Term Support version) 是一个稳定的选择）。安装程序适用于 Windows、macOS 和 Linux。
3. 运行安装程序： 按照安装向导的说明进行操作。
4. 验证安装： 打开你的终端或命令提示符 (command prompt)，输入以下命令检查 Node.js 和 npm 是否已正确安装：
5. node -v（应该显示 Node.js 版本）
6. npm -v（应该显示 npm 版本）

# 示例验证输出（版本可能不同）
$ node -v
v18.16.0

$ npm -v
9.5.1

安装 TypeScript 编译器 (tsc)

TypeScript 编译器，名为 tsc，负责将 .ts 文件转换为 .js 文件。你可以使用 npm 进行安装。

你可以选择全局安装（推荐，方便在任何地方通过命令行访问）或按项目本地安装（协同项目的标准做法，确保版本一致）。

全局安装

在终端中运行以下命令：

npm install -g typescript

（在 macOS/Linux 上，如果遇到权限错误，可能需要使用 sudo npm install -g typescript 命令。）

验证安装：

tsc -v

这应该显示安装的 TypeScript 版本。

本地安装（按项目 - 推荐用于项目）

1. 在终端中导航到你的项目根目录。
2. 如果尚未初始化项目，使用 npm 初始化项目：npm init -y（这会创建一个 package.json 文件）。
3. 安装 TypeScript 作为开发依赖项 (development dependency)：npm install --save-dev typescript

在本地安装后，你可以使用 npx tsc 运行编译器，或者通过在 package.json 文件中添加脚本来运行。

代码编辑器设置

你可以在任何文本编辑器中编写 TypeScript，但使用一个对 TypeScript 支持良好的 IDE (集成开发环境) 会显著提升开发体验。

推荐：Visual Studio Code (VS Code)

VS Code (https://code.visualstudio.com/) 是一个免费、流行且强大的代码编辑器，由 Microsoft 开发，内置了出色的 TypeScript 支持，包括：

• 智能感知 (IntelliSense)（自动完成、参数信息）
• 实时错误检查
• 调试支持
• 代码导航和重构 (refactoring)
• Git 集成

根据你的操作系统下载并安装 VS Code。

其他编辑器

其他对 TypeScript 支持良好的编辑器包括：

• WebStorm（付费）
• Sublime Text（需要 TypeScript 插件）
• Vim/Neovim（需要配置语言服务器）
• Atom（需要 TypeScript 插件）

基本工作流程概述

1. 编写代码： 在你选择的编辑器中创建以 .ts 为扩展名的文件。
2. 配置（可选但推荐）： 创建 tsconfig.json 文件（通过 tsc --init 命令生成）来配置编译器选项。
3. 编译： 在终端中运行 tsc（如果使用了 tsconfig.json）或 tsc yourfile.ts 来生成 JavaScript 文件。
4. 运行： 使用 Node.js (node yourfile.js) 执行生成的 .js 文件，或将其包含在 HTML 文件中以便在浏览器中执行。
5. 开发快捷方式： 在开发过程中，可以使用 ts-node yourfile.ts（需要全局或本地安装 ts-node）直接编译和执行 TypeScript 代码。

TypeScript Playground

如果只是想快速进行实验，无需本地设置，可以使用官方在线 TypeScript Playground：https://www.typescriptlang.org/play

Playground 允许你编写 TypeScript 代码，实时查看生成的 JavaScript，并检查错误。

// 在 Playground 中试试这个：
function greetUser(user: { name: string, age: number }): string {
    return `Hello, ${user.name}! You are ${user.age}.`;
}

const person = { name: "Alice", age: 30 };
console.log(greetUser(person));

安装并配置好这些工具后，你就准备好开始编写和编译 TypeScript 代码了！