TypeScript 快速上手：30 分钟从零写出你的第一个类型安全项目

大家好，我是掘金上那个总爱写“保姆级教程”的全栈工程师。今天这篇《TypeScript 快速上手》，其实是写给三年前刚毕业的我自己——那时我第一次接触 TypeScript，被 any、interface、泛型 这些词绕得头晕眼花。但后来发现，只要理解几个核心概念，TypeScript 其实比想象中友好得多。

如果你是前端新手，或者只会写 JavaScript 却总被“类型错误”折磨，那么这篇 30 分钟实战指南，就是为你量身打造的。我们不讲理论堆砌，只聚焦能立刻用起来的知识，还会带你用 TypeScript 写一个简单的待办事项（Todo）小工具，并上传到 GitHub！

---

为什么你需要 TypeScript？

简单说：JavaScript 是“自由”的，TypeScript 是“安全”的。

• JavaScript 在运行时才发现错误（比如调用了不存在的方法）
• TypeScript 在写代码时就告诉你哪里可能出错

举个例子：

// JavaScript —— 运行时报错 ❌
function greet(name) {
  return "Hello " + name.toUpperCase();
}
greet(); // TypeError: Cannot read property 'toUpperCase' of undefined

而用 TypeScript：

// TypeScript —— 写代码时就报错 ✅
function greet(name: string) {
  return "Hello " + name.toUpperCase();
}
greet(); // 编译器立刻提示：Expected 1 argument, but got 0.

是不是安心多了？这就是“类型安全”的魅力。

---

第一步：搭建开发环境（只需 5 分钟）

别被“环境配置”吓到！现在工具链非常成熟，我们用最简单的组合：

工具	作用	安装命令
Node.js	运行 JavaScript/TypeScript	官网下载
npm / pnpm	包管理器	Node.js 自带 npm，也可 npm install -g pnpm
TypeScript	核心编译器	npm install -g typescript
VS Code	推荐编辑器（自带 TS 支持）	官网下载

💡 我当初学的时候，花了半天配 Webpack，结果根本用不上。其实初学者完全不需要打包工具！直接用 tsc 编译就行。

验证安装

打开终端，输入：

tsc --version

如果看到类似 Version 5.x.x，说明安装成功！

---

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

在任意文件夹执行以下命令：

mkdir my-first-ts-app
cd my-first-ts-app
npm init -y
npx tsc --init

这会生成一个 tsconfig.json 文件——这是 TypeScript 的“配置中心”。默认配置已经够用，我们先不动它。

然后新建一个文件 index.ts，输入：

const message: string = "Hello, TypeScript!";
console.log(message);

接着编译并运行：

npx tsc          # 生成 index.js
node index.js    # 输出：Hello, TypeScript!

🎉 恭喜！你已经跑通了第一个 TypeScript 程序！

🔧 小技巧：在 VS Code 中安装官方插件 “TypeScript Hero” 或直接使用内置支持，输入时会有实时类型提示和错误高亮。

---

第三步：掌握 5 个核心概念（够用 80% 场景）

TypeScript 的核心是“给变量加类型”。记住这 5 点，你就入门了：

1. 基础类型（string, number, boolean）

let name: string = "Alice";
let age: number = 25;
let isActive: boolean = true;

✅ 好消息：如果你写了 let name = "Alice"，TS 会自动推断为 string，不用每次都写类型！

2. 数组和对象

// 数组
let fruits: string[] = ["apple", "banana"];
// 或者
let scores: Array<number> = [90, 85, 95];

// 对象（用 interface 定义结构）
interface User {
  id: number;
  name: string;
  email?: string; // ? 表示可选
}

const user: User = {
  id: 1,
  name: "Bob"
};

3. 函数类型

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

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

4. 联合类型（Union）

一个变量可以是多种类型：

let status: "loading" | "success" | "error" = "loading";

function logId(id: string | number) {
  console.log("ID is", id);
}

5. any 和 unknown（慎用！）

• any：关闭类型检查（不推荐，等于放弃 TS 优势）
• unknown：安全版 any，使用前必须做类型检查

