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

曹华

2025-06-15 11:38

阅读 278

一、开篇：TypeScript 是什么？为什么我们要学它？

你可能已经听说过 JavaScript，它是网页开发中最核心的语言之一。几乎所有的网页动画、交互功能、动态内容更新都是由 JavaScript 实现的。

而 TypeScript（简称 TS） 就是 JavaScript 的一个“增强版”，它给 JavaScript 加入了 类型系统（Types），让你在写代码的时候就能发现很多潜在的问题，从而写出更可靠、更容易维护的程序。

🧠 举个简单例子：

假设我们有个函数，用来计算两个数字相加：

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

在 JavaScript 中这样写没问题，但如果有人不小心传进来字符串，就会出现意料之外的结果：

add("1", "2"); // 得到 "12"，但原本可能是想得到 3？

TypeScript 允许你提前声明每个参数的类型：

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

这样，如果你尝试传错数据类型，TypeScript 就会直接报错提醒你！

✅ 总结一句话：

TypeScript = JavaScript + 类型系统 + 更强的开发体验。

二、环境准备：如何开始使用 TypeScript？

JavaScript框架对比-1

二、环境准备：如何开始使用 TypeScript？

要使用 TypeScript，我们需要先把它安装到电脑里，并准备好运行环境。

第一步：确保你的电脑已安装 Node.js

打开命令行工具（Windows 上是 cmd 或 PowerShell，Mac 上是 Terminal），输入以下命令查看是否已安装 Node.js：

node -v
npm -v

如果有输出版本号（比如 v18.19.0），说明你已经安装好了。如果没有，请前往nodejs.org下载并安装 LTS 版本。

第二步：全局安装 TypeScript

继续在命令行中输入以下命令安装 TypeScript 工具：

npm install -g typescript

等待安装完成后，检查版本：

tsc -v

如果输出类似 Version 5.2.2，就说明安装成功啦！

第三步：创建项目文件夹

新建一个空文件夹，比如叫 my-ts-project，进入这个文件夹：

mkdir my-ts-project
cd my-ts-project

在这个文件夹下新建一个 .ts 文件，例如：

touch index.ts

用你喜欢的编辑器（如 VS Code）打开 index.ts，就可以开始写 TypeScript 代码了！

第四步：编译 TypeScript 为 JavaScript

因为浏览器只能识别 JavaScript，所以我们要把 .ts 文件“翻译”成 .js 文件。

在终端中执行命令：

tsc index.ts

这会在当前目录下生成一个对应的 index.js 文件。你可以通过浏览器或 Node.js 来运行这个文件。

💡 提示：你可以使用 tsc --watch index.ts 命令自动监听文件变化并重新编译。

三、核心概念：TypeScript 最基础的语法和特性

接下来我们一步步学习 TypeScript 中最常见的几个知识点，并配上实例演示。

1. 变量与类型注解

在 JS 中你可以这样写变量：

let age = 30;
let name = "Tom";
let isStudent = true;

但在 TS 中，你可以明确指定变量的类型：

let age: number = 30;
let name: string = "Tom";
let isStudent: boolean = true;

如果你不指定值，也可以先声明类型，后面再赋值：

let score: number;
score = 95; // 合法
score = "优秀"; // ❌ 报错！不能赋值字符串给 number 类型变量

2. 函数参数与返回值的类型

我们可以为函数参数和返回值加上类型限制：

function greet(name: string): string {
  return "Hello, " + name;
}

console.log(greet("Alice")); // 正确
console.log(greet(123));     // ❌ 报错：123 不是 string 类型

3. 数组类型

数组也一样需要类型注解：

let numbers: number[] = [1, 2, 3];
numbers.push(4); // ✅
numbers.push("five"); // ❌ 错误：不能添加字符串

// 另一种写法：
let fruits: Array<string> = ["apple", "banana"];

4. 联合类型（Union Types）

有时候变量可以接受多个类型，这时候可以用 | 来表示联合类型：

let id: string | number;

id = 123;       // ✅
id = "abc-123"; // ✅
id = true;      // ❌ 报错：boolean 不在允许范围内

5. 对象类型（Object Types）

你可以为对象定义形状（属性和类型）：

let user: { name: string; age: number } = {
  name: "Bob",
  age: 25
};

也可以简化成接口（interface）来复用：

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

let user: Person = {
  name: "Lucy",
  age: 30
};

6. 类型推断（Type Inference）

有时候你可以省略类型注解，TS也会根据初始值帮你推断出类型：

let message = "Hello"; // TS 自动推断为 string 类型
message = 123; // ❌ 报错

7. any 和 unknown 类型

如果你不知道某个变量是什么类型的，可以用 any，但这会失去类型检查的优势，不推荐频繁使用：

let data: any;
data = "hello";
data = 100;
data = { name: "Test" };

更好的选择是使用 unknown，它可以接收任何值，但访问之前必须进行类型判断：

let input: unknown;

input = "string";
if (typeof input === "string") {
  console.log(input.toUpperCase()); // ✅
}

四、实战项目：做一个简单的“待办事项”管理器

现在我们来写一个简单的项目，巩固刚才学到的知识点！

📌 需求描述：

做一个控制台版的“待办事项管理器”，支持添加任务、列出所有任务。

🛠 步骤 1：建立结构

首先，在 index.ts 中写下如下代码：

type Task = {
  id: number;
  description: string;
  completed: boolean;
};

let tasks: Task[] = [];

