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

Redis看门狗

2025-06-27 02:44

阅读 230

开篇：TypeScript 是什么？用来做什么？

如果你刚接触前端开发，可能会听说过 JavaScript 这个词。它是网页能“动起来”的关键语言。但随着项目越来越大、逻辑越来越复杂，JavaScript 逐渐显露出一些问题，比如：变量类型混乱、容易写错却不容易发现等。

TypeScript 就是为了解决这些问题而生的！它本质上是在 JavaScript 的基础上加了一层“类型检查”机制。你可以把它理解成 带“说明书”的 JavaScript。有了这层“说明书”，你写的代码会更安全、更容易维护，也更容易和其他人合作开发。

换句话说：TypeScript = JavaScript + 类型系统（Types）

接下来，我们就用 30 分钟时间，快速掌握 TypeScript 的基本使用，让你能写出更加稳定、健壮的前端代码！

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

现代网页界面设计示例-1

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

在开始写代码之前，我们需要准备好一个合适的开发环境。不用担心，这个过程其实很简单。

✅ 步骤 1：安装 Node.js 和 npm

前往 https://nodejs.org 下载并安装 LTS 版本。
安装完成后，在命令行输入以下命令确认是否成功：

node -v
npm -v

如果能看到版本号，说明安装成功！

✅ 步骤 2：安装 TypeScript 编译器

TypeScript 不能直接运行，需要先“翻译”成 JavaScript。我们使用 tsc 来做这件事。

在终端中执行以下命令来全局安装：

npm install -g typescript

安装完成后测试：

tsc -v

看到版本号即安装成功。

✅ 步骤 3：创建你的第一个 TypeScript 文件

新建一个文件夹，例如命名为 ts-tutorial，进入该文件夹后创建一个名为 index.ts 的文件：

mkdir ts-tutorial
cd ts-tutorial
touch index.ts

然后在 index.ts 中写下第一句 TypeScript 代码：

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

保存之后，在命令行执行编译：

tsc index.ts

你会看到生成了一个新的文件 index.js，这就是被“翻译”后的 JavaScript 文件。

现在你已经成功运行了第一个 TypeScript 程序！

核心概念：用最通俗的语言解释 TypeScript 关键特性

这一部分我们将学习几个最重要、最常用的核心概念。每个概念都会配一个简单的例子帮助你理解。

1️⃣ 类型注解（Type Annotation）

JavaScript 中你可以随便给变量赋值不同类型，这叫“弱类型”。而 TypeScript 则要求我们在声明变量的时候就说明它是什么类型，这就叫类型注解。

📌 示例：

let age: number = 25;
age = "twenty-five"; // ❌ 报错！因为 age 被指定为 number 类型

📌 常见基础类型：

类型	示例
`number`	123, 3.14
`string`	'你好'
`boolean`	true / false
`undefined`
`null`	null

2️⃣ 类型推断（Type Inference）

有时候你不写类型，TypeScript 也能自动“猜出”它的类型。

📌 示例：

let name = "Tom";
name = 123; // ❌ 报错！TS 自动将 name 推断为 string 类型

3️⃣ 函数参数和返回值类型

函数也是可以加类型的哦。这样可以让别人清楚地知道这个函数应该传入什么参数，返回什么结果。

📌 示例：

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

add(2, 3);      // ✅ 正确
add("2", 3);    // ❌ 错误！a 应为 number 类型

4️⃣ 数组类型

数组里面要放相同类型的元素。

📌 示例：

let numbers: number[] = [1, 2, 3];
numbers.push("hello"); // ❌ 错误：只能添加 number 类型

也可以用泛型方式写法：

let names: Array<string> = ["Alice", "Bob"];

5️⃣ 对象类型

我们可以定义对象中各个属性的类型。

📌 示例：

let person: { name: string; age: number } = {
  name: "Jane",
  age: 30,
};
person.age = "30"; // ❌ 错误：age 应为 number 类型

6️⃣ any 类型（慎用！）

如果你实在不确定一个变量的类型，可以用 any，不过不建议滥用。

📌 示例：

let value: any = 123;
value = "hello"; // ✅ 可以赋值任何类型

⚠️ 建议尽量避免使用 any，因为它失去了 TypeScript 的意义。

7️⃣ 联合类型（Union Types）

当一个变量可能是几种类型之一时，可以用联合类型：

📌 示例：

let id: number | string = "abc123";
id = 123; // ✅ 也允许数字

实战项目：写一个简易的待办事项应用（To-Do App）

我们来通过一个小程序巩固一下刚才学到的内容。

📦 功能需求：

显示当前任务列表
添加新任务
标记任务完成状态

🛠️ 第一步：定义数据结构

我们首先定义一个表示任务的对象类型：

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

🚀 第二步：实现功能函数

添加任务函数：

