TypeScript快速入门：30分钟上手指南

---

开篇：什么是TypeScript？它能做什么？

你可能听说过JavaScript，它是网页开发中最常用的编程语言之一。但有时候，写JavaScript代码可能会让人感到“太自由”，尤其是项目变大之后，容易出现一些难以追踪的错误。

TypeScript 就是在JavaScript的基础上加了一层“规矩” —— 类型系统。它允许你在写代码的时候提前定义变量是什么类型的（比如数字、字符串、布尔值等），这样就能帮助你更早地发现错误，提高代码可读性和维护性。

简单来说：

• 如果JavaScript像是一张白纸，那你可以在上面随便画画
• 那么TypeScript就像是一张有格子的练习本，帮你把字写得更整齐，更容易读懂

TypeScript最终会被编译成普通的JavaScript代码，运行在浏览器中。所以它非常适合用来开发大型项目或者团队协作。

---

环境准备：搭建你的第一个TypeScript环境

步骤1：安装Node.js和npm

我们使用Node.js来运行TypeScript编译工具。首先确保你已经安装了Node.js（推荐LTS版本）。

安装完成后，在终端执行以下命令检查是否安装成功：

node -v
npm -v

你会看到类似下面的输出：

v18.12.1
9.2.0

步骤2：安装TypeScript和ts-node

为了让TypeScript能够运行在本地，我们需要安装两个关键工具：

• typescript：官方编译器，将.ts文件转换为.js
• ts-node：可以直接运行.ts文件，不需要手动编译

执行以下命令安装：

npm install -g typescript ts-node

再次验证是否安装成功：

tsc -v
ts-node -v

输出应该类似于：

Version 5.3.3
v10.9.1

步骤3：创建你的第一个.ts文件

新建一个文件夹，比如命名为my-ts-project，进入该目录后创建一个文件main.ts：

mkdir my-ts-project
cd my-ts-project
touch main.ts

然后打开这个文件，写入以下代码：

console.log("Hello, TypeScript!");

保存后，用ts-node运行这个文件：

ts-node main.ts

你应该会看到控制台输出：

Hello, TypeScript!

🎉 成功运行了第一个TypeScript程序！

---

核心概念：从变量到函数，轻松掌握TypeScript基础语法

我们先来认识几个非常核心的概念，并通过简单的例子理解它们。

一、变量与类型注解

在JavaScript中你可以这么写：

let age = 25;
age = "二十五"; // 这是合法的

但在TypeScript中，默认不允许这样做，因为你已经定义了age是一个数字。

正确写法如下：

let age: number = 25;
// age = "二十五";  // 错误！不能把字符串赋给数字类型

常见类型有哪些？

类型	示例
number	123, 3.14
string	"hello", 'world'
boolean	true, false
array	[1, 2, 3]
object	{ name: "Tom" }
any	可以是任何类型（慎用）

示例：

let name: string = "Alice";
let isStudent: boolean = true;
let scores: number[] = [85, 90, 76];

✅ Tip：尽量不要使用any，因为它会关闭类型检查功能，失去TypeScript的优势。

---

二、函数参数和返回值类型

TypeScript也支持对函数进行类型标注。

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(3, 5));  // 输出：8
// console.log(add('3', 5)); // 报错！参数必须是number类型

如果你不希望函数返回任何值，可以用void表示：

function sayHello(): void {
  console.log("Hello");
}

---

三、类型推断

TypeScript有个很聪明的功能叫做“类型推断”。即使你没有显式标注类型，TS也能根据你的初始值自动推断出类型。

例如：

let name = "Bob";  // 类型被推断为string
name = "Alice";    // 合法
// name = 123;      // 不合法！因为类型已经是string

---

四、接口（interface）

当你想描述一个对象的结构时，可以用interface。

interface User {
  name: string;
  age: number;
}

function printUser(user: User) {
  console.log(`Name: ${user.name}, Age: ${user.age}`);
}

const user1: User = { name: "Tom", age: 20 };
printUser(user1);

如果你少写了某个属性，或类型不对，TS会报错。

---

五、联合类型（Union Types）

有些时候，一个变量可以接受多种类型，这时候就可以用联合类型。

let id: number | string;

id = 123;      // 正确
id = "abc123"; // 正确
// id = true;   // 错误！不是number也不是string

---

六、类型别名（Type Aliases）

你可以给复杂类型起个别名，让代码更清晰。

type ID = number | string;

let userId: ID = 1001;
userId = "user_1001"; // 合法

---

实战项目：做一个简单的成绩管理系统

现在我们用学到的知识来做一个小项目 —— 成绩统计系统。

目标：

• 定义学生信息
• 计算平均分
• 打印结果

第一步：定义数据结构

interface Student {
  name: string;
  scores: number[];
}

第二步：编写计算函数

function calculateAverage(scores: number[]): number {
  const total = scores.reduce((sum, score) => sum + score, 0);
  return total / scores.length;
}

第三步：创建学生并调用函数

const student: Student = {
  name: "小明",
  scores: [88, 92, 75]
};

const avg = calculateAverage(student.scores);
console.log(`${student.name} 的平均分是：${avg.toFixed(2)} 分`);

输出结果：

小明 的平均分是：85.00 分

这就是一个完整的TypeScript小程序啦！✨

---

常见问题解答：新手必看！

Q1：为什么我的VS Code报错了？

可能是缺少配置文件，或者没有开启类型检查。尝试添加一个tsconfig.json文件：

tsc --init

这个命令会生成默认的TypeScript配置文件。

Q2：能不能不写类型？

当然可以，但建议初期尽量写类型标注，帮助你更好理解TypeScript如何工作。

Q3：TypeScript和JavaScript有什么区别？

本质是一样的，但TypeScript加入了类型系统，提高了代码的安全性和可维护性。

Q4：TypeScript慢吗？需要编译吗？

TypeScript不会影响性能。开发时使用ts-node直接运行，正式部署时再用tsc编译成JS即可。

---

学习建议：下一步该怎么走？

恭喜你完成了这门快速入门课！接下来可以继续深入学习以下内容：

初级路线图

1. 🔁 循环与条件语句
2. 📦 模块与导入导出
3. ⚙️ 接口和类（面向对象）
4. 💾 异步编程（Promise/async-await）
5. 🧩 泛型（Generic Types）

中级进阶

• 使用TypeScript构建前端项目（React/Vue）
• 使用Jest做TypeScript单元测试
• 自动化流程（配合Webpack/Babel等）

学习资源推荐

• TypeScript官网
• TypeScript Playground（在线尝试TS）
• 《TypeScript中文手册》
• B站、YouTube上的TypeScript教学视频

---

总结

TypeScript并不难学，它只是为JavaScript加了一层“安全带”，让你写出更可靠的代码。

今天我们学会了：

• 如何搭建TypeScript环境
• 基础语法：变量、函数、接口
• 写了一个简单的成绩统计小项目
• 解决了一些常见问题

只要你坚持每天写点代码，不出一个月就能熟练掌握它！

🔚 祝你早日成为TypeScript高手！