一、TypeScript到底是什么？
TypeScript是微软推出的一款"JavaScript增强版"，简单来说就是给JavaScript加上了类型检查功能。就像给变量贴上标签，告诉编译器"这个变量只能是数字"、"这个函数必须返回字符串"。
所有JavaScript代码都是合法的TypeScript代码，这意味着你可以无缝迁移，不用担心兼容性问题。
二、为什么选择TypeScript？
JavaScript的灵活性在大型项目中会变成噩梦：
| JavaScript的问题 | TypeScript的解决方案 |
|---|---|
| 变量类型不明确 | 明确类型注解 |
| 对象结构混乱 | 接口约束对象结构 |
| 运行时错误难追踪 | 编译时类型检查 |
举个例子：
// JavaScript版本
function calculate(a, b) {
return a * b;
}
calculate("5", 3); // 返回"555"，但可能不是你想要的
// TypeScript版本
function calculate(a: number, b: number): number {
return a * b;
}
calculate("5", 3); // ❌ 编译时报错：类型不匹配
三、TypeScript基础语法详解
1. 基本类型声明
TypeScript提供了清晰的基础类型：
let count: number = 10; // 数字类型
const title: string = "Hello"; // 字符串类型
const isActive: boolean = true; // 布尔类型
类型推断：即使不声明类型，TypeScript也会根据初始值自动推断。
2. 数组与元组
// 数组类型
const numbers: number[] = [1, 2, 3, 4];
const names: string[] = ["Alice", "Bob"];
// 元组类型（固定长度和类型）
const user: [string, number] = ["张三", 25];
3. 枚举类型
枚举让代码更清晰：
enum Status {
Pending,
Success,
Failed
}
const currentStatus: Status = Status.Pending;
4. 接口（Interface）
接口用来描述对象的结构：
interface User {
name: string;
age: number;
email?: string; // ?表示可选属性
}
const user: User = {
name: "李四",
age: 30
};
四、TypeScript在React中的应用
1. 函数组件类型约束
interface Props {
title: string;
count: number;
}
const Card: React.FC<Props> = ({ title, count }) => {
return (
<div>
<h3>{title}</h3>
<p>数量：{count}</p>
</div>
);
};
2. 状态管理中的类型约束
// 明确状态类型
const [age, setAge] = useState<number>(25);
const [name, setName] = useState<string>("王五");
3. 事件处理函数的类型约束
interface InputProps {
value: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
const InputField: React.FC<InputProps> = ({ value, onChange }) => {
return <input value={value} onChange={onChange} />;
};
五、如何开始你的TypeScript之旅
第一步：安装配置
npm install -D typescript
npx tsc --init # 生成tsconfig.json
第二步：渐进式迁移
- 把
.js文件改成.ts - 逐步添加类型注解
- 从核心模块开始迁移
第三步：享受类型安全
- 开发时就能看到错误提示
- IDE智能提示更精准
- 团队协作更顺畅
🎯 官方文档
-
TypeScript 官方文档: www.typescriptlang.org/docs/
-
TypeScript 手册: www.typescriptlang.org/docs/handbo…
