TypeScript快速入门：30分钟上手指南
开篇：TypeScript是什么？
TypeScript 是 JavaScript 的一个“加强版”。你可以把它理解为JavaScript的“超级助手”，它帮助你在写代码时更少出错，更容易维护。
简单来说，JavaScript是网页开发中最基础的语言，而TypeScript在它的基础上加了 类型检查（Type Checking）。也就是说，在你写代码的时候，TypeScript就能帮你发现问题，而不是等程序运行起来才发现错误。
🎯 为什么学TypeScript？
- 更安全的代码
- 更好的代码提示和自动补全功能
- 现代前端框架（如Angular、Vue 3+、React + TS）广泛使用
- 大公司项目普遍采用TypeScript
环境准备：让你的电脑准备好
步骤1：安装 Node.js 和 npm
访问官网 https://nodejs.org
👉 下载并安装 LTS版本（长期支持版）
安装完成后，在终端（Windows是命令行，Mac是终端）输入：
node -v
npm -v
如果出现版本号（如 v20.12.0），说明安装成功！
步骤2：安装 TypeScript
我们通过 npm 来安装 TypeScript：
npm install -g typescript
安装完后检查一下版本：
tsc -v
你应该会看到类似 Version 5.3.3 的输出。
tsc是 TypeScript 编译器，它可以把.ts文件编译成浏览器能认识的.js文件。
步骤3：准备开发工具（VS Code 推荐）
下载地址：https://code.visualstudio.com
安装后打开 VS Code，安装以下插件（可选但推荐）：
- TypeScript Essential插件
- Prettier（格式化代码）
- Live Server（测试HTML页面）
核心概念：TypeScript的关键知识点
我们来学习几个最基础、最重要的TypeScript知识。
✅ 类型系统：变量要“声明类型”
在 JavaScript 中，你可以这样写：
let age = 20;
age = "abc"; // 没有报错！但在实际应用中可能会引发bug
但在 TypeScript 中，我们可以告诉程序这个变量应该是数字：
let age: number = 20;
age = "abc"; // ❌ 报错：不能把字符串赋给数字
🔍 常见数据类型如下：
| 类型 | 示例值 | 用途 |
|---|---|---|
number |
1, 3.14, -5 | 数字 |
string |
"hello", 'hi' | 字符串 |
boolean |
true, false | 真假判断 |
array |
[1,2,3], ["a"] | 数组 |
object |
{name: "Tom"} | 对象 |
any |
可接受任意类型 | 不推荐用，尽量避免 |
📝 示例：
let name: string = "Alice";
let isStudent: boolean = true;
let scores: number[] = [90, 85, 78];
let user: { name: string; age: number } = { name: "Bob", age: 23 };
✅ 函数参数和返回值也要指定类型
function add(a: number, b: number): number {
return a + b;
}
add(2, 3); // 正确
add("2", 3); // ❌ 报错：参数必须是数字
✅ 类型推断：不写也能识别类型
如果你没有特别说明类型，TypeScript也会自动帮你“猜”类型：
let name = "John"; // 自动推断为 string 类型
// 相当于：let name: string = "John";
✅ 联合类型：一个变量可以是多种类型之一
有时我们需要允许变量是多个类型，可以用 | 分隔：
let id: number | string;
id = 1001; // OK
id = "ABC123"; // OK
id = true; // ❌ 错误：布尔类型不在联合范围内
实战项目：做一个计算器小程序
功能描述：
我们做一个简单的加法计算程序，用户输入两个数字，点击按钮显示它们的和。
步骤1：创建文件结构
新建一个文件夹，比如叫 calculator-ts，然后在里面创建两个文件：
index.htmlmain.ts
步骤2：编写 HTML 页面
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TypeScript 计算器</title>
</head>
<body>
<h1>加法计算器</h1>
<input type="number" id="num1" placeholder="输入第一个数" />
<input type="number" id="num2" placeholder="输入第二个数" />
<button onclick="calculate()">计算</button>
<p id="result"></p>
<script src="main.js"></script>
</body>
</html>
步骤3：编写 TypeScript 代码
// main.ts
function calculate(): void {
const num1Input: HTMLInputElement = document.getElementById("num1") as HTMLInputElement;
const num2Input: HTMLInputElement = document.getElementById("num2") as HTMLInputElement;
const resultPara: HTMLElement = document.getElementById("result")!;
const num1: number = parseFloat(num1Input.value);
const num2: number = parseFloat(num2Input.value);
const sum: number = num1 + num2;
resultPara.textContent = "结果：" + sum;
}
步骤4：编译 TypeScript
回到终端，进入你的项目目录，执行：
tsc main.ts
这会生成一个 main.js 文件。现在你可以用浏览器打开 index.html，试试输入两个数字进行相加吧！
✅ 成功了吗？恭喜你，完成了你的第一个TypeScript项目！
新手常见问题解答
❓ Q：我写的代码为什么会报错？
A：TypeScript会检查你的类型是否匹配。例如你把字符串赋值给number类型的变量就会报错，这时候你需要确认输入的数据是不是正确的类型。
❓ Q：能不能不用写类型？
A：可以的。TypeScript允许你使用 any 类型，但这会失去类型检查的好处，不建议这样做。
❓ Q：为什么有些变量后面加了感叹号（!）？
A：这是类型断言语法，表示这个元素一定存在，不会有 null。如果是可能为空的，要用 ? 表示可选。
❓ Q：为什么我在浏览器里看不到效果？
A：可能是忘记用 tsc 编译 .ts 文件，或者引入的是错误的 .js 文件，请检查路径是否正确。
学习建议：下一步怎么学？
恭喜你已经掌握了 TypeScript 最核心的基础内容。接下来你可以继续深入学习这些内容：
📚 进阶路线建议：
- 👉 理解接口（interface）与类型别名（type alias）
- 👉 学习类（class）与面向对象编程
- 👉 掌握泛型（generics）的概念与应用
- 👉 结合 React 或 Vue 使用 TypeScript
- 👉 阅读官方文档：TypeScript 官网
💡 学习方法推荐：
- 多写练习代码
- 尝试改造现有的JS项目为TS版本
- 查看别人的开源TS项目源码
总结
本教程带你从零开始快速了解 TypeScript，包括：
✅ 什么是TypeScript
✅ 如何搭建环境
✅ 常见类型定义
✅ 如何写函数和变量
✅ 完成了一个简单的实战项目
只要勤加练习，你很快就能熟练掌握这门强大的语言。加油吧！🚀
需要更多练习题或完整项目案例，欢迎留言或私信交流！
评论 0