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

码上见山

2025-06-18 00:37

阅读 551

开篇：什么是 TypeScript？

如果你是刚接触编程的初学者，可能会觉得“TypeScript”这个词听起来很陌生。别担心，我们来简单地说一下它是干嘛的。

TypeScript 是 JavaScript 的一个超集。 听起来有点高大上？没关系，我们可以把它理解成：“JavaScript 加上了额外的功能”，这些功能让代码更容易理解和更少出错。

举个例子：

你写了一段 JavaScript 代码，本想传入一个数字，结果不小心传进去一个字符串。这时候程序运行就会报错，而你可能很久才能发现这个小错误。

TypeScript 在你写代码的时候就提前告诉你：“嘿，这里应该是一个数字，但你输的是字符串，快改！”这样能大大减少你在运行时才发现的错误。

总结一句话：

TypeScript = JavaScript + 类型检查。

它的主要用途是帮助我们在写前端项目（如网页、App）时写出更加清晰、稳定的代码。

环境准备：安装与设置你的 TypeScript 开发环境

在正式开始写 TypeScript 代码前，我们需要先准备好开发工具。

第一步：安装 Node.js 和 npm

访问官网：https://nodejs.org
下载 LTS（长期支持版）版本并安装。
安装完成后，打开终端或命令行（Mac 上用 Terminal，Windows 上可以用 CMD 或 PowerShell），输入以下命令查看是否安装成功：

node -v
npm -v

你应该能看到类似这样的输出（版本号可能不同）：

v18.17.1
9.6.7

这表示 Node.js 和 npm 已经安装好了！

npm 是什么？它是 Node.js 自带的包管理器，你可以通过它安装各种库和工具，包括 TypeScript。

第二步：安装 TypeScript 编译器

输入以下命令安装 TypeScript：

npm install -g typescript

然后验证是否安装成功：

tsc -v

输出应该类似于：

Version 5.3.3

恭喜你，现在你已经可以开始编写 TypeScript 了！

第三步：配置一个简单的项目结构

接下来，我们创建一个文件夹作为项目的根目录：

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

在这个文件夹中新建两个文件：

index.html —— 我们的网页入口文件
main.ts —— 我们将用 TypeScript 写的代码
创建一个用于存放编译后文件的文件夹：

mkdir dist

现在我们的项目结构如下：

my-ts-project/
├── index.html
├── main.ts
└── dist/

第四步：配置 TypeScript 编译选项（tsconfig.json）

在项目根目录下执行：

tsc --init

该命令会生成一个名为 tsconfig.json 的配置文件。我们可以用文本编辑器（比如 VSCode）打开它，并修改几个关键配置项：

{
  "outDir": "./dist",     // 指定编译后的 JS 文件输出到哪个目录
  "rootDir": "./",        // 源代码的根目录
  "module": "ESNext",     // 模块系统
  "target": "ES2020",     // 编译的目标 ES 版本
  "strict": true          // 开启严格模式（推荐）
}

保存之后就可以使用下面命令来编译 TypeScript 文件了：

tsc

编译后的 .js 文件会被输出到 dist/ 目录里。

第五步：测试 HTML 页面加载编译后的代码

编辑 index.html 文件内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>TypeScript 入门</title>
</head>
<body>
  <h1 id="message">Hello, TypeScript!</h1>

  <script src="dist/main.js"></script>
</body>
</html>

接着在 main.ts 中添加一段测试代码：

console.log("TypeScript 正常工作！");
document.getElementById("message")!.innerHTML += " —— 新内容";

现在编译一下：

tsc

编译完成之后，用浏览器打开 index.html 文件，看看控制台是否有输出，并且页面是否正确显示新的内容。

如果一切正常，说明你的 TypeScript 环境已经搭建完成了！

核心概念：通俗易懂地讲解 TypeScript 关键知识点

这一部分我们来学习一些最基本的 TypeScript 概念，每条都会配上简单明了的例子说明。

1. 变量声明与类型注解

JavaScript 中的变量声明

let name = "Tom";
name = 123; // 不报错，但在运行时会出问题

TypeScript 中增加类型限制

let name: string = "Tom";
name = 123; // ❌ 报错：不能将 number 类型赋给 string 类型

