第 1 章:TypeScript 入门

学习目标

• 理解 TypeScript 与 JavaScript 的关系
• 安装 TS 编译器并验证版本
• 编写并运行第一个 .ts 文件
• 认识 TS 编译期报错和类型擦除

一、TS 是什么

TypeScript(简称 TS)是 JavaScript 的超集,在 JS 基础上加了静态类型系统。

// TypeScript 代码
function greet(name: string): string {
  return `Hello, ${name}`;
}

const user: string = 'Tom';
greet(user);  // ✅ 编译通过
greet(123);   // ❌ 编译报错:Argument of type 'number' is not assignable to parameter of type 'string'

编译后是纯 JS,运行时和普通 JS 没区别:

// 编译产物(类型信息被擦除)
function greet(name) {
  return "Hello, " + name;
}

⚠️ 坑 1:TS 不会让 JS 跑得更快,也不会改变运行时行为,它的价值在开发期。

二、安装 TypeScript

推荐用 npm 全局安装:

npm install -g typescript
tsc --version    # 查看版本,本教程用 5.x

也可以项目内局部安装(更推荐):

mkdir my-app && cd my-app
npm init -y
npm install -D typescript
npx tsc --version

⚠️ 坑 2:tsc 是编译器,跟 ts-node(直接运行 TS)和 @types/node(Node API 类型)是三回事,别混了。

三、第一个 TS 程序

新建 hello.ts:

// hello.ts
const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

console.log(greet('TypeScript'));   // Hello, TypeScript!

四、编译与运行

tsc hello.ts        # 编译,生成 hello.js
node hello.js       # 运行 JS

# 或者一条命令搞定(ts-node)
npx ts-node hello.ts

期望输出:

Hello, TypeScript!

⚠️ 坑 3:编译后默认产物和源文件同目录(都叫 hello.js),会污染源码。生产环境必须配 tsconfig.json + outDir。

五、TS 编译期检查 vs JS 运行时

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

add(1, 2);         // ✅ 编译通过
add('1', '2');     // ❌ 编译报错(不需要运行就发现错误)
add(1);            // ❌ 编译报错:Expected 2 arguments, but got 1

对比纯 JS:

function add(a, b) { return a + b; }
add('1', '2');     // '12'(运行了才出 bug)
add(1);            // NaN

⚠️ 坑 4:tsc 编译只是类型擦除 + 语法转译,不管类型对不对都生成 JS。要想做严格检查,必须给 tsc 传 --noEmit 或配 tsconfig.json。

六、tsconfig.json(最小配置)

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}
```跑 `tsc` 就会按这个配置编译。

## 七、tsc 常用命令

```bash
tsc                          # 按 tsconfig.json 编译整个项目
tsc --noEmit                  # 只检查类型,不生成文件(推荐用于 CI)
tsc --watch                   # 监听文件变化,自动重新编译
tsc file.ts                   # 编译单个文件
tsc --strict                  # 启用所有严格检查
tsc --listFiles               # 列出所有参与编译的文件

⚠️ 坑 5:tsc --watch 在 Windows 上文件名大小写敏感,改了文件名大小写它检测不到,得手动重启。

八、本章小结

要点	关键
TS 是 JS 超集	编译后是纯 JS,运行时无类型
安装	npm i -g typescript 或项目内 npm i -D typescript
编译	tsc hello.ts → hello.js
核心价值	编译期类型检查,不用运行就发现 bug
tsconfig	项目必须配 tsconfig.json

动手练习

1. Hello TS:装好 TS,写 hello.ts,打印 Hello, TypeScript!
2. 类型实验:写 add(a: number, b: number): number,故意传字符串,看报错信息
3. 严格模式:新建 tsconfig.json,设置 strict: true,观察 undefined 相关的报错

---

下一章:第 2 章:基础类型 →