初识 TypeScript：为 JavaScript 加上类型

第 1 节 概述

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

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

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

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

第 2 节 TypeScript 解决了什么问题

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

1
2
3
4
5
6

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

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

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

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

1
2
3
4
5
6

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

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

第 3 节 安装与编译

TypeScript 通过 npm 安装：

1

npm install typescript -g

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

1

tsc index.ts

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

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

1

tsc --watch index.ts

第 4 节 tsconfig.json

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

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

1

tsc --init

几个常用选项：

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

第 5 节 第一个 TypeScript 程序

创建一个项目测试一下：

1
2
3
4
5

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

在 src 目录下创建 greet.ts：

1
2
3
4
5
6

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

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

编译并运行：

1
2

npx tsc
node dist/greet.js

输出：你好，TypeScript！

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

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