TypeScript 快速入门笔记：从零理解类型系统

最近开始系统学习 TypeScript，整理了一些入门笔记，分享给同样在路上的朋友们。

TypeScript 和 JavaScript 有什么不同？

这是最基础也最重要的问题。简单来说：TypeScript = JavaScript + 类型系统。

最大的好处就是——在编码阶段就能发现问题，而不是等到运行时报错。这意味着更少的 debug 时间，更安心的重构体验。

TypeScript 能转换成 JavaScript 吗？

可以。 浏览器和 Node.js 不能直接运行 TypeScript，所以需要编译（transpile）成 JavaScript。

整个流程很简单：

TypeScript 源码 (.ts) → tsc 编译器 → JavaScript 代码 (.js) → 运行

你写好 .ts 文件，运行 tsc 命令，就能得到 .js 文件。现在很多构建工具（如 Vite）会自动帮你做这一步。

TypeScript 能帮助预防什么样的错误？

我总结了四种最常见的场景：

1. 类型错误

把字符串当数字用，TS 当场报错：

const num: number = "hello"; // ❌ 不能将类型 "string" 分配给类型 "number"

2. 参数数量不对

函数声明了参数，调用时忘记传：

function greet(name: string) {}
greet(); // ❌ 缺少参数

3. 访问不存在的属性

对象上没有这个属性，TS 直接提示：

const obj = { name: "Tom" };
obj.age; // ❌ 类型上不存在 "age"

4. 拼写错误

加上 VS Code 的自动补全，基本告别手误。这大概是每天用得最多的功能 😄

TypeScript 能让代码运行更快吗？

不能。 这是一个很常见的误解。

TypeScript 只在编译阶段起作用，编译成 JavaScript 之后，运行速度和普通 JavaScript 完全一样。它不会优化运行时的性能，但它极大地提升了开发效率——让你写代码更快、更稳、更自信。

什么是”类型”？

类型其实就是数据的种类，告诉程序这个变量是什么：

const name: string = "小明"; // 字符串
const age: number = 18; // 数字
const isStudent: boolean = true; // 布尔值

可以把类型想象成给数据贴的标签——程序看到标签就知道它能做什么、不能做什么。字符串可以 .length 取长度，数字可以做 + - * / 运算，混着用就会报错。

写在最后

以上是 TypeScript 入门阶段最基础的核心概念。刚开始接触类型系统可能会觉得有点麻烦，但用上一段时间就会发现——类型系统不是在给你添麻烦，而是在帮你兜底。

后面还会继续整理类型注解、对象类型、泛型等内容，欢迎关注交流 🌟