TypeScript快速入门：30分钟上手指南
大家好！我是一个从中文系转行做前端开发的“野生程序员”。当初学编程时，光是看到“TypeScript”这几个字就头晕——听起来又硬核又抽象。但后来我发现，它其实是我写 React 产品时最得力的帮手。今天我就用最直白的语言，带你30分钟快速上手 TypeScript，哪怕你连 JavaScript 都不太熟也没关系！
为什么你需要 TypeScript？
简单说：TypeScript = JavaScript + 类型检查。
想象你在做一个电商产品，用户下单时要填地址、电话、商品数量。如果代码里不小心把“电话”当成数字处理（比如 13800138000 被当成数字运算），程序可能崩溃。JavaScript 不会提前告诉你这个错误，但 TypeScript 会在你写代码时就提醒你：“喂，电话应该是字符串，不是数字！”
我当初学的时候，一个项目改了三天 bug，最后发现是因为某个变量本该是数组，结果被赋值成了对象。自从用了 TypeScript，这类低级错误几乎绝迹。
第一步：环境准备（5分钟）
我们不需要安装 Go（Go 是另一门后端语言，和 TypeScript 无关），但需要 Node.js 和 npm。
安装步骤：
安装 Node.js
去 https://nodejs.org 下载 LTS 版本（长期支持版），安装即可。创建项目文件夹
mkdir my-ts-app cd my-ts-app初始化项目
npm init -y安装 TypeScript
npm install -g typescript # 或者本地安装（推荐） npm install --save-dev typescript生成配置文件
npx tsc --init这会生成一个
tsconfig.json文件，用来告诉 TypeScript 如何编译你的代码。
✅ 小贴士：如果你打算用 React，后面我们会用
create-react-app更快地搭建环境。
第二步：核心概念速览（10分钟）
别被“类型系统”吓到，它其实就是给变量贴标签。
1. 基础类型（Type）
| JavaScript 写法 | TypeScript 写法 | 说明 |
|---|---|---|
let name = "张三" |
let name: string = "张三" |
明确声明是字符串 |
let age = 25 |
let age: number = 25 |
数字类型 |
let isActive = true |
let isActive: boolean = true |
布尔值 |
但 TypeScript 很聪明，通常可以自动推断类型：
let name = "李四"; // 自动推断为 string，不用写 :string
2. 函数也有类型
function greet(user: string): string {
return "你好，" + user;
}
(user: string)表示参数必须是字符串: string表示返回值也必须是字符串
如果调用 greet(123)，编辑器立刻报错！
3. 接口（Interface）——定义“形状”
当你在开发一个产品功能，比如“用户资料”，你可以先定义它的结构：
interface User {
name: string;
age: number;
email?: string; // 加 ? 表示可选
}
const user1: User = {
name: "王五",
age: 30
// email 可以不写
};
💡 我当初学接口时总记不住语法，后来把它想象成“产品需求文档”：User 这个对象必须包含 name 和 age，email 看情况加。
4. 类型 vs 接口？新手不用纠结！
初学者可以先全部用 interface，等以后深入再区分。它们都能定义对象结构。
第三步：实战小项目（12分钟）
我们来做一个简单的“待办事项”列表（To-Do List）的核心逻辑，用纯 TypeScript 演示。
步骤 1：新建文件 todo.ts
// 定义任务的结构
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);
}
// 标记完成
function toggleTodo(id: number): void {
const todo = todos.find(t => t.id === id);
if (todo) {
todo.done = !todo.done;
}
}
// 打印所有任务
function printTodos(): void {
todos.forEach(todo => {
console.log(`[${todo.done ? '✓' : ' '}] ${todo.text}`);
});
}
// 使用示例
addTodo("学习 TypeScript");
addTodo("用 React 做产品");
toggleTodo(todos[0].id);
printTodos();
步骤 2：编译并运行
在终端执行：
npx tsc todo.ts
node todo.js
你会看到输出：
[✓] 学习 TypeScript
[ ] 用 React 做产品
✅ 成功！你已经用 TypeScript 写了一个有类型安全的小程序。
如果你想结合 React？
实际工作中，TypeScript + React 是黄金组合。创建项目只需一行命令：
npx create-react-app my-react-ts-app --template typescript
它会自动生成带 TypeScript 支持的 React 项目，App.tsx 就是你的入口文件。
第四步：新手常见问题（FAQ）
Q1：.ts 和 .tsx 有什么区别？
.ts：纯 TypeScript 文件.tsx：包含 JSX（React 的模板语法）的 TypeScript 文件
→ 写 React 组件时用.tsx
Q2：类型写错了怎么办？会不会很麻烦？
不会！现代编辑器（如 VS Code）会实时提示错误。而且很多类型可以省略，TypeScript 会自动推断。
比如：
const count = 0; // 自动是 number
const handleClick = () => {}; // 自动是 () => void
Q3：学 TypeScript 会影响我用 React 吗？
恰恰相反！TypeScript 让 React 开发更安全。比如组件 props 的类型可以明确定义：
interface ButtonProps {
label: string;
onClick: () => void;
}
const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
<button onClick={onClick}>{label}</button>
);
这样，别人用你的 <Button> 组件时，如果漏传 label，立刻报错！
Q4：和 Go 有什么关系？
没有直接关系。Go 是 Google 开发的后端语言，常用于高性能服务。而 TypeScript 主要用于前端（配合 React/Vue 等）。但在全栈产品中，你可能会同时用到：前端用 TS + React，后端用 Go。
下一步学习建议
- 先掌握基础类型：
string、number、boolean、array、object - 学会定义接口：这是组织产品数据结构的关键
- 在 React 项目中实践：从简单组件开始加类型
- 不要追求 100% 类型覆盖：初期能覆盖核心逻辑就很好
- 善用 VS Code 的提示：它会告诉你哪里类型不匹配
🌟 我的经验：TypeScript 最大的价值不是“防止错误”，而是让代码更易读、更易维护。三个月后你回头看自己的代码，会感谢当初加了类型的自己。
恭喜你！30分钟不到，你已经迈出了 TypeScript 的第一步。记住：每一个复杂的系统，都是从一行带类型的代码开始的。现在，去你的 React 产品里试试吧！
评论 0