let data: unknown = fetchData();

if (typeof data === "string") {
  console.log(data.toUpperCase()); // ✅ 安全
}

⚠️ 避坑指南：新手常滥用 any 来“快速通过编译”，但这会让代码失去类型保护。尽量避免！

---

实战：用 TypeScript 写一个 Todo 应用（控制台版）

现在，我们来写一个能在终端运行的待办事项管理器。功能包括：

• 添加任务
• 查看任务列表
• 标记任务完成

步骤 1：定义数据结构

创建 todo.ts：

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

// 存储所有任务
let todos: Todo[] = [];
let nextId = 1;

步骤 2：实现核心函数

// 添加任务
function addTodo(text: string): void {
  todos.push({
    id: nextId++,
    text,
    done: false
  });
}

// 切换任务状态
function toggleTodo(id: number): void {
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.done = !todo.done;
  }
}

// 打印所有任务
function listTodos(): void {
  todos.forEach(todo => {
    const status = todo.done ? "[✓]" : "[ ]";
    console.log(`${status} ${todo.id}: ${todo.text}`);
  });
}

步骤 3：添加交互逻辑

在 index.ts 中调用：

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

addTodo("学习 TypeScript");
addTodo("提交代码到 GitHub");
toggleTodo(1);

listTodos();

步骤 4：运行看看！

npx tsc
node index.js

输出：

[✓] 1: 学习 TypeScript
[ ] 2: 提交代码到 GitHub

完美！你已经用 TypeScript 写了一个有状态的小程序。

---

把代码上传到 GitHub（新手必学技能）

学会用 GitHub 管理代码，是每个开发者的基本功。操作如下：

1. 在 GitHub 创建新仓库（比如 my-first-ts-app）
2. 在项目根目录初始化 Git：

git init
git add .
git commit -m "feat: initial TypeScript todo app"

3. 关联远程仓库并推送：

git remote add origin https://github.com/你的用户名/my-first-ts-app.git
git push -u origin main

💡 提示：记得把 node_modules 加入 .gitignore，避免上传依赖包。

现在，你的代码就永久保存在 GitHub 上了！不仅可以备份，还能展示给未来面试官看。

---

新手常见问题解答（FAQ）

Q1：TS 文件怎么在浏览器运行？

A：目前我们用 node 运行的是后端逻辑。若想在浏览器用 TS，需搭配构建工具（如 Vite）。但初学者建议先掌握语法，再学工程化。

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

A：检查文件路径是否正确，TS 默认只识别 .ts 后缀。确保 import 路径以 ./ 开头。

Q3：必须写类型注解吗？

A：不一定！TS 有强大的类型推断。只有当变量初始值不确定时（如函数参数），才需要显式标注。

Q4：如何查看编译后的 JS？

A：npx tsc 会在同目录生成 .js 文件。你可以对比源码和产物，理解 TS 如何“翻译”成 JS。

---

下一步学习建议

TypeScript 入门只是开始，后续你可以：

1. 深入类型系统：学习 type vs interface、泛型、条件类型
2. 结合框架使用：Vue 3 和 React 官方都推荐 TS，尝试写 TS 版组件
3. 配置工程化：用 Vite + TS 搭建前端项目
4. 阅读优秀源码：很多开源项目（如 Axios、Pinia）都是 TS 写的，适合学习

📚 我推荐的学习路径：

• 官方文档 TypeScript Handbook
• 掘金专栏《TypeScript 实战精讲》
• 在 GitHub 上 fork 别人的 TS 项目，动手改一改

---

结语

30 分钟前，你可能连 TypeScript 是什么都不知道；现在，你已经能写出带类型检查的完整小程序，并把它放到 GitHub 上了！

记住：编程不是记住所有规则，而是学会解决问题。TypeScript 的最大价值，不是让你写更多代码，而是帮你更早发现错误、更自信地重构。

如果你觉得这篇教程有帮助，欢迎点赞收藏，也欢迎去我的 GitHub 看更多实战项目。下期见！