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

不想写日报

2025-06-20 00:28

阅读 739

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

在现代前端开发中，TypeScript（简称TS） 已经成为越来越多开发者的选择。你可能会问：“JavaScript还不够用吗？”其实，TypeScript是JavaScript的一个超集，它的核心作用是在写代码时帮我们检查类型错误，提前发现问题，提高代码质量和项目的可维护性。

想象一下：你写了一个函数，本来想传一个数字进去，结果不小心传了字符串。如果是在运行的时候才报错，可能已经影响用户体验了。而使用TypeScript，这种错误会在你写代码的时候就被发现并提示出来，就像有个“语法老师”一直在监督你的代码是否规范。

TypeScript编译后会生成标准的JavaScript代码，可以在所有支持JS的环境中运行，比如浏览器、Node.js等。也就是说，你可以用TypeScript写出更安全、清晰的代码，同时不损失兼容性。

环境准备：一步步搭建TypeScript开发环境

在开始写TypeScript代码之前，我们需要准备好开发环境。别担心，这个过程其实非常简单。

步骤1：安装Node.js 和 npm

访问 Node.js官网
下载并安装长期支持版（LTS）
安装完成后，在命令行输入：

node -v
npm -v

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

步骤2：安装TypeScript和TypeScript编译器

打开终端或命令行工具，执行以下命令安装TypeScript：

npm install -g typescript

验证是否安装成功：

tsc -v

TSC 是TypeScript的编译器（TypeScript Compiler），它可以将 .ts 文件转换成标准的 .js 文件。

步骤3：创建项目结构

我们可以先建立一个简单的文件夹来练习：

mkdir ts-tutorial
cd ts-tutorial
npm init -y
touch index.ts

这样你就有了一个 index.ts 文件，这是我们编写TypeScript代码的地方。

步骤4：配置tsconfig.json（TypeScript配置文件）

在项目根目录下运行：

tsc --init

这会生成一个 tsconfig.json 文件，它是TypeScript的配置文件，告诉编译器如何处理代码。

核心概念：通俗易懂地讲明白这些关键知识点

这一部分我们会介绍几个最重要也是最基础的概念。每个知识点都会配有代码示例，帮助你理解它们的作用。

1. 类型注解（Type Annotation）

JavaScript是一种动态类型语言，变量的类型可以在运行时变化，但TypeScript让我们可以给变量加个“标签”，告诉它应该是什么类型。

示例：

let age: number = 25;
let name: string = "小明";
let isStudent: boolean = true;

如果你尝试赋值错误类型，例如：

age = "三十"; // 报错：不能将类型 "string" 分配给类型 "number"

编译器会直接提示你出错了。

✅ 新手提醒：类型写错了并不会影响最终输出的JS代码，但能在你写代码时就发现错误。

2. 函数参数和返回值类型

写函数时也可以标注参数和返回值的类型：

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

如果不指定返回类型，TS也会根据返回值自动推断。

3. 变量类型推断（Type Inference）

你不需要总是手动写类型，TypeScript会聪明地自己猜：

let message = "你好，世界！";
// TypeScript 推断为 string 类型
message = 123; // 报错

4. 数组类型

数组也可以有类型注解：

let numbers: number[] = [1, 2, 3];
let names: string[] = ["小明", "小红"];

或者也可以用泛型语法：

let values: Array<number> = [10, 20, 30];

5. 联合类型（Union Types）

有时候，你想让一个变量接受多种类型，可以用 | 来表示联合类型：

let id: string | number;
id = 1001;   // OK
id = "abc123"; // OK
id = true;     // 报错

6. any 类型

any 类型表示任意类型，适用于不确定的情况：

let data: any = "随便什么都可以";
data = 123;
data = { name: "小张" };

虽然灵活，但使用过多会让TypeScript失去意义，所以慎用！

7. 对象类型（Object Types）

你可以定义一个对象的结构：

let user: { name: string; age: number } = {
  name: "小李",
  age: 28
};

还可以更简洁地使用接口（Interface）或类型别名（Type）：

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

let student: User = { name: "小王", age: 20 };

8. 可选属性和只读属性

有些属性不一定存在，可以用 ? 表示可选：

interface Person {
  name: string;
  age?: number; // 可选
  readonly id: number; // 只读
}

实战项目：做一个简单的“任务清单”应用

