React 播客专栏 Vol.6｜TypeScript 是什么？为啥写 React 要加它？

👋 欢迎回到《前端达人 · React 播客书单》第 6 期（正文内容为学习笔记摘要，音频内容是详细的解读，方便你理解），请点击下方收听

你是不是刚学 React，结果发现教程里全是 .tsx 后缀、还动不动加个冒号加个类型？别急，这一期我们带你用最直白的方式理解——TypeScript 到底是干嘛的，它能给你带来什么实际好处。

🔍 第一部分：认识 TypeScript，这个“超集”是个啥？

TypeScript，简称 TS，是由微软打造的 JavaScript 超集。什么意思？简单说，你所有能写的 JS 代码在 TS 里都能写，只不过它多了个强大武器：类型系统。

和 JS 最大的区别就是——TS 会在你写代码的时候就告诉你哪里错了。

🌟 举个例子：

你写了个 let price = "100"，结果下一行你写 price * 2，JS 不报错，但运行就出 bug。 TS 会立马在编辑器标红，说：“嘿，你这是把字符串当数字用了！”

🚀 第二部分：TS 到底好在哪？写 React 的人为什么都在用？

✅ 01. 写错立马红线警告，不用等浏览器出错才发现

TypeScript 编译器会在你写代码时就标出类型错误。

✅ 02. 超强智能提示 IntelliSense

VS Code 的属性提示、参数补全、跳转定义，全靠 TS 提供的类型信息。

✅ 03. 支持大项目的重构和模块管理

你改一个组件名、改一个接口字段名，TS 会全项目跟踪提醒你改哪里，不怕改崩项目。

一句话总结：TS 让你的开发体验从“野路子”变“企业级”。

📚 第三部分：快速掌握 TS 的核心类型

你得知道 TS 中有哪些常用“类型”，这可是理解语法的基础。

🧠 第四部分：TypeScript 的类型注解怎么写？

TS 的核心语法，就是变量或函数后面跟一个冒号加类型：

let unitPrice: number = 100;
function getTotal(price: number, count: number): number {
  return price * count;
}

是不是很好懂？变量和函数都可以“明确声明类型”。

🔍 第五部分：自动类型推断 —— TS 比你还聪明！

虽然可以写类型注解，但 TS 更厉害的是：它能自己猜出来你写的是什么类型。

let flag = false; // 推断为 boolean
let name = "前端达人"; // 推断为 string

👉 用 TS 写 React 的时候也一样，比如你用：

const [count, setCount] = useState(0);

TS 自动知道 count 是 number。如果你不写初始值，TS 就推断成 undefined，你就要加类型提示了：

const [status, setStatus] = useState<"Success" | "Fail">("Success");

🧩 第六部分：实战 React + TS 的妙用

📌 组件 Props 的强类型：

type AlertProps = {
  type: "info" | "warning";
  title: string;
  closable?: boolean;
};

function Alert({ type, title, closable = true }: AlertProps) {
  // ...
}

📌 useState 状态定义：

const [email, setEmail] = useState<string | null>(null);

📌 响应事件的函数：

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  // ...
};

这些小细节，在 TS 的加持下都更规范、更稳！

✅ 总结 Key Takeaways：

• TypeScript 是 JavaScript 的强类型升级版
• 它的类型系统帮你在开发阶段发现问题
• 支持 React 的组件、事件、状态进行强类型约束
• 类型推断让代码更简洁
• TS 是大型前端项目不可缺的技能！

#React #React播客专栏 #前端达人 #前端播客