04 | 编写你的第一个TypeScript程序-TypeScript开发实战

当前位置:　首页>> 技术小册>> TypeScript开发实战

### 04 | 编写你的第一个TypeScript程序

在深入TypeScript的广阔世界之前，亲手编写并运行你的第一个TypeScript程序是一个极好的起点。这不仅能帮助你理解TypeScript的基本语法和概念，还能激发你对后续深入学习TypeScript的兴趣。本章节将引导你逐步完成这一过程，从环境搭建到编写代码，再到编译运行，确保每一步都清晰明了。

#### 4.1 环境准备

在开始编写TypeScript程序之前，你需要确保你的开发环境已经安装了Node.js和TypeScript。Node.js是JavaScript的运行环境，而TypeScript作为JavaScript的超集，需要TypeScript编译器（tsc）来将其转换成JavaScript代码，以便在Node.js或浏览器中运行。

**安装Node.js**

1. 访问[Node.js官网](https://nodejs.org/)，下载并安装适合你操作系统的Node.js版本。
2. 安装完成后，在命令行或终端中运行`node -v`来验证Node.js是否成功安装，同时它也会附带npm（Node Package Manager），用于管理项目依赖。

**安装TypeScript**

使用npm全局安装TypeScript：

```bash
npm install -g typescript
```

安装完成后，你可以在命令行或终端中运行`tsc --version`来验证TypeScript是否安装成功。

#### 4.2 创建TypeScript项目

为了组织和管理你的TypeScript代码，建议创建一个新的项目文件夹。接下来，我们将在这个文件夹中创建我们的第一个TypeScript文件。

1. 在你喜欢的位置创建一个新文件夹，例如命名为`my-first-ts-project`。
2. 打开终端或命令行工具，切换到该文件夹下：

```bash
   cd my-first-ts-project
   ```

3. 创建一个新的TypeScript文件，比如命名为`app.ts`。你可以使用任何文本编辑器或IDE（如Visual Studio Code、WebStorm等）来创建和编辑这个文件。

#### 4.3 编写TypeScript代码

现在，让我们在`app.ts`文件中编写一些简单的TypeScript代码。我们将定义一个函数，该函数接收两个数字作为参数，并返回它们的和。

```typescript
// app.ts
function add(a: number, b: number): number {
    return a + b;
}

console.log(add(5, 3)); // 输出: 8
```

在这段代码中，我们使用了TypeScript的类型注解功能。`a: number, b: number`表明函数`add`接受两个类型为`number`的参数，而`: number`在函数声明的末尾表明该函数返回一个`number`类型的值。这是TypeScript提供的一个强大特性，有助于在编译阶段捕获潜在的错误，提高代码的可维护性和可靠性。

#### 4.4 编译TypeScript代码

TypeScript代码需要被编译成JavaScript代码才能在Node.js或浏览器中运行。使用之前安装的TypeScript编译器（tsc）来完成这一步骤。

1. 在命令行或终端中，运行以下命令来编译`app.ts`文件：

```bash
   tsc app.ts
   ```

这将会生成一个名为`app.js`的JavaScript文件，它是`app.ts`文件的编译结果。

2. 运行生成的JavaScript文件来查看结果：

```bash
   node app.js
   ```

你应该会在命令行或终端中看到输出`8`，这是函数`add`的调用结果。

#### 4.5 理解编译过程

编译TypeScript代码到JavaScript的过程不仅仅是简单的语法转换。TypeScript编译器会执行类型检查，确保代码中的类型注解与JavaScript的运行时行为一致。如果代码中存在类型错误（如尝试将一个字符串赋值给声明为数字类型的变量），编译器将报错并阻止编译过程，直到问题被解决。

此外，TypeScript还允许你通过配置文件（如`tsconfig.json`）来定义编译选项，如目标JavaScript版本、是否包含注释等。虽然在这个简单的例子中我们没有使用到它，但在实际项目中，`tsconfig.json`文件是不可或缺的。

#### 4.6 深入探索

现在你已经成功编写并运行了你的第一个TypeScript程序，是时候开始探索更多TypeScript的特性了。以下是一些建议的下一步学习方向：

- **类型系统**：深入学习TypeScript的类型系统，包括接口、类型别名、泛型等高级特性。
- **模块与命名空间**：了解如何在TypeScript中组织代码，使用模块和命名空间来避免命名冲突。
- **工具与生态系统**：探索TypeScript的编译器选项、构建工具（如Webpack、Rollup）、测试框架（如Jest）等，以提高开发效率和质量。
- **实战应用**：通过参与开源项目或自己编写项目来实践TypeScript，将理论知识转化为实际技能。

#### 结语

编写你的第一个TypeScript程序是掌握TypeScript的起点。通过这个过程，你不仅学会了TypeScript的基本语法和编译流程，还体会到了TypeScript在提高代码质量和开发效率方面的优势。随着你进一步深入学习和实践，你将能够更加熟练地运用TypeScript来构建复杂、可靠的应用程序。希望你在TypeScript的旅程中收获满满！

该分类下的相关小册推荐：

剑指TypeScript

TypeScript 全面进阶指南

TypeScript入门指南