# 初识 TypeScript：为 JavaScript 加上类型

## 概述

2012 年，微软发布了一门新语言——**TypeScript**。

它给 JavaScript 加上了**类型系统**。简单说就是：写代码时就能发现类型错误，不用等到运行时报错。

TypeScript 是 JavaScript 的**超集**。所有 JS 代码都是合法的 TS 代码。你可以在 JS 基础上，逐步加上类型注解。

目前 TypeScript 已成为前端开发的标配。Vue 3、React、Angular 都内置了对它的支持。

## TypeScript 解决了什么问题

JavaScript 是动态类型语言。变量是什么类型，只有运行时才知道：

```javascript
function add(a, b) {
  return a + b
}

add(1, 2)        // 3
add("1", "2")    // "12" — 拼接了，不是你想要的结果
```

这段代码没有语法错误，但结果不对。问题直到运行时才暴露。

TypeScript 在开发阶段就能发现这个问题：

```typescript
function add(a: number, b: number): number {
  return a + b
}

add(1, 2)        // ✅ 通过
add("1", "2")    // ❌ 类型错误：string 不能赋值给 number
```

| 对比 | JavaScript | TypeScript |
|------|-----------|------------|
| 类型检查 | 运行时 | 编译时（写代码时） |
| 类型注解 | 不支持 | 支持 |
| 浏览器执行 | 直接执行 | 需先编译为 JS |
| 学习曲线 | 低 | 中（多学一个类型系统） |

> [!info] 说明
> TypeScript 不改变 JavaScript 的运行行为。编译后，所有类型信息都会被抹除，生成的是干净的 JavaScript 代码。

## 安装与编译

TypeScript 通过 npm 安装：

```shell
npm install typescript -g
```

安装后，可以用 `tsc` 命令编译单个文件：

```shell
tsc index.ts
```

这会生成一个同名的 `index.js` 文件。

如果希望 TS 文件修改后自动编译：

```shell
tsc --watch index.ts
```

> [!tip] 技巧
> 在现代前端项目（Vue、React）中，构建工具（Vite、Webpack）会自动处理 TS 编译。你通常不需要手动运行 `tsc`。

## tsconfig.json

项目根目录下的 `tsconfig.json` 是 TypeScript 的配置文件。

通过 `tsc --init` 可以快速生成一个：

```shell
tsc --init
```

几个常用选项：

```json
{
  "compilerOptions": {
    "target": "ES2020",        // 编译到哪个 JS 版本
    "module": "ESNext",        // 模块规范
    "strict": true,            // 开启严格模式（推荐）
    "outDir": "./dist",        // 编译输出目录
    "rootDir": "./src"         // 源码目录
  }
}
```

| 选项 | 作用 | 推荐值 |
|------|------|--------|
| `target` | 指定输出的 JS 版本 | `ES2020` 或更高 |
| `strict` | 开启所有严格类型检查 | `true` |
| `outDir` | 编译后的文件放哪里 | `./dist` |
| `rootDir` | 源码目录 | `./src` |

开启 `strict` 后，TypeScript 会执行最严格的类型检查。初学阶段可能觉得约束多，但习惯后你会发现——**越严格，越安全**。

## 第一个 TypeScript 程序

创建一个项目测试一下：

```shell
mkdir hello-ts
cd hello-ts
npm init -y
npm install typescript -D
npx tsc --init
```

在 `src` 目录下创建 `greet.ts`：

```typescript
function greet(name: string): string {
  return `你好，${name}！`
}

const message = greet("TypeScript")
console.log(message)
```

编译并运行：

```shell
npx tsc
node dist/greet.js
```

输出：`你好，TypeScript！`

---

现在你有了环境、配置文件和编译流程。但关于类型，我们还只是浅尝辄止。

**类型到底是什么？** 从下一篇开始，我们一步步认识 TypeScript 的类型系统。


---

> 作者: Aphros  
> URL: https://blog.papergate.top/posts/01.%E5%88%9D%E8%AF%86-typescript%E4%B8%BA-javascript-%E5%8A%A0%E4%B8%8A%E7%B1%BB%E5%9E%8B/