function addTodo(todos: Todo[], text: string): Todo[] {
  const newTodo: Todo = {
    id: todos.length + 1,
    text,
    completed: false,
  };
  return [...todos, newTodo];
}

显示所有任务函数：

function showTodos(todos: Todo[]): void {
  todos.forEach((todo) => {
    console.log(`${todo.id}. ${todo.text} — ${todo.completed ? "已完成" : "未完成"}`);
  });
}

标记任务为完成：

function completeTodo(todos: Todo[], id: number): Todo[] {
  return todos.map((todo) =>
    todo.id === id ? { ...todo, completed: true } : todo
  );
}

🧪 第三步：测试一下吧！

在 index.ts 中加入以下代码进行测试：

let todos: Todo[] = [];

todos = addTodo(todos, "买菜");
todos = addTodo(todos, "写作业");
todos = completeTodo(todos, 1);

showTodos(todos);

编译并运行：

tsc index.ts
node index.js

你应该能看到如下输出：

1. 买菜 — 已完成
2. 写作业 — 未完成

🎉 恭喜！你已经完成了第一个完整的 TypeScript 小程序！

常见问题解答（FAQ）

下面是一些新手常见的疑问和解答。

❓ Q1：TypeScript 和 JavaScript 有什么不同？

A： TypeScript 是 JavaScript 的超集，它添加了类型系统，让代码更安全、易于维护，同时保持与原生 JS 完全兼容。

❓ Q2：一定要安装 TypeScript 才能用吗？

A：如果你想写 .ts 文件，并享受类型检查功能，就需要安装 TypeScript。如果你只是想看生成的 .js 文件，可以直接运行 JS 代码。

❓ Q3：为什么我写错了类型也没有报错？

A：可能是你用了 any 类型或没有配置好 IDE 或编辑器。推荐使用 VS Code + TypeScript 插件，实时提示错误。

❓ Q4：TypeScript 编译很麻烦，能不能自动监听变化？

A：可以使用 tsc --watch 命令，或者配合构建工具如 Webpack，实现自动编译。

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

响应式布局概念图-2

你已经掌握了 TypeScript 最核心的基础知识，接下来可以根据自己的兴趣深入方向：

📘 推荐学习路径：

进阶语法
- 类（class）
- 接口（interface）
- 泛型（Generics）
- 枚举（enum）
- 装饰器（Decorators）
结合框架学习
- Angular（官方全面支持 TS）
- Vue 3 + TypeScript
- React + TypeScript
深入类型系统
- 高级类型（交叉类型、条件类型）
- 类型守卫（Type Guards）
- 类型别名与联合类型结合
实战项目推荐
- 构建一个个人博客后台
- 开发一个待办事项 App（升级版）
- 使用 React + TypeScript 构建一个购物车组件

📚 推荐资源：

官网文档：https://www.typescriptlang.org/
在线练习：https://www.typescriptlang.org/play
推荐书籍：《TypeScript 入门教程》《TypeScript 高级编程》

总结

在这短短30分钟里，我们从零到一搭建了 TypeScript 环境，学会了最常见的语法和类型系统，还动手完成了一个小项目。你现在完全可以自己写一些类型清晰、结构良好的 TypeScript 代码了！

TypeScript 并不是一个难懂的技术，只要你动手写、多实践，它会让你的代码更健壮、更高效、更容易维护。希望这篇文章能帮你迈过 TypeScript 的门槛，开启一段轻松高效的学习之旅！

🚀 下一步就是继续编码！加油！

标签:PythonReact

最热最新

暂无评论

为你推荐

暂无相关推荐

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

开篇：TypeScript 是什么？用来做什么？

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

✅ 步骤 1：安装 Node.js 和 npm

✅ 步骤 2：安装 TypeScript 编译器

✅ 步骤 3：创建你的第一个 TypeScript 文件

核心概念：用最通俗的语言解释 TypeScript 关键特性

1️⃣ 类型注解（Type Annotation）

2️⃣ 类型推断（Type Inference）

3️⃣ 函数参数和返回值类型

4️⃣ 数组类型

5️⃣ 对象类型

6️⃣ any 类型（慎用！）

7️⃣ 联合类型（Union Types）

实战项目：写一个简易的待办事项应用（To-Do App）

📦 功能需求：

🛠️ 第一步：定义数据结构

🚀 第二步：实现功能函数

添加任务函数：

显示所有任务函数：

标记任务为完成：

🧪 第三步：测试一下吧！

常见问题解答（FAQ）

❓ Q1：TypeScript 和 JavaScript 有什么不同？

❓ Q2：一定要安装 TypeScript 才能用吗？

❓ Q3：为什么我写错了类型也没有报错？

❓ Q4：TypeScript 编译很麻烦，能不能自动监听变化？

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

📘 推荐学习路径：

📚 推荐资源：

总结

评论 0

为你推荐

精选内容