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

CodePoet

2025-06-19 20:47

阅读 221

一、什么是TypeScript？它能用来做什么？

你可能听说过JavaScript，它是网页开发中最常见的编程语言之一。但如果你是前端开发初学者，可能会经常遇到一些运行时错误，比如变量用错了类型、函数参数传错等，这些错误不容易被提前发现。

TypeScript 就是在 JavaScript 的基础上加了一个“安全帽”的工具。它在你写代码的时候就帮你检查类型是否正确，大大减少出错的几率。
换句话说：

TypeScript = JavaScript + 类型检查

TypeScript 写好之后，会通过一个叫做“编译器”的工具转换成普通的 JavaScript，这样浏览器就能理解并运行了。

使用 TypeScript 的好处：

提前发现错误，提高代码健壮性
更好的代码提示（智能补全）
大型项目更容易维护
社区活跃、企业广泛使用（如Vue3、React、Angular都支持TypeScript）

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

开始学习 TypeScript 前，你需要先安装必要的软件。

步骤1：安装Node.js和npm

访问官网 https://nodejs.org，下载LTS版本（长期支持版）进行安装。安装完成后，在命令行输入以下命令验证是否成功：

node -v
npm -v

你应该能看到版本号输出。

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

打开终端或命令行工具，执行：

npm install -g typescript

验证是否安装成功：

tsc -v

如果显示了TypeScript的版本号（如5.0.4），说明安装成功！

步骤3：创建一个简单的TypeScript项目

新建一个文件夹，比如叫 ts-demo，进入该文件夹，并创建两个文件：

├── index.html
└── app.ts

index.html 内容如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>TypeScript入门</title>
</head>
<body>
    <h1>欢迎来到TypeScript世界！</h1>
    <script src="app.js"></script>
</body>
</html>

app.ts 初步内容如下：

console.log("Hello, TypeScript!");

现在我们把 app.ts 编译为 app.js，在终端运行：

tsc app.ts

这会在同一目录下生成一个 app.js 文件。然后你可以双击打开 index.html，按F12查看控制台输出。

🎉 成功了！你已经完成了第一个TypeScript程序！

三、核心概念讲解：TypeScript最基础的知识点

下面我们会逐一介绍几个非常重要的基础知识点，帮助你建立对TypeScript的理解。

1. 变量类型声明

TypeScript 中每个变量都应该有一个明确的类型，比如数字、字符串、布尔值等。

示例：

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

// 错误示例（会被ts报错）
name = 123; // 报错：不能将number赋值给string类型

📌 常见问题：不写类型会怎样？

TypeScript 默认支持类型推断，也就是说如果不写类型，ts也会根据你赋予的初始值自动判断：

let score = 90; // ts认为score是number类型

但如果后面试图赋值其他类型，也会报错。

2. 函数与返回值类型

定义函数时也可以指定参数的类型和返回值的类型。

示例：

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

add(2, "abc"); // ❌ 报错：第二个参数应该是number

📌 建议：始终写出参数和返回类型，这对阅读理解和维护很重要。

3. 数组类型

数组也要指定里面的元素是什么类型的。

示例：

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Tom", "Jerry"];

numbers.push("hello"); // ❌ 报错，只能添加number

4. 联合类型 | 和 any 类型

有时候一个变量可能是多个类型，比如可能是数字也可能是字符串。

示例：

let value: number | string;
value = 100;
value = "一百"; // ✅ OK

// 注意避免滥用any
let anything: any;
anything = 123;
anything = "随便什么都能装进来";

📌 注意：any 类型会跳过所有类型检查，虽然方便但不推荐滥用。

5. 接口（Interface）

接口是用来描述对象结构的工具。

示例：

interface Person {
    name: string;
    age: number;
    gender?: string; // ? 表示可选属性
}

let user: Person = {
    name: "张三",
    age: 30
}

📌 接口可以大大提高团队协作中数据结构的一致性。

6. 类（Class）基础

TypeScript 支持面向对象编程，类是我们组织代码的重要方式。

示例：

class Animal {
    name: string;

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

    speak() {
        console.log(this.name + '叫声~');
    }
}

let dog = new Animal('小狗');
dog.speak();

四、实战项目：做一个简单的购物车计算器

响应式布局概念图-1

我们将一起用TypeScript来写一个简单但完整的例子 —— 购物车总价计算。

项目目标：

输入商品价格和数量
显示总价

创建文件：

新增 cart.ts 文件内容如下：

interface Product {
    name: string;
    price: number;
    quantity: number;
}

function calculateTotal(product: Product): number {
    return product.price * product.quantity;
}

const productA: Product = {
    name: "笔记本",
    price: 5999,
    quantity: 2
};

const total = calculateTotal(productA);
console.log(`总价为：${total}`);

然后运行 tsc 编译：

tsc cart.ts

编译出 cart.js，并在HTML中调用：

修改 index.html 添加一行：

<script src="cart.js"></script>

刷新页面，打开浏览器控制台，可以看到输出结果。

✅ 恭喜你完成了一个小型的购物车功能！

五、新手常见问题解答

Q1：为什么明明写了正确的代码却报错？

A：TypeScript 严格模式下会对变量类型做严格校验，确保没有潜在隐患。你可以选择开启或者关闭严格模式。推荐保留默认配置，保持高可靠性。

Q2：TypeScript 需要自己每次手动编译吗？

A：生产环境下需要。但在开发阶段可以用 ts-node 或构建工具（如Webpack、Vite）实现自动编译，节省时间。

Q3：我能不能继续用JS语法？

A：当然可以！TypeScript 是 JS 的超集，所以所有的合法 JavaScript 代码也是合法的 TypeScript 代码。

Q4：ts文件怎么在浏览器里运行？

A：TypeScript本身是不能直接在浏览器运行的，必须经过编译后成为普通 JS 才能使用。

六、下一步学习建议

恭喜你完成第一课的学习！以下是接下来可以深入的方向：

学习路线图：

方向	学习内容
进阶类型	元组Tuple、枚举Enum、never类型等
泛型	理解泛型函数和组件如何复用逻辑
类型推导	如何让TypeScript更好地帮我们识别类型
工具库实践	结合Vue、React尝试用TypeScript重构组件
构建工具	学习如何配合Webpack、Rollup、Vite构建项目

为你推荐

暂无相关推荐