TypeScript快速入门：30分钟上手指南
大家好，我是一名工作5年的后端开发工程师。虽然我的主战场在服务端，但在日常协作中，我越来越频繁地接触前端项目——尤其是用 React 写的。几年前，当我第一次看到 .ts 或 .tsx 文件时，完全懵了：这不就是 JavaScript 吗？为什么还要加个“Type”？后来我才明白，TypeScript 是 JavaScript 的超集，它给 JS 加上了“类型系统”，让代码更安全、更易维护。
我当初学的时候，走了不少弯路：配置环境卡半天、类型报错看不懂、不知道从哪下手……所以今天，我想用最简单的方式，带你 30分钟快速上手 TypeScript，尤其适合零基础、想配合 React 使用的新手朋友。
一、TypeScript 是什么？为什么要用它？
简单说：
TypeScript = JavaScript + 类型系统
- 它由微软开发，最终会被编译成普通 JavaScript（浏览器能运行的代码）
- 在开发阶段帮你提前发现错误（比如你把字符串当成数字用）
- 让代码更容易阅读和维护（函数参数是什么类型？一眼就知道）
- 和 React 配合得天衣无缝，现在主流 React 项目基本都用 TS
举个例子：
// JavaScript（可能出错但运行时才暴露）
function greet(name) {
console.log("Hello " + name.toUpperCase());
}
greet(null); // ❌ 运行时报错：Cannot read property 'toUpperCase' of null
// TypeScript（写代码时就提示错误）
function greet(name: string) {
console.log("Hello " + name.toUpperCase());
}
greet(null); // ✅ 编辑器立刻报错：Argument of type 'null' is not assignable to parameter of type 'string'
看出来了吧？TypeScript 把问题从“运行时”提前到了“写代码时”，大大减少线上 bug！
二、环境准备：5分钟搭好开发环境
别担心，现在工具链已经非常成熟，几步就能搞定。
步骤 1：安装 Node.js
去 https://nodejs.org 下载 LTS 版本（长期支持版），安装即可。
验证是否成功：
node -v # 显示版本号，如 v18.x.x
npm -v # 显示版本号，如 9.x.x
步骤 2：创建一个 TypeScript 项目（不带 React 先练手）
# 创建文件夹并进入
mkdir ts-demo && cd ts-demo
# 初始化 npm 项目
npm init -y
# 安装 TypeScript
npm install -D typescript
# 生成默认配置文件
npx tsc --init
你会看到一个 tsconfig.json 文件，这是 TypeScript 的“说明书”，告诉编译器怎么工作。
步骤 3：写第一个 TS 文件
新建 index.ts：
const message: string = "Hello, TypeScript!";
console.log(message);
步骤 4：编译并运行
# 编译成 JS
npx tsc
# 运行生成的 JS 文件（默认输出到同目录的 index.js）
node index.js
✅ 输出：Hello, TypeScript!
💡 小技巧：可以用
npx tsc --watch开启监听模式，文件一改自动编译。
三、核心概念：用最简单的语言讲清楚
TypeScript 的核心就是 “给变量、函数等加上类型”。我们一个个来看。
1. 基础类型（最常用）
| 类型 | 示例 | 说明 |
|---|---|---|
string |
"hello" |
字符串 |
number |
42, 3.14 |
数字 |
boolean |
true, false |
布尔值 |
array |
[1, 2, 3] |
数组 |
object |
{ name: "Alice" } |
对象 |
null / undefined |
null |
空值 |
代码示例：
let name: string = "张三";
let age: number = 25;
let isActive: boolean = true;
let hobbies: string[] = ["读书", "编程"]; // 字符串数组
let person: { name: string; age: number } = { name: "李四", age: 30 };
⚠️ 注意：TS 会自动推断类型！比如
let count = 10;，TS 知道count是number，不用写: number。
2. 函数类型
函数的参数和返回值也可以加类型：
function add(a: number, b: number): number {
return a + b;
}
// 箭头函数
const multiply = (x: number, y: number): number => x * y;
3. 接口（Interface）——定义对象结构
当你需要描述一个对象“长什么样”时，用 interface：
interface User {
id: number;
name: string;
email?: string; // ? 表示可选
}
const user1: User = { id: 1, name: "王五" }; // ✅ 合法
const user2: User = { id: 2, name: "赵六", email: "zhaoliu@example.com" }; // ✅ 合法
4. 类型别名（Type Alias）
和 interface 类似，但更灵活：
type ID = string | number; // 联合类型：可以是字符串或数字
type Point = { x: number; y: number };
const point: Point = { x: 10, y: 20 };
🆚 Interface vs Type：简单记——定义对象结构用
interface，其他场景（如联合类型、元组）用type。
四、实战：用 TypeScript + React 写一个 Todo List
现在，我们把 TS 用到 React 中！我们将创建一个极简的待办事项应用。
步骤 1：用 Vite 创建 React + TS 项目
Vite 是新一代构建工具，快如闪电：
npm create vite@latest my-react-ts-app -- --template react-ts
cd my-react-ts-app
npm install
npm run dev
打开 http://localhost:5173，看到 React 欢迎页就算成功！
步骤 2：编写 Todo 组件
编辑 src/App.tsx：
import { useState } from 'react';
// 定义 Todo 项的结构
interface Todo {
id: number;
text: string;
completed: boolean;
}
function App() {
const [todos, setTodos] = useState<Todo[]>([
{ id: 1, text: "学习 TypeScript", completed: false },
{ id: 2, text: "写 React 组件", completed: true }
]);
const [inputText, setInputText] = useState<string>("");
const addTodo = () => {
if (inputText.trim() === "") return;
const newTodo: Todo = {
id: Date.now(),
text: inputText,
completed: false
};
setTodos([...todos, newTodo]);
setInputText("");
};
const toggleTodo = (id: number) => {
setTodos(
todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
return (
<div style={{ padding: "20px" }}>
<h1>我的待办事项</h1>
{/* 输入框 */}
<input
type="text"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
placeholder="输入新任务..."
/>
<button onClick={addTodo}>添加</button>
{/* 列表 */}
<ul>
{todos.map(todo => (
<li
key={todo.id}
style={{
textDecoration: todo.completed ? "line-through" : "none",
cursor: "pointer"
}}
onClick={() => toggleTodo(todo.id)}
>
{todo.text}
</li>
))}
</ul>
</div>
);
}
export default App;
关键点解析：
useState<Todo[]>：告诉 React 这个 state 是Todo对象的数组interface Todo：清晰定义每个待办项的结构- 所有函数参数、state 变量都有明确类型，编辑器会智能提示！
✅ 现在你可以添加、点击完成任务了！整个过程几乎没有类型错误，因为 TS 在背后帮你把关。
五、新手常见问题 & 解决方案
Q1：为什么我写了 TS，但浏览器还是报错？
A：TypeScript 只在开发阶段检查类型，最终运行的是编译后的 JS。如果你的代码逻辑本身有错（比如除以 0），TS 不会拦住——它只管“类型”。
Q2：any 类型是什么？能用吗？
A：any 表示“任意类型”，用了就等于关掉 TS 的类型检查。尽量避免！ 实在不行，先用 unknown，再做类型判断。
Q3：React 组件 props 怎么加类型？
A：用 interface 定义 props 结构：
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}
const Button = ({ label, onClick, disabled = false }: ButtonProps) => {
return <button onClick={onClick} disabled={disabled}>{label}</button>;
};
Q4：第三方库没有类型怎么办？
A：大多数流行库（如 lodash、axios）都有官方或社区提供的类型包。安装方式：
npm install @types/lodash --save-dev
六、下一步学习建议
恭喜你！你已经跨过了 TypeScript 最难的第一步。接下来：
- 多写多练：把现有 JS 项目逐步迁移到 TS
- 深入学习：
- 泛型（Generics）：
function identity<T>(arg: T): T - 工具类型：
Partial<T>,Pick<T, K>等 - 模块与命名空间
- 泛型（Generics）：
- 结合 React 进阶：
- 自定义 Hook 的类型
- Context 的类型定义
- React.FC vs 直接函数组件
💡 我的经验：不要追求 100% 类型覆盖，先保证核心逻辑有类型，慢慢完善。TypeScript 是你的助手，不是考官。
结语
我当初学 TypeScript 时，也觉得“类型好麻烦”，但一旦习惯，就再也回不去了。它让你写出更自信、更少 bug 的代码——尤其是在团队协作中，价值巨大。
这篇《30分钟上手指南》希望能成为你 TS 之旅的起点。记住：每一个大神，都曾是一个连 tsc 都打不对的新手。
动手试试吧！有问题欢迎留言讨论 😊
评论 0