function addTask(description: string) {
  const newTask: Task = {
    id: tasks.length + 1,
    description,
    completed: false
  };
  tasks.push(newTask);
  console.log(`新增任务：“${description}”`);
}

function listTasks() {
  console.log("当前所有任务：");
  tasks.forEach((task) => {
    console.log(`${task.id}. [${task.completed ? "✅" : "❌"}] ${task.description}`);
  });
}

🛠 步骤 2：测试功能

继续在代码最后加上一些测试语句：

addTask("学习 TypeScript");
addTask("喝一杯水");
addTask("整理房间");

listTasks();

🛠 步骤 3：编译并运行

在命令行中运行：

tsc index.ts
node index.js

你应该能看到类似这样的输出：

新增任务：“学习 TypeScript”
新增任务：“喝一杯水”
新增任务：“整理房间”
当前所有任务：
1. [❌] 学习 TypeScript
2. [❌] 喝一杯水
3. [❌] 整理房间

🎉 恭喜！你已经用 TypeScript 完成了第一个小项目！

五、常见问题解答（FAQ）

下面是一些新手经常遇到的问题和答案👇

❓ Q1：是不是一定要写类型注解？

不是的！TypeScript 支持 类型推断。如果你写：

let name = "John"; // 推断为 string 类型

你就不用自己写 : string 了。只有当你想明确类型，或者类型不明确时才需要手动标注。

❓ Q2：能不能让变量既可以是数字也可以是字符串？

当然可以！用联合类型 number | string 即可：

let value: number | string;
value = 100;      // ✅
value = "hello";  // ✅

❓ Q3：什么是 interface？和 type 有什么区别？

interface 和 type 都能定义对象结构，它们非常相似，但在高级使用中有细微差别。对于初学者来说，你可以随便选一个用。

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

type Person = {
  name: string;
  age: number;
};

❓ Q4：为什么我写了正确的类型还是报错？

有时候 IDE（如 VS Code）不会立即刷新 TypeScript 状态，建议重启编辑器或检查是否保存了文件。另外，确保你用的是 .ts 后缀而不是 .js！

❓ Q5：我能用 TypeScript 写网页吗？

当然可以！TypeScript 可以与 HTML、CSS 和各种前端框架配合使用，比如 React、Vue、Angular 等。这篇文章只是教你打地基，后续你可以扩展学习这些方向。

六、下一步学习建议

恭喜你完成了 TypeScript 的入门之旅！你现在具备了基本理解和动手实践的能力。

如果你想进一步提升技能，可以从以下几个方向深入：

💡 学习路线建议：

进阶 TypeScript 类型系统
- 枚举（enum）
- 泛型（generic）
- 条件类型（conditional types）
- 映射类型（mapped types）
结合现代前端框架使用 TypeScript
- React + TypeScript
- Vue + TypeScript
- Angular （本身就基于 TypeScript）
学习 TypeScript 配置文件 tsconfig.json
- 控制编译行为
- 设置模块加载方式等
阅读 TypeScript 官方文档（中文）
- TypeScript 官方中文文档
练习更多项目
- 天气 App
- Todo List 进阶版
- 计算器 App
- 博客网站后端 API

🏆 编程小贴士

不要急着记所有的语法，先理解核心思想。
多敲代码，多改错。错误是进步的阶梯！
使用 VS Code 插件：TypeScript Hero、ESLint、Prettier，提高编码效率。
养成良好的命名习惯：比如变量名用小驼峰法 userName，类名用大驼峰 UserModel。

结束语

CSS动画效果展示-2

TypeScript 并没有想象中那么难。只要掌握基础语法和逻辑结构，加上一点点耐心练习，你就能用 TypeScript 写出更清晰、更安全、更易维护的代码！

希望这篇《TypeScript 快速入门指南》对你有帮助，如果你喜欢这种风格的文章，欢迎关注我，我会持续分享更多实用、接地气的前端知识 😄！

📌 祝你编程愉快，早日成为 TypeStrong 程序员！💪

——来自一位愿意陪你们一起成长的前端讲师 ✨

标签:综合书籍

最热最新

暂无评论

为你推荐

暂无相关推荐

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

一、开篇：TypeScript 是什么？为什么我们要学它？

🧠 举个简单例子：

二、环境准备：如何开始使用 TypeScript？

第一步：确保你的电脑已安装 Node.js

第二步：全局安装 TypeScript

第三步：创建项目文件夹

第四步：编译 TypeScript 为 JavaScript

三、核心概念：TypeScript 最基础的语法和特性

1. 变量与类型注解

2. 函数参数与返回值的类型

3. 数组类型

4. 联合类型（Union Types）

5. 对象类型（Object Types）

6. 类型推断（Type Inference）

7. any 和 unknown 类型

四、实战项目：做一个简单的“待办事项”管理器

📌 需求描述：

🛠 步骤 1：建立结构

🛠 步骤 2：测试功能

🛠 步骤 3：编译并运行

五、常见问题解答（FAQ）

❓ Q1：是不是一定要写类型注解？

❓ Q2：能不能让变量既可以是数字也可以是字符串？

❓ Q3：什么是 interface？和 type 有什么区别？

❓ Q4：为什么我写了正确的类型还是报错？

❓ Q5：我能用 TypeScript 写网页吗？

六、下一步学习建议

💡 学习路线建议：

🏆 编程小贴士

结束语

评论 0

为你推荐

精选内容