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

CloudRunner

2025-06-23 23:59

阅读 801

开篇：什么是TypeScript？

你可能听说过JavaScript，它是网页开发中最常用的编程语言之一。很多网站、网页应用（比如网页游戏、表单验证、实时聊天）都是用JavaScript写出来的。

但JavaScript也有它的局限性。其中一个主要问题是：它没有类型检查。这就可能导致一些潜在的错误在运行之前很难发现。

那有没有办法让JavaScript变得更“靠谱”？答案是——有的！那就是我们今天要介绍的主角：TypeScript。

TypeScript = JavaScript + 类型系统

简单来说，TypeScript 是一种由微软开发的开源语言，它完全兼容JavaScript，并且在JavaScript的基础上添加了“类型”的功能。这意味着你在写代码的时候可以提前告诉程序：“这个变量只能是数字”、“这个参数必须是字符串”等信息，这样在编写时就能提前发现可能出现的错误。

为什么应该学习TypeScript？

✅ 提高代码可读性和健壮性
✅ 更早地发现问题，减少调试时间
✅ 更适合大型项目开发（团队协作）
✅ 现代前端框架（如Vue 3、React、Angular）都推荐使用TypeScript

接下来，让我们一起从零开始，用30分钟掌握TypeScript的基础知识，并完成一个小项目吧！

第一步：环境准备 —— 搭建你的开发环境

在正式学习TypeScript之前，我们需要先准备好开发环境。

🧪 所需工具：

Node.js 和 npm（包管理工具）
一个现代的代码编辑器，比如 VS Code（推荐）

安装Node.js和npm

打开 https://nodejs.org
下载并安装LTS版本（长期支持版）
安装完成后，在终端（或命令行）中输入：

node -v
npm -v

如果显示类似 v18.16.0 和 9.5.1 的版本号，说明安装成功。

安装TypeScript编译器

我们通过npm来安装TypeScript：

npm install -g typescript

然后验证是否安装成功：

tsc -v

你应该会看到类似这样的输出：
Version 5.3.3 或其他版本号。

创建第一个TypeScript文件

新建一个文件夹作为项目目录，例如 ts-tutorial，然后创建一个文件叫 index.ts。

内容如下：

let message: string = "Hello, TypeScript!";
console.log(message);

这个文件就是TypeScript的源码文件。

接着，在终端里进入该目录，运行以下命令进行编译：

tsc index.ts

这会生成一个同名的 index.js 文件。然后你可以运行这个JavaScript文件：

node index.js

如果控制台输出：

Hello, TypeScript!

那就恭喜你，你的TypeScript环境已经配置好了！

核心概念讲解（通俗易懂）

响应式布局概念图-1

核心概念讲解（通俗易懂）

这一部分，我们将学习TypeScript最重要的几个核心特性，并通过简单的例子理解它们。

1. 基本类型

在JavaScript中，我们可以随意给变量赋值不同类型的数据，比如：

let age = 25;
age = 'twenty-five'; // 这样也允许！

但在TypeScript中，我们可以明确指定一个变量的类型，防止意外的赋值：

示例：

let age: number = 25;
age = 30; // 正确

// age = 'thirty' ❌ 错误！不能把字符串赋值给number类型

✅ 支持的基本类型包括：

类型	描述
`number`	数字
`string`	字符串
`boolean`	布尔值 true/false
`array`	数组
`object`	对象
`any`	任意类型

💡 推荐尽量避免使用 any，因为失去了类型检查的意义。

2. 类型推断

如果你没明确指定类型，TypeScript也可以根据变量初始值自动判断类型：

let name = "Alice"; // 类型被推断为 string
name = "Bob"; // OK
// name = 123 ❌ 报错：数字不能赋值给字符串类型

3. 函数中的类型标注

函数是我们组织代码的重要方式。在TypeScript中，我们可以给函数的参数和返回值加上类型。

示例：

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

add(2, 3); // OK → 返回 5
// add('2', 3) ❌ 参数类型不匹配

如果我们不想返回任何东西，可以用 void 类型表示：

function logMessage(msg: string): void {
  console.log(msg);
}

4. 联合类型（Union Types）

有时候一个变量可能是多个类型。比如一个函数返回数字或者字符串。这时可以使用 | 来表示联合类型。

function getID(): number | string {
  if (Math.random() > 0.5) {
    return 123;
  } else {
    return "abc";
  }
}

5. 类型别名（Type Aliases）

当类型比较复杂时，可以用 type 关键字定义一个类型别名，方便重复使用。

type ID = number | string;

function getUser(id: ID): void {
  console.log(`User ID is: ${id}`);
}

6. 接口（Interfaces）

接口用于描述对象的形状，即它有哪些属性和方法。

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

function greet(person: Person): void {
  console.log(`Hi, ${person.name}! You are ${person.age} years old.`);
}

const user = { name: "John", age: 28 };
greet(user); // OK

7. 可选属性

有些字段可能有，也可能没有，可以用 ? 表示可选：

interface Product {
  id: number;
  name: string;
  price?: number; // price 是可选的
}

8. 枚举（Enums）

枚举常用于表示固定值的集合，比如颜色、状态等。

enum Color {
  Red,
  Green,
  Blue
}

let selectedColor: Color = Color.Green;
console.log(selectedColor); // 输出 1（默认索引从0开始）

实战项目：做一个“待办事项”小工具

