TypeScript快速入门：30分钟上手指南
开篇：TypeScript到底是什么？
你可能听说过JavaScript，它是网页开发中最常用的脚本语言。而TypeScript（简称TS）可以理解为是JavaScript的“升级版”或“带说明书的JS”。它是在JavaScript的基础上添加了类型系统的语言，也就是说，你可以在写代码时给变量指定“它应该是什么样的数据”，比如数字、字符串、布尔值等。
那为什么要用TypeScript呢？原因有三个：
- 更安全：提前定义类型，避免在运行时出现不可预期的错误。
- 更好维护：大型项目中更容易看懂别人写的代码，尤其是变量用途一目了然。
- 更好的协作性：多人合作开发时，类型信息能帮助团队成员快速理解代码逻辑。
接下来我们会通过一个半小时内的实战教学，带你完成从安装到动手实现一个简单程序的全过程，让你迅速掌握TypeScript的基本使用。
环境准备：搭建你的第一个TypeScript环境
我们来一步步配置开发环境。
第一步：安装Node.js和npm
TypeScript依赖Node.js环境。你可以去 nodejs.org 下载安装包，选择LTS版本（更适合初学者）。安装完成后打开命令行工具（Windows下可以用CMD或PowerShell，Mac/Linux可以用Terminal），输入以下命令查看是否安装成功：
node -v
npm -v
如果显示出版本号就说明没问题了。
第二步：全局安装TypeScript和ts-node
ts-node 是一个可以直接运行 .ts 文件的工具，无需手动编译成JavaScript也能运行。输入以下命令进行安装：
npm install -g typescript ts-node
等待下载安装完毕后检查：
tsc -v
ts-node -v
第三步：创建你的第一个TS文件
新建一个文件夹，比如叫 my-ts-project，然后在里面创建一个名为 hello.ts 的文件，写入以下内容：
console.log("Hello, TypeScript!");
然后在该目录下执行下面这条命令运行它：
ts-node hello.ts
如果你看到输出了 Hello, TypeScript!，那就意味着你的TypeScript环境已经跑起来了！
💡 小贴士：也可以使用 VS Code 来编辑和运行代码，它对TypeScript的支持非常好，并且有很多智能提示。
核心概念讲解（通俗易懂+代码示例）
下面介绍一些TypeScript中最基础也最重要的几个核心概念：变量声明与类型注解、函数、接口与对象结构、联合类型。
1. 变量声明与类型注解
JavaScript允许我们直接声明变量而不关心它的类型：
let name = "Tom";
name = 123; // JS不会报错
但这样很容易出错。TypeScript允许你给变量指定明确的类型：
let name: string = "Tom";
// name = 123; // 错误！不允许将number赋值给string类型
支持的基本类型包括：
| 类型 | 示例 |
|---|---|
| number | 123, 3.14 |
| string | "abc", 'xyz' |
| boolean | true, false |
| array | number[] 或 string[] |
| any | 不限制类型（不推荐） |
| void | 没有任何返回值的函数 |
2. 函数参数与返回值类型
你可以显式地给函数参数和返回值加上类型说明：
function add(a: number, b: number): number {
return a + b;
}
console.log(add(10, 20)); // 输出30
注意如果函数没有返回值，应标注返回类型为 void：
function sayHello(): void {
console.log("你好！");
}
3. 接口（interface）描述对象结构
有时候我们要传递一个对象作为参数，怎么保证里面的数据格式正确呢？可以用 interface 定义对象结构：
interface User {
name: string;
age: number;
}
function greet(user: User) {
console.log(`欢迎${user.name}，今年${user.age}岁`);
}
greet({ name: "小明", age: 20 });
⚠️ 如果传少了字段（如只传name没传age），TypeScript会报错提醒你。
4. 联合类型（Union Types）
有的时候一个变量可能是多个类型之一，这时候就可以用联合类型 | 表示：
let id: number | string;
id = 123; // 允许
id = "abc"; // 同样允许
还可以配合函数判断来做不同的处理：
function showId(id: number | string) {
if (typeof id === "number") {
console.log("这是一个数字ID");
} else {
console.log("这是一个字符串ID");
}
}
实战项目：打造一个简易学生管理系统
这一节我们将一起开发一个简单的控制台版的学生信息管理系统。要求如下：
- 创建一个学生接口
- 存储多个学生的数据
- 实现一个打印所有学生信息的方法
Step 1：定义学生接口和数组
interface Student {
name: string;
score: number;
}
let students: Student[] = [
{ name: "张三", score: 85 },
{ name: "李四", score: 92 },
{ name: "王五", score: 78 }
];
Step 2：编写打印学生信息的函数
function printStudents(students: Student[]) {
for (let student of students) {
console.log(`${student.name}的成绩是${student.score}`);
}
}
Step 3：调用函数运行程序
printStudents(students);
把上面几段代码合并起来保存为 students.ts 文件，运行一下试试：
ts-node students.ts
你应该会看到输出：
张三的成绩是85
李四的成绩是92
王五的成绩是78
✅ 成功！这就是一个最简单的TypeScript项目。
新手常见问题答疑（FAQ）
Q1：为什么我修改完ts文件没有变化？
答：确保你每次运行都用了 ts-node 文件名.ts，或者你也可以加个 -w 参数让它自动监听文件变化并重新运行：
ts-node -w students.ts
Q2：TypeScript一定要写类型吗？
答：不一定！你可以写成：
let num = 10;
num = "abc"; // TS会自动推断类型是number，这里还是会报错
不过还是建议尽可能加上类型注解，尤其是在复杂项目中更清晰、安全。
Q3：如何调试TypeScript？
答：使用像VS Code这样的IDE时，点击左侧栏的 🐛 图标（Debug），设置launch.json，选Attach to Node.js即可进行断点调试。
学习建议：下一步该学什么？
恭喜你完成了本节课的学习！接下来可以考虑以下几个方向继续提升：
✅ 基础巩固路线：
- 学习TypeScript内置类型如
Promise<T>、Array<T>、Record<K,V> - 练习泛型编程（Generic）
- 探索类（class）与继承、修饰符（public/private/protected）
- 使用装饰器（decorators）拓展功能
- 配合ES模块打包工具如Webpack构建小型应用
📚 推荐学习资源：
- 📘 官方文档：typescriptlang.org
- 🧑🏫 B站视频教程：搜索“TypeScript零基础”
- 🕹 实操练习网站：TypeScript Playground
希望这篇《TypeScript快速入门：30分钟上手指南》对你有所帮助！坚持实践、多写代码才是进步的关键。下次见👋
评论 0