TypeScript 30 分钟上手：零基础也能写的前端代码
大家好，我是阿哲，一名在大厂干了三年前端开发的工程师，平时也在 B 站分享技术干货。最近很多刚入门的朋友私信问我：“TypeScript 到底难不难？要不要学？”其实我当初学的时候也一脸懵，文档一堆术语，配置复杂得像解谜游戏。但后来我发现——只要用对方法，30 分钟就能写出第一个 TS 程序！
今天这篇教程，就是专门为你——完全零基础的新手量身打造的。不讲理论堆砌，只带你动手写代码、跑起来、看到结果。全程实践导向，跟着敲一遍，你就能理解 TypeScript 的核心价值。
为什么你需要 TypeScript？
简单说：TypeScript 是 JavaScript 的“超集”，意思是你写的 JS 代码在 TS 里都能直接运行，但 TS 多了“类型检查”这个超能力。
举个例子：
你在 JS 里写 user.name，如果 user 是 null，程序会突然报错崩溃。但在 TS 里，编辑器会提前告诉你：“嘿，user 可能是空的，小心点！”——这能帮你避免大量线上 bug。
我在大厂项目里，90% 的新项目都强制使用 TS。它就像给你的代码装了个“安全气囊”。
第一步：环境准备（5 分钟搞定）
别担心，现在搭建 TS 环境比泡面还快！
1. 安装 Node.js
- 访问 https://nodejs.org，下载 LTS 版本（长期支持版）
- 安装时一路“下一步”即可
- 安装完成后，打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入：
如果看到版本号（比如 v18.x.x），说明安装成功！node -v npm -v
2. 初始化 TypeScript 项目
在你想放代码的文件夹里（比如桌面新建一个 ts-demo 文件夹），执行以下命令：
# 初始化 npm 项目（生成 package.json）
npm init -y
# 安装 TypeScript 开发依赖
npm install -D typescript
# 生成 tsconfig.json 配置文件
npx tsc --init
💡 小贴士：
-D表示“开发依赖”，意思是上线时不需要这些包，只在你本地开发用。
3. 创建你的第一个 TS 文件
在项目根目录新建一个 index.ts 文件，随便写点东西：
console.log("Hello, TypeScript!");
4. 编译并运行
在终端运行：
npx tsc index.ts
你会看到生成了一个 index.js 文件！接着运行：
node index.js
输出：Hello, TypeScript! —— 恭喜你，第一个 TS 程序跑通了！
🚨 注意：每次改
.ts文件后，都要重新npx tsc编译成.js才能运行。后面我们会教你怎么自动编译。
核心概念：类型、接口、函数（10 分钟掌握）
TypeScript 的核心就是 给变量、函数、对象加上“类型标签”，让代码更清晰、更安全。
1. 基础类型（最常用 5 种）
| 类型 | 示例 | 说明 |
|---|---|---|
string |
"hello" |
字符串 |
number |
42, 3.14 |
数字（不分整数浮点） |
boolean |
true, false |
布尔值 |
null |
null |
空值 |
undefined |
undefined |
未定义 |
代码示例：
let name: string = "Alice";
let age: number = 25;
let isActive: boolean = true;
// ❌ 错误！TS 会报错：不能把 number 赋给 string
// name = 123;
✅ 小技巧：TS 能自动推断类型！所以通常可以省略类型声明：
let name = "Alice"; // 自动推断为 string
2. 数组和对象
数组：
// 写法1：元素类型 + []
let fruits: string[] = ["apple", "banana"];
// 写法2：Array<类型>
let scores: Array<number> = [90, 85, 95];
对象（用 interface 定义结构）：
// 定义一个“用户”结构
interface User {
name: string;
age: number;
email?: string; // ? 表示可选属性
}
const user: User = {
name: "Bob",
age: 30
// email 可以不写，因为是可选的
};
💡 我当初学的时候总混淆
type和interface，其实新手用interface就够了，它专门用来描述对象形状。
3. 函数：参数和返回值也要有类型！
function greet(name: string): string {
return "Hello, " + name;
}
// 调用
greet("Charlie"); // ✅ 正确
// greet(123); // ❌ 报错：参数应为 string
箭头函数也一样：
const add = (a: number, b: number): number => a + b;
实战项目：做一个简单的待办事项列表（12 分钟）
现在，我们把上面的知识串起来，写一个控制台版 Todo 应用！
步骤 1：定义数据结构
在 index.ts 中添加：
interface Todo {
id: number;
text: string;
completed: boolean;
}
let todos: Todo[] = [];
let nextId = 1;
步骤 2：添加任务函数
function addTodo(text: string): void {
todos.push({
id: nextId++,
text,
completed: false
});
}
void表示函数没有返回值。
步骤 3：标记完成 & 列出所有任务
function toggleTodo(id: number): void {
const todo = todos.find(t => t.id === id);
if (todo) {
todo.completed = !todo.completed;
}
}
function listTodos(): void {
todos.forEach(todo => {
const status = todo.completed ? "[✓]" : "[ ]";
console.log(`${status} ${todo.id}: ${todo.text}`);
});
}
步骤 4：测试一下！
在文件末尾添加：
// 添加两个任务
addTodo("学习 TypeScript");
addTodo("写博客");
// 标记第一个任务为完成
toggleTodo(1);
// 打印所有任务
listTodos();
步骤 5：编译并运行
npx tsc index.ts
node index.js
输出：
[✓] 1: 学习 TypeScript
[ ] 2: 写博客
🎉 恭喜！你已经用 TS 写了一个有逻辑的小程序！
新手常见问题解答（避坑指南）
Q1：为什么我改了 .ts 文件，但 node 运行的还是旧代码？
A：因为你忘了重新编译！TS 不是直接运行的，必须先 npx tsc 生成 .js 文件。
🔧 解决方案：安装
ts-node，可以直接运行 TS 文件：npm install -D ts-node npx ts-node index.ts # 直接运行，无需手动编译
Q2：报错 “Cannot find name ‘xxx’” 怎么办？
A：通常是拼写错误，或者变量没声明。TS 对大小写敏感，userName 和 username 是两个东西！
Q3：类型太严格了，老报错，能不能关掉？
A：可以，但不建议！TS 的价值就在于提前发现问题。如果你确定某个地方没问题，可以用 // @ts-ignore 临时跳过检查（慎用！）。
Q4：怎么在浏览器里用 TS？
A：需要配合打包工具（如 Vite、Webpack）。新手建议先用 Node.js 练手，后面再学前端框架集成。
下一步学习建议 + 免费资源推荐
你已经跨过了最难的第一步！接下来：
📚 推荐学习路径
- 深入类型系统：联合类型（
string | number）、泛型（Array<T>） - 工程化：用 Vite 创建 TS + React/Vue 项目
- 类型定义文件：理解
@types/xxx是什么
🌟 免费优质资源（我都亲自用过！）
| 资源类型 | 名称 | 地址 |
|---|---|---|
| 官方文档 | TypeScript Handbook | https://www.typescriptlang.org/docs/ |
| GitHub 示例 | ts-examples | https://github.com/microsoft/TypeScript/tree/main/samples |
| 中文教程 | TypeScript 入门教程（阮一峰） | https://ts.xcatliu.com/ |
| 视频课程 | B站：TypeScript 零基础实战 | 搜索“阿哲 TypeScript”（就是我！） |
💬 最后说一句：不要怕报错！ TS 的报错信息其实是在“教你写正确的代码”。我当初每天看几十条红标，现在反而觉得那是最贴心的“编程教练”。
结语
30 分钟很短，但足够让你亲手写出第一个 TypeScript 程序。记住：编程不是背概念，而是动手做。今天你写的 Todo 列表，就是未来大型项目的起点。
如果你觉得这篇教程帮到了你，欢迎去 B 站关注我（搜“前端阿哲”），我会持续更新更多“人话版”技术教程。下期见！
评论 0