TypeScript 快速入门：30 分钟上手指南

大家好！我是一名工作了 5 年的后端开发工程师，平时也经常和前端打交道。今天我想写这篇教程，是因为TypeScript（TS）实在太香了——它不仅能让你写出更少 bug 的代码，还能让团队协作更顺畅。可当我刚开始学的时候，却被一堆术语和配置劝退了。

所以，我决定用最直白的方式，带你 30 分钟快速上手 TypeScript。不用怕，就算你完全没接触过，也能跟得上！

---

一、TypeScript 是什么？为什么要用它？

简单说：TypeScript = JavaScript + 类型系统。

• JavaScript（JS）是动态语言，变量类型在运行时才确定，容易出错。
• TypeScript 在 JS 基础上加了“类型标注”，让代码在写的时候就能发现错误，而不是等到用户点按钮才发现崩溃。

✅ 举个栗子：
在 JS 中，你可能不小心把字符串当成数字相加，结果得到 "12" 而不是 3。
在 TS 中，编译器会直接告诉你：“嘿，这俩不是数字，不能加！”

而且，TypeScript 最终会被“编译”成纯 JavaScript，所以任何浏览器都能跑。

🆚 技术选型对比：JS vs TS

对比项	JavaScript	TypeScript
类型检查	无（运行时才报错）	有（写代码时就提示）
开发体验	自由但易出错	安全且智能提示强
学习成本	零门槛	需学习类型语法
适用场景	小项目、快速原型	中大型项目、团队协作

💡 我当初学的时候觉得“多此一举”，直到项目越来越大，bug 越来越多……才明白 TS 的价值。

---

二、环境准备：5 分钟搞定开发工具

要写 TypeScript，你需要以下工具：

1. Node.js（带 npm 包管理器）
2. 代码编辑器（推荐 VS Code）
3. TypeScript 编译器

步骤 1：安装 Node.js

去 https://nodejs.org 下载 LTS 版本，安装即可。

验证是否安装成功：

node -v  # 应输出版本号，如 v18.17.0
npm -v   # 应输出版本号，如 9.6.7

步骤 2：安装 TypeScript

全局安装 TS 编译器（可选，也可以局部安装）：

npm install -g typescript

验证：

tsc -v  # 输出 TypeScript 版本，如 5.2.2

🔧 避坑指南：其实你不需要全局安装！更推荐在项目里局部安装，避免版本冲突。后面我们会用 npx tsc 来编译。

步骤 3：创建你的第一个 TS 项目

mkdir my-ts-app
cd my-ts-app
npm init -y          # 生成 package.json
npm install typescript --save-dev  # 局部安装 TS
npx tsc --init       # 生成 tsconfig.json（TS 配置文件）

现在你的项目结构应该是：

my-ts-app/
├── package.json
├── tsconfig.json
└── （等下我们新建的 .ts 文件）

---

三、核心概念：用最简单的例子讲清楚

TypeScript 的核心就是 “给变量加类型”。我们从几个基础类型开始。

1. 基础类型（Primitive Types）

let age: number = 25;
let name: string = "小明";
let isStudent: boolean = true;
let hobbies: string[] = ["编程", "读书"];
let scores: Array<number> = [90, 85, 92];

💡 注意：string[] 和 Array<number> 是等价的，前者更常用。

2. 函数类型

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

// 箭头函数
const multiply = (x: number, y: number): number => x * y;

如果你不写返回类型，TS 会自动推断（推荐省略，除非需要明确约束）。

3. 接口（Interface）——定义对象结构

interface User {
  id: number;
  name: string;
  email?: string; // ? 表示可选
}

const user1: User = {
  id: 1,
  name: "Alice"
};

const user2: User = {
  id: 2,
  name: "Bob",
  email: "bob@example.com"
};

✅ 这就是 TS 最强大的地方：提前约定对象长什么样，避免拼错字段！

4. 类型别名（Type Alias）

和 interface 类似，但更灵活：

type Point = {
  x: number;
  y: number;
};

type ID = string | number; // 联合类型

let userId: ID = "abc123";
userId = 123; // 也可以是数字