为了巩固前面学到的知识，我们来做个小项目——一个简单的任务清单。用户可以添加任务，并展示所有任务。

第一步：创建HTML页面

新建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>任务清单</title>
</head>
<body>
  <h1>我的任务清单</h1>
  <input type="text" id="taskInput" placeholder="输入任务内容">
  <button onclick="addTask()">添加</button>
  <ul id="taskList"></ul>

  <script src="index.js"></script>
</body>
</html>

注意这里引用的是 index.js，但我们实际上会写 index.ts，然后通过编译生成 JS 文件。

第二步：写TypeScript逻辑代码

编辑 index.ts 文件：

// 存储任务的数组
const tasks: string[] = [];

// 获取DOM元素
const inputElement = document.getElementById("taskInput") as HTMLInputElement;
const listElement = document.getElementById("taskList") as HTMLOListElement;

// 添加任务函数
function addTask(): void {
  const taskText: string = inputElement.value.trim();
  
  if (taskText === "") {
    alert("请输入任务内容");
    return;
  }

  tasks.push(taskText);
  inputElement.value = "";
  renderTasks();
}

// 渲染任务列表
function renderTasks(): void {
  listElement.innerHTML = "";

  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    li.textContent = `${index + 1}. ${task}`;
    listElement.appendChild(li);
  });
}

这段代码做了几件事：

声明任务数组，类型为字符串数组；
获取输入框和任务列表的DOM元素；
给按钮绑定事件函数 addTask()；
每次添加任务后更新页面上的任务列表。

📌 注意：我们用了 as 关键词进行类型断言，告诉TypeScript这个元素是某种具体类型的DOM节点。

第三步：编译TypeScript为JavaScript

回到命令行，运行：

tsc index.ts

你会发现目录下多了一个 index.js 文件。现在用浏览器打开 index.html，你应该可以看到任务清单功能正常运作啦！

新手常见问题解答

学习过程中难免会遇到一些疑问。以下是几个最常见的问题，供你参考：

❓ Q1：为什么我写了TypeScript却没报错？

TypeScript默认不会阻止你运行代码，它只是给你提示。要真正发挥它的作用，建议配合编辑器（如 VSCode）使用，能实时显示错误。

❓ Q2：编译后的JavaScript在哪里看？

运行 tsc index.ts 后，会自动生成同名的 .js 文件。例如：index.ts 编译后生成 index.js。

❓ Q3：为什么非要写类型？

写类型的好处是防止运行时错误。虽然看起来多写了一些代码，但在大型项目中能大大提高效率和安全性。

❓ Q4：TypeScript和React/Vue/Angular的关系？

TypeScript可以完美配合主流框架一起使用，很多大厂项目都推荐使用TS来提升类型安全性。你可以随时将TS加入现有框架项目中。

❓ Q5：有没有办法跳过某些类型检查？

当然可以。你可以用 any 类型，也可以临时用 @ts-ignore 注释跳过某个错误，但这不是推荐做法。

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

恭喜你已经完成了TypeScript的入门！接下来你可以继续深入以下几个方向：

🔹 建议1：掌握高级类型（Advanced Types）

泛型（Generics）
联合类型和交叉类型
映射类型、条件类型等

🔹 建议2：学习TypeScript与常用框架结合

Vue + TS
React + TS
Angular 是原生支持TS的

🔹 建议3：实践更多项目

从一个小计算器、待办事项到更复杂的管理系统，逐步挑战自己。

🔹 建议4：熟悉TypeScript工具库和社区资源

TypeScript官方文档
TypeScript Playground（在线试用）
社区开源项目：GitHub 上搜索 TypeScript 项目

结语：TypeScript不是负担，而是武器

JavaScript框架对比-1

刚开始学习TypeScript时，可能会觉得它比JavaScript啰嗦。但一旦适应之后你会发现，它不仅让你写的代码更健壮，还能大大提升协作效率。尤其在团队合作中，清晰的类型信息就像一本说明书，让人一眼就能看懂每个函数、变量的用途。

希望这篇《TypeScript快速入门：30分钟上手指南》能帮你迈出第一步。记住，任何技术都是从“Hello World”开始的，加油，未来可期！🚀

🔚 如果你喜欢这篇教程，欢迎点赞、收藏或分享给更多正在学习编程的朋友！

标签:教程爬虫综合技术分享

最热最新

暂无评论

为你推荐

暂无相关推荐