TypeScript 入门 — JavaScript + 类型
了解 TypeScript:JS 超集、类型安全、为什么大项目都用它 · 难度:入门 · +15XP
TypeScript 是什么?
TypeScript(TS) 是 JavaScript 的超集——所有 JS 代码都是合法的 TS 代码,TS 在 JS 基础上增加了类型系统。
回顾你学的 JS:变量可以存任何类型,运行时才发现错误。TS 让你写代码时就发现问题,不用等到浏览器报错。
为什么学 TypeScript?
| 优势 | 说明 |
|---|---|
| 🛡️ 类型安全 | 编译时检查类型错误,减少 15-20% 的 bug |
| 📝 更好的代码提示 | IDE 自动补全、跳转定义、重构支持一流 |
| 🏢 大厂标配 | VS Code 本身就用 TS 写的,Google、Airbnb、Slack 都在用 |
| 📚 自文档化 | 类型定义就是最好的文档,接手别人代码不再靠猜 |
TS vs JS — 一个例子说明类型的作用
// JavaScript — 运行时才报错
function add(a, b) {
return a + b;
}
add(1, "2"); // "12" — 字符串拼接!不是你想要的!
// TypeScript — 写代码时就提示错误
function add(a: number, b: number): number {
return a + b;
}
add(1, "2"); // ❌ 编辑器报错:类型"string"不能赋给"number"
动手试试
- 看上面的代码对比,理解类型的作用
- 如果把 add 函数的参数改成 string 类型,调用时传数字会怎样?