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

木木在敲代码

2025-06-27 18:33

阅读 324

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

在你开始学习前端开发的时候，可能会经常听到一个词：“JavaScript”。它是网页开发中最基本、也是最重要的语言之一。但随着项目的越来越大，仅靠原始的JavaScript管理代码变得越来越困难。

于是，TypeScript（简称 TS）应运而生了。简单来说，TypeScript 是 JavaScript 的一个“增强版”。你可以把它看作是加了一个“语法检查器”的 JavaScript。

举个例子：

你在 JavaScript 中可以这样写：

let age = "十八岁"

虽然看起来没问题，但如果程序期望 age 是一个数字，这个字符串就会引发错误。这类错误往往要等到代码真正运行起来才会发现。

而 TypeScript 可以在你写代码时就发现这样的问题，并提示你修改！

所以，使用 TypeScript 能帮助开发者写出更安全、结构更清晰、更容易维护的大项目代码。

如果你的目标是构建大型应用或者加入大厂团队，那掌握 TypeScript 几乎是必不可少的。

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

我们第一步就是准备好开发环境。不用担心，这只需要几个简单的步骤就能完成。

第一步：安装 Node.js 和 npm

Node.js 是让 JavaScript 脱离浏览器执行的关键工具。npm 则是用来管理各种 JavaScript 工具的包管理器。

前往官网：https://nodejs.org 下载并安装最新版本即可。

安装完成后，在命令行中输入：

node -v
npm -v

如果能看到类似输出：

v18.x.x
9.x.x

说明已成功安装！

第二步：创建项目文件夹和初始化项目

在桌面新建一个文件夹，比如叫做 ts-tutorial，然后打开终端或命令行进入该目录：

mkdir ts-tutorial
cd ts-tutorial
npm init -y

这个命令会生成一个 package.json 文件，用来记录项目所需依赖等信息。

第三步：安装 TypeScript

接下来我们安装 TypeScript 编译工具：

npm install --save-dev typescript

这个命令会在本地安装 TypeScript 开发依赖。

接着再安装一个 TypeScript 的构建工具：

npx tsc --build --clean

注意：如果你这是第一次使用，可能不会看到什么效果，不过不用担心，我们继续下一步。

第四步：配置 TypeScript 配置文件

现在我们需要创建一个 tsconfig.json 文件 —— 它告诉 TypeScript 编译器该如何处理我们的代码。

运行以下命令来生成默认配置文件：

npx tsc --init

你会在当前目录下看到一个 tsconfig.json 文件，内容很多，但我们暂时不需要改任何东西。

第五步：编写并编译 TypeScript 文件

现在让我们写第一个 .ts 文件。

创建一个新文件 index.ts，写入如下代码：

function greet(name: string): void {
    console.log(`你好, ${name}!`);
}

greet("小明");

然后运行：

npx tsc

你会发现多出一个 index.js 文件。这就是由 TypeScript 编译成的标准 JavaScript 代码。

如果你运行一下：

node index.js

控制台输出：

你好, 小明!

恭喜！你已经成功运行了你的第一个 TypeScript 程序！

核心概念：理解 TypeScript 的关键术语

下面我们就来了解一些核心概念，帮助你理解 TypeScript 到底带来了什么优势。

类型系统（Type System）

TypeScript 最大的特点就是它的类型系统。每个变量都有自己的类型，比如：

number：表示数字，如 5, 3.2, -456
string：表示文本，用引号包围，如 "hello", '张三'
boolean：表示布尔值，只有两个值：true 或 false
array：数组类型，例如 number[] 表示数字数组，string[] 是字符串数组
any：最宽松的类型，允许赋任何类型的值（不推荐频繁使用）

来看一个例子：

let age: number = 25;
let name: string = "李华";
let likesCoffee: boolean = true;

let scores: number[] = [90, 85, 95];

// any 类型
let info: any = "随便赋值啥都可以";
info = 123;

如果你尝试对这些变量做错误的赋值，TS 会立即报错提醒你！

接口（Interface）与类型别名（Type）

这两个关键字用于定义对象的形状（Structure），通俗点说，就是描述某个对象应该长什么样。

interface 示例：

interface User {
    id: number;
    name: string;
    email?: string; // 问号表示可选字段
}

const user: User = {
    id: 1,
    name: "Alice"
};

type 示例：

type Person = {
    firstName: string;
    lastName: string;
};