✅ 记住：变量名: 类型 = 值 这种形式就是 TypeScript 的类型注解语法。

2. 函数定义和参数类型

JavaScript 函数

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

如果我们误传了非数字值，函数会出错却无法及时察觉。

TypeScript 函数

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

sum(5, 10);   // ✅ 正确调用
sum("5", 10); // ❌ 报错：第一个参数应该是 number

✅ 函数参数也要加类型注解！
如果有返回值，建议也指定返回类型。

3. 类型推断（Type Inference）

有时我们不写类型，TS 也能自动推断出来。

let age = 20; // 类型被推断为 number
age = "三十岁"; // ❌ 报错

4. 联合类型（Union Types）

当一个变量可能是多种类型之一时，可以用 | 表示联合。

let input: string | number = "hello";
input = 123; // ✅ 合法
input = true; // ❌ 非 string 或 number 类型

5. 数组类型

数组中的元素也需要统一类型。

let names: string[] = ["Tom", "Jerry"];
names.push(123); // ❌ 报错：只能添加 string 类型

// 也可以用泛型写法
let numbers: Array<number> = [1, 2, 3];

6. 对象类型（对象的结构定义）

let person: { name: string; age: number } = {
  name: "Tom",
  age: 20,
};

person.name = 100; // ❌ 报错：name 应该是 string

7. null 和 undefined 处理

在启用 "strict": true 模式下，不能把 null 或 undefined 赋值给其他类型。

let username: string = null; // ❌ 报错

但如果希望允许为空值，可以使用联合类型：

let username: string | null = null; // ✅ 合法

8. 类型别名（Type Alias）

为了简化复杂类型的书写，可以自定义名字。

type User = { name: string; email: string };

let user: User = {
  name: "Alice",
  email: "alice@example.com"
};

9. 接口（Interface）

接口也是用来定义对象结构的一种方式，和类型别名差不多，后面再详细讲。

interface Product {
  title: string;
  price: number;
}

let product: Product = {
  title: "手机",
  price: 2999,
};

10. 枚举（Enum）

用于表示一组固定命名的数值集合。

enum Color {
  Red,
  Green,
  Blue,
}

let favoriteColor: Color = Color.Green;
console.log(favoriteColor); // 输出 1（因为默认从0开始编号）

到这里为止，我们已经掌握了 TypeScript 最核心的一些类型系统知识。接下来我们进入实战环节。

实战项目：动手写一个小项目 —— “欢迎用户问候小程序”

我们来做一个简单的小程序：让用户输入姓名，并在页面上显示一句欢迎语。

步骤1：HTML 文件中添加输入框和按钮

更新 index.html：

<input type="text" id="username" placeholder="请输入您的名字" />
<button onclick="sayHello()">确定</button>
<p id="greeting"></p>

步骤2：在 `main.ts` 中写逻辑

function sayHello(): void {
  const inputElement = document.getElementById("username") as HTMLInputElement;
  const name: string = inputElement.value;

  const greetingElement = document.getElementById("greeting")!;
  greetingElement.innerHTML = `你好，${name}！欢迎来到 TypeScript 小课堂`;
}

注意这里的强制类型转换 as HTMLInputElement，确保我们拿到的确实是输入框对象。

步骤3：编译并运行

运行编译命令：

tsc

然后刷新 index.html 页面，试试输入名字并点击按钮。

🎉 成功了没？是不是很酷？

常见问题：新手容易遇到的问题解答

Q1. 为什么我的 TS 文件没有被编译？ A：确保你正在项目根目录执行 tsc 命令，并确认你的 tsconfig.json 正确配置了 rootDir 和 outDir。

Q2. 我写了正确的 TS，但是运行时报错？ A：TS 只检查类型，不会阻止你运行有问题的代码。你还需要配合运行时调试工具（如 Chrome DevTools）来排查逻辑错误。

Q3. 能不能不用 tsconfig.json，手动指定编译参数？ A：可以！例如：tsc main.ts --outFile dist/main.js。但推荐用 tsconfig.json 来保持一致性。

Q4. 如何让 TypeScript 放宽检查？ A：可以将 strict: false，但这会导致很多潜在错误漏检，初学阶段不建议这么做。

学习建议：下一步该学什么？

你现在掌握了一个良好的基础，那么接下来要怎么继续进步呢？以下是一些学习方向推荐：

✅ 1. 学习面向对象编程（OOP）

TypeScript 对类的支持非常好，适合做大型项目开发。

✅ 2. 探索 TypeScript 接口与泛型

接口 (interface)：定义复杂对象的结构
泛型 (<T>)：构建可复用的组件

✅ 3. 结合主流框架使用 TypeScript

React + TypeScript
Vue 3 + TypeScript
Angular 原生就使用 TypeScript

✅ 4. 研究 TypeScript 高级类型

如：交叉类型、映射类型、条件类型等，它们在写大型应用程序时非常有用。

总结

通过这篇文章，我们一步步实现了：

搭建了 TypeScript 开发环境；
学习了核心语法和基本数据类型；
动手完成了一个“欢迎用户”的简单小项目；
回答了常见的新手疑问；
给出了进一步学习的路径建议。

TypeScript 也许一开始会让你觉得多打了不少字，但它在后期能帮你避免大量错误，让你的代码更健壮、更易维护。

坚持下去，你会爱上它的！

🎉 恭喜你，完成了这份《TypeScript 快速入门：30分钟上手指南》！
继续加油，成为优秀的前端开发者吧💪

标签:React资源

最热最新

暂无评论

为你推荐

暂无相关推荐

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

开篇：什么是 TypeScript？

环境准备：安装与设置你的 TypeScript 开发环境

第一步：安装 Node.js 和 npm

第二步：安装 TypeScript 编译器

第三步：配置一个简单的项目结构

第四步：配置 TypeScript 编译选项（tsconfig.json）

第五步：测试 HTML 页面加载编译后的代码

核心概念：通俗易懂地讲解 TypeScript 关键知识点

1. 变量声明与类型注解

JavaScript 中的变量声明

TypeScript 中增加类型限制

2. 函数定义和参数类型

JavaScript 函数

TypeScript 函数

3. 类型推断（Type Inference）

4. 联合类型（Union Types）

5. 数组类型

6. 对象类型（对象的结构定义）

7. null 和 undefined 处理

8. 类型别名（Type Alias）

9. 接口（Interface）

10. 枚举（Enum）

实战项目：动手写一个小项目 —— “欢迎用户问候小程序”

步骤1：HTML 文件中添加输入框和按钮

步骤2：在 `main.ts` 中写逻辑

步骤3：编译并运行

常见问题：新手容易遇到的问题解答

学习建议：下一步该学什么？

✅ 1. 学习面向对象编程（OOP）

✅ 2. 探索 TypeScript 接口与泛型

✅ 3. 结合主流框架使用 TypeScript

✅ 4. 研究 TypeScript 高级类型

总结

评论 0

为你推荐

精选内容

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

开篇：什么是 TypeScript？

环境准备：安装与设置你的 TypeScript 开发环境

第一步：安装 Node.js 和 npm

第二步：安装 TypeScript 编译器

第三步：配置一个简单的项目结构

第四步：配置 TypeScript 编译选项（tsconfig.json）

第五步：测试 HTML 页面加载编译后的代码

核心概念：通俗易懂地讲解 TypeScript 关键知识点

1. 变量声明与类型注解

JavaScript 中的变量声明

TypeScript 中增加类型限制

2. 函数定义和参数类型

JavaScript 函数

TypeScript 函数

3. 类型推断（Type Inference）

4. 联合类型（Union Types）

5. 数组类型

6. 对象类型（对象的结构定义）

7. null 和 undefined 处理

8. 类型别名（Type Alias）

9. 接口（Interface）

10. 枚举（Enum）

实战项目：动手写一个小项目 —— “欢迎用户问候小程序”

步骤1：HTML 文件中添加输入框和按钮

步骤2：在 main.ts 中写逻辑

步骤3：编译并运行

常见问题：新手容易遇到的问题解答

学习建议：下一步该学什么？

✅ 1. 学习面向对象编程（OOP）

✅ 2. 探索 TypeScript 接口与泛型

✅ 3. 结合主流框架使用 TypeScript

✅ 4. 研究 TypeScript 高级类型

总结

评论 0

为你推荐

相关推荐

精选内容

步骤2：在 `main.ts` 中写逻辑