现在我们来实践一个简单的项目 —— 一个任务清单工具。

功能要求：

输入一个新的任务名称，添加到列表中
显示所有任务
可以标记某个任务为已完成

项目结构

我们只需要一个文件即可完成，就叫 todo.ts

第一步：定义数据结构

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

第二步：初始化任务列表

let tasks: Task[] = [
  { id: 1, title: '学习TypeScript', completed: false },
  { id: 2, title: '练习打字', completed: true },
];

第三步：添加新任务的函数

function addTask(title: string): void {
  const newTask: Task = {
    id: Date.now(), // 使用时间戳作为唯一ID
    title: title,
    completed: false
  };
  tasks.push(newTask);
  console.log(`已添加任务："${title}"`);
}

第四步：显示所有任务的函数

function showTasks(): void {
  console.log("当前任务列表：");
  tasks.forEach(task => {
    const status = task.completed ? "[✓]" : "[ ]";
    console.log(`${status} ${task.title}`);
  });
}

第五步：切换任务状态的函数

function toggleTask(id: number): void {
  const task = tasks.find(task => task.id === id);
  if (task) {
    task.completed = !task.completed;
    console.log(`任务 "${task.title}" 状态已更新`);
  } else {
    console.log(`找不到ID为${id}的任务`);
  }
}

最后：测试一下我们的代码

addTask("去跑步");
toggleTask(tasks[0].id);
showTasks();

你现在可以运行一下这个脚本：

tsc todo.ts
node todo.js

你会看到控制台输出类似以下内容：

已添加任务："去跑步"
任务 "学习TypeScript" 状态已更新
当前任务列表：
[✓] 学习TypeScript
[✓] 练习打字
[ ] 去跑步

✅ 到这里为止，你就完成了一个小型的TypeScript项目啦！

新手常见问题解答

Q1：TypeScript是不是必须写在浏览器中？

No！TypeScript既可以用于浏览器端（网页），也可以用于服务器端（Node.js）。它最终都会被编译成JavaScript来执行。

Q2：为什么有些类型后面加个“?”，是什么意思？

这是可选属性符号。比如：age?: number 表示这个属性是可有可无的。

Q3：写TypeScript会不会很慢？要不要一开始就这么严格？

其实TypeScript可以逐步采用。你可以先开启 strict 模式，慢慢增加类型注解，不要一开始就给自己太大压力。

Q4：我写的代码报错，但我确定没错，怎么办？

建议优先阅读报错提示，看看具体是哪一行出错了。还可以复制错误信息去搜索引擎搜索，通常都能找到解决方案。

Q5：能同时使用JavaScript和TypeScript吗？

当然可以！TypeScript完全兼容JS。你可以在已有JS项目中逐步替换某些文件为TypeScript。

学完之后怎么继续学习？

恭喜你已经完成了TypeScript的入门学习！以下是建议的学习路径：

✅ 初级阶段

继续练习：做更多的小项目（计数器、天气查询、待办事项增强版）
熟悉常用库/框架对TS的支持，比如 Vue、React
阅读官方文档（typescriptlang.org）

✅ 中级阶段

深入了解泛型、装饰器、命名空间等高级语法
尝试写自己的npm模块（发布TypeScript库）
学习如何配置tsconfig.json文件

✅ 高级阶段

结合构建工具（Webpack、Vite）使用TypeScript
参与开源项目，提升实战能力
学习更复杂的类型操作（条件类型、映射类型等）

总结

今天我们从零开始学习了TypeScript的基础知识，包括类型系统、函数、对象、接口等内容，并完成了一个小项目《待办事项管理系统》。虽然只是一个简单的脚本程序，但它涵盖了TypeScript的主要特性。

记住一句话：

类型是对变量的一种“保护”，它可以帮你写出更安全、更容易维护的代码。

继续努力吧！TypeScript是你通往专业前端开发之路的必经之路！

🎉 如果你觉得这篇文章对你有帮助，不妨动手写个小项目练练手，再继续进阶哦！

标签:React产品算法

最热最新

暂无评论

为你推荐

暂无相关推荐

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

开篇：什么是TypeScript？

为什么应该学习TypeScript？

第一步：环境准备 —— 搭建你的开发环境

安装Node.js和npm

安装TypeScript编译器

创建第一个TypeScript文件

核心概念讲解（通俗易懂）

1. 基本类型

示例：

2. 类型推断

3. 函数中的类型标注

示例：

4. 联合类型（Union Types）

5. 类型别名（Type Aliases）

6. 接口（Interfaces）

7. 可选属性

8. 枚举（Enums）

实战项目：做一个“待办事项”小工具

功能要求：

项目结构

第一步：定义数据结构

第二步：初始化任务列表

第三步：添加新任务的函数

第四步：显示所有任务的函数

第五步：切换任务状态的函数

最后：测试一下我们的代码

新手常见问题解答

Q1：TypeScript是不是必须写在浏览器中？

Q2：为什么有些类型后面加个“?”，是什么意思？

Q3：写TypeScript会不会很慢？要不要一开始就这么严格？

Q4：我写的代码报错，但我确定没错，怎么办？

Q5：能同时使用JavaScript和TypeScript吗？

学完之后怎么继续学习？

✅ 初级阶段

✅ 中级阶段

✅ 高级阶段

总结

评论 0

为你推荐

相关推荐

精选内容