const person: Person = {
    firstName: "Tom",
    lastName: "Smith"
};

接口和类型的区别比较细，初期可以用 interface 为主，后续再深入。

函数（Function）

函数是一段可以重复使用的代码块。TypeScript 允许为参数和返回值都指定类型。

function add(x: number, y: number): number {
    return x + y;
}

add(10, 20); // 正确
add("10", 20); // 错误：第一个参数必须是 number 类型

也可以使用箭头函数：

const multiply = (a: number, b: number): number => a * b;

类（Class）

类是一种组织数据与方法的方式，支持面向对象编程（OOP）。比如我们可以定义一个人的类：

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    speak(): void {
        console.log(`${this.name} 发出了声音`);
    }
}

const dog = new Animal('旺财');
dog.speak(); // 输出 “旺财 发出了声音”

枚举（Enum）

枚举是一个方便表示一组固定值的类型，常用于状态、选项等情况。

enum Color {
    Red,
    Green,
    Blue
}

let backgroundColor: Color = Color.Blue;
console.log(backgroundColor); // 输出 2（枚举值从0开始）

你也可以自定义值：

enum Level {
    Easy = "easy",
    Medium = "medium",
    Hard = "hard"
}

实战项目：做一个小型待办事项应用（To-do App）

好了，现在我们已经掌握了基本知识，那么就开始实战吧！我们一起来做一个 待办事项列表（Todo List） 应用。

目标功能：

添加新任务
显示任务列表
标记任务为已完成
删除任务

我们先创建两个文件：

todo.ts：TypeScript 主逻辑代码
index.html：简单界面

第一步：设计数据结构

// todo.ts

interface Todo {
    id: number;
    text: string;
    completed: boolean;
}

第二步：实现添加和展示任务

我们模拟一个任务列表，并打印出来：

let todos: Todo[] = [];

function addTodo(text: string): void {
    const newTodo: Todo = {
        id: Date.now(),
        text: text,
        completed: false
    };
    todos.push(newTodo);
    render();
}

function render(): void {
    const container = document.getElementById("todo-list")!;
    container.innerHTML = "";

    todos.forEach((todo) => {
        const li = document.createElement("li");
        li.textContent = `${todo.text} - ${todo.completed ? "已完成" : "未完成"}`;
        container.appendChild(li);
    });
}

第三步：绑定 HTML 页面

创建一个 index.html 文件：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
</head>
<body>
    <h1>我的待办事项</h1>
    <input type="text" id="new-todo" placeholder="输入新任务...">
    <button onclick="add()">添加</button>

    <ul id="todo-list"></ul>

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

注意这里引用的是编译后的 JS 文件路径。

第四步：将 TypeScript 编译为 JS

我们将 todo.ts 编译到 dist/todo.js 中：

首先确认 tsconfig.json 里设置输出目录：

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "commonjs"
  },
  "include": ["./**/*"]
}

然后执行编译命令：

npx tsc

刷新页面后，你就可以看到任务列表的效果啦！

当然现在点击“添加”按钮是没有反应的，你需要把点击事件连接进去：

在 todo.ts 增加如下代码：

function add(): void {
    const input = document.getElementById("new-todo") as HTMLInputElement;
    if (input.value.trim()) {
        addTodo(input.value);
        input.value = "";
    }
}

然后再编译一次，并打开 HTML 测试。

常见问题解答（FAQ）

❓ Q1：TypeScript 编译出来的 JS 能兼容所有浏览器吗？

✅ A1：可以的！TypeScript 默认会把你的代码转为 ES3/ES5 版本的标准 JavaScript，这意味着即使旧浏览器也能支持。如果你需要更高标准的支持，可以在 tsconfig.json 中调整 target 设置。

❓ Q2：我能不能不写类型？直接写 JS 那样写法？

✅ A2：可以！因为 TypeScript 支持类型推断，也就是说如果你不显式写类型，TS 也会根据你赋值的内容自动判断类型。

例如：

let age = 20; // 类型自动为 number
age = "abc"; // 报错！不能将 string 赋给 number 类型

❓ Q3：为什么建议避免使用 `any` 类型？

✅ A3：因为 any 相当于放弃类型检查，完全依赖你自己的记忆。一旦写错了参数，或者搞混了变量用途，很容易引入 bug。所以除非不得已，尽量不要用 any。

❓ Q4：是否需要一开始就掌握所有的类型语法？

✅ A4：不是的。刚开始学习时，只要掌握基础类型（string、number、boolean、array）、接口（interface）和函数类型就够了。其它进阶内容（如泛型、联合类型、映射类型等）可以逐步积累。

学习建议：接下来你应该学什么？

恭喜你完成了这次快速入门！以下是几个进一步学习的方向：

🧩 1. 深入理解常用类型

联合类型（Union Types）：允许变量具有多个可能的类型
```
let value: string | number;
```
交叉类型（Intersection Types）：合并多个类型为一个
```
type Combined = { name: string } & { age: number };
```
泛型（Generics）：让函数或类支持多种类型而无需重写
```
function identity<T>(arg: T): T {
    return arg;
}
```

⚙️ 2. 使用 TypeScript 和框架配合开发

如果你以后打算从事 Web 开发，建议熟悉以下组合：

React + TypeScript
Vue3 + TypeScript
Angular（本身就重度使用 TypeScript）

🧪 3. 练习更多实际项目

可以从这些小项目开始练习：

计算器应用
天气查询面板
图书管理系统
博客文章发布系统

通过实践才能更好地理解和巩固所学内容！

结语

本教程从零开始带你了解了 TypeScript 的基本概念、搭建开发环境、理解核心语法，并通过一个小项目动手实现功能。

作为初学者，刚开始写带类型注解的代码可能会觉得有点累，但这正是 TypeScript 强大之处 —— 它像一位耐心的老师一样，在你写代码时帮你指出错误、提升效率和可维护性。

记住一句话：TypeScript 不是替换 JavaScript 的新技术，而是让你写得更好、更可靠的 JavaScript。

祝你学习愉快，未来成为一位优秀的开发者！🌟

标签:ReactJavascript

最热最新

暂无评论

为你推荐

暂无相关推荐

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

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

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

第一步：安装 Node.js 和 npm

第二步：创建项目文件夹和初始化项目

第三步：安装 TypeScript

第四步：配置 TypeScript 配置文件

第五步：编写并编译 TypeScript 文件

核心概念：理解 TypeScript 的关键术语

类型系统（Type System）

接口（Interface）与类型别名（Type）

interface 示例：

type 示例：

函数（Function）

类（Class）

枚举（Enum）

实战项目：做一个小型待办事项应用（To-do App）

第一步：设计数据结构

第二步：实现添加和展示任务

第三步：绑定 HTML 页面

第四步：将 TypeScript 编译为 JS

常见问题解答（FAQ）

❓ Q1：TypeScript 编译出来的 JS 能兼容所有浏览器吗？

❓ Q2：我能不能不写类型？直接写 JS 那样写法？

❓ Q3：为什么建议避免使用 `any` 类型？

❓ Q4：是否需要一开始就掌握所有的类型语法？

学习建议：接下来你应该学什么？

🧩 1. 深入理解常用类型

⚙️ 2. 使用 TypeScript 和框架配合开发

🧪 3. 练习更多实际项目

结语

评论 0

为你推荐

精选内容

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

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

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

第一步：安装 Node.js 和 npm

第二步：创建项目文件夹和初始化项目

第三步：安装 TypeScript

第四步：配置 TypeScript 配置文件

第五步：编写并编译 TypeScript 文件

核心概念：理解 TypeScript 的关键术语

类型系统（Type System）

接口（Interface）与类型别名（Type）

interface 示例：

type 示例：

函数（Function）

类（Class）

枚举（Enum）

实战项目：做一个小型待办事项应用（To-do App）

第一步：设计数据结构

第二步：实现添加和展示任务

第三步：绑定 HTML 页面

第四步：将 TypeScript 编译为 JS

常见问题解答（FAQ）

❓ Q1：TypeScript 编译出来的 JS 能兼容所有浏览器吗？

❓ Q2：我能不能不写类型？直接写 JS 那样写法？

❓ Q3：为什么建议避免使用 any 类型？

❓ Q4：是否需要一开始就掌握所有的类型语法？

学习建议：接下来你应该学什么？

🧩 1. 深入理解常用类型

⚙️ 2. 使用 TypeScript 和框架配合开发

🧪 3. 练习更多实际项目

结语

评论 0

为你推荐

相关推荐

精选内容

❓ Q3：为什么建议避免使用 `any` 类型？