🤔 Interface vs Type？
简单记：对象结构用 interface，复杂组合用 type。初学者先用 interface 就够了。

---

四、实战项目：做一个“待办事项”列表（Todo List）

我们用纯 TS 写一个命令行版 Todo 应用，包含添加、查看功能。

第 1 步：创建文件 todo.ts

// 定义 Todo 项的结构
interface Todo {
  id: number;
  text: string;
  done: boolean;
}

// 模拟数据库
let todos: Todo[] = [];

// 添加任务
function addTodo(text: string): void {
  const newTodo: Todo = {
    id: Date.now(),
    text,
    done: false
  };
  todos.push(newTodo);
  console.log(`✅ 已添加: "${text}"`);
}

// 查看所有任务
function listTodos(): void {
  if (todos.length === 0) {
    console.log("📝 暂无任务");
    return;
  }

  todos.forEach(todo => {
    const status = todo.done ? "[✓]" : "[ ]";
    console.log(`${status} ${todo.id}: ${todo.text}`);
  });
}

// 导出函数（方便测试）
export { addTodo, listTodos };

第 2 步：创建入口文件 index.ts

import { addTodo, listTodos } from "./todo";

// 模拟用户操作
addTodo("学习 TypeScript");
addTodo("写一篇博客");
listTodos();

第 3 步：编译并运行

在终端执行：

npx tsc        # 编译所有 .ts 文件（根据 tsconfig.json）
node index.js  # 运行生成的 JS 文件

你应该看到输出：

✅ 已添加: "学习 TypeScript"
✅ 已添加: "写一篇博客"
[ ] 1698765432100: 学习 TypeScript
[ ] 1698765432101: 写一篇博客

🎉 恭喜！你已经用 TS 写了一个小应用！

---

五、新手常见问题解答（FAQ）

Q1：为什么我的 .ts 文件改了，.js 没更新？

A：每次都要重新运行 npx tsc。可以用 监听模式 自动编译：

npx tsc --watch

Q2：TS 报错 “Cannot find module” 怎么办？

A：检查 import 路径是否正确，是否加了 .js 后缀（TS 中通常不用加）。

Q3：我能不能在现有 JS 项目中逐步引入 TS？

A：完全可以！你可以：

• 先把 .js 改成 .ts
• TS 会尽量推断类型，不强制你立刻加注解
• 逐步添加类型，提高代码质量

Q4：TS 会影响性能吗？

A：不会！TS 只在开发阶段做类型检查，最终运行的是纯 JS，零运行时开销。

---

六、学习建议 & 推荐资源

📚 书籍推荐

• 《TypeScript 入门教程》（免费在线书，中文友好）
• 《Effective TypeScript》（英文，适合进阶）

🌐 优质教程 & 资源

类型	名称	链接
官方文档	TypeScript Handbook	https://www.typescriptlang.org/docs/
中文教程	TypeScript 中文网	https://www.tslang.cn/
视频课程	freeCodeCamp 的 TS 入门	YouTube 搜索 "TypeScript for Beginners"
实战练习	TypeScript Playground	https://www.typescriptlang.org/play

💡 我当初学的时候，最喜欢用 TypeScript Playground —— 不用装环境，直接在线写代码看效果！

🔜 下一步学什么？

1. 学习 泛型（Generic）—— 让函数/类更灵活
2. 了解 高级类型（如 keyof、Partial、Pick）
3. 在 React/Vue 项目中使用 TS（现在主流框架都支持）
4. 配合 ESLint + Prettier 做代码规范

---

结语

TypeScript 不是“另一个语言”，而是 JavaScript 的超集。它像一位细心的助手，在你写代码时悄悄提醒：“这里可能有问题哦”。

我当初花了好几天才搞懂配置，但现在回头看，只要迈出第一步，后面就越来越顺。希望这篇 30 分钟指南能帮你轻松入门。

记住：不要追求一次性掌握所有类型语法，先用起来，边做边学。

祝你 coding 快乐，少 bug，多 sleep！ 😴

📌 行动建议：现在就打开终端，按照“环境准备”部分，创建你的第一个 TS 项目吧！哪怕只写一行 console.log("Hello TS!")，也是成功的开始。