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

小镇程序员

2025-06-23 22:34

阅读 360

开篇：什么是TypeScript？为什么用它？

你可能听说过 JavaScript，它是用来编写网页交互逻辑的主要语言。但随着项目的变大，JavaScript 的“灵活”也带来了混乱和错误风险。

TypeScript 就是为了解决这个问题而诞生的。

你可以把它理解成一个“加强版的 JavaScript”，它在保留 JavaScript 所有功能的基础上，增加了“类型”的概念，能帮助你在写代码的时候就发现很多常见错误。

比如，你想让某个函数只能接收数字，但它却被传入了字符串，TypeScript 就会提前报错告诉你：“这里应该是数字，别传字符串！”

简单来说：

它是 JavaScript 的超集（你之前学过的 JS 都能在 TS 里用）
它帮你提前发现问题，提高代码质量
它非常适合中大型项目或团队协作

如果你是完全零基础的新手，没关系！我们将在接下来的 30 分钟内带你一步步掌握 TypeScript 的基本用法。

环境准备：安装与配置开发环境

第一步：安装 Node.js 和 npm

TypeScript 工具通常通过 npm（Node Package Manager） 来安装。你需要先安装 Node.js：

打开 https://nodejs.org
下载 LTS（长期支持）版本安装包
按照提示完成安装

✅ 安装完成后，在命令行输入以下命令确认是否成功：

node -v
npm -v

如果出现版本号，说明安装成功。

第二步：全局安装 TypeScript 编译器

TypeScript 文件不能直接运行，需要先转换成 JavaScript 文件，这一步叫做“编译”。

使用下面这个命令安装 tsc（TypeScript Compiler）工具：

npm install -g typescript

然后检查是否安装成功：

tsc -v

你应该会看到类似这样的输出：

Version 5.x.x

第三步：创建你的第一个 TypeScript 文件

我们可以新建一个文件夹，例如 my-ts-project，并在里面创建一个 .ts 文件，比如 hello.ts：

// hello.ts
console.log("Hello, TypeScript!");

现在使用 tsc 把它编译成 JS：

tsc hello.ts

你会看到同一个目录下生成了一个 hello.js 文件。

运行它：

node hello.js

输出结果：

Hello, TypeScript!

🎉 成功运行了你的第一段 TypeScript 代码！

核心概念讲解：从变量到函数类型

为了让你快速上手，我们只讲最核心、最常用的几个概念，并附上简单易懂的例子。

1. 类型标注（Types）

TypeScript 最大的特色就是——给变量指定类型。

比如你可以这样声明一个变量：

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

✅ 这样写的目的是告诉 TypeScript：这些变量只能存储指定类型的值，否则会报错。

试试这段代码：

let age: number = "twenty-five"; // 错误！不能把字符串赋值给 number 类型

TypeScript 会在编译时提示你类型不匹配。

2. 类型推断（Type Inference）

有时候你不一定要显式写出类型，TypeScript 会自动帮你判断。

比如：

let score = 95; // 类型被推断为 number
let message = "欢迎学习 TypeScript"; // 类型被推断为 string

3. 数组类型（Array Types）

数组中的元素类型也可以明确指定：

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

或者使用泛型方式：

let numbers: Array<number> = [1, 2, 3];

两种写法都可以，推荐使用第一种更简洁。

4. 函数类型（Function Types）

你可以为函数参数和返回值定义类型：

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

调用示例：

console.log(add(2, 3)); // 正确
console.log(add("2", 3)); // 错误：第一个参数必须是 number

5. 对象类型（Object Types）

你可以用接口（interface）来定义对象的结构：

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

function greet(person: Person) {
    console.log(`你好，${person.name}，今年 ${person.age} 岁`);
}

const user = { name: "小明", age: 18 };
greet(user);

这样就能确保传入的对象包含必要的字段。

6. 联合类型（Union Types）

有些变量可能是几种类型之一，可以用 | 表示联合类型：

let id: string | number;

id = 123; // OK
id = "abc"; // OK
id = true; // ❌ 报错，不是 string 或 number

7. 可选属性（Optional Properties）

有时对象的某些属性不是必须的，可以加个 ?：

interface Product {
    name: string;
    price: number;
    description?: string; // 可选
}

const book: Product = {
    name: "TypeScript 入门",
    price: 49.9
};

实战项目：做一个简单的待办事项列表

我们来用前面学到的知识，一起实现一个小型的“待办事项管理器”。

Step 1：定义任务接口

我们要先定义任务的数据结构：

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

Step 2：创建任务数组并打印

let todos: Todo[] = [
    { id: 1, text: "学习 TypeScript", completed: false },
    { id: 2, text: "做练习题", completed: true }
];

todos.forEach(todo => {
    console.log(`${todo.id}. ${todo.text} - ${todo.completed ? '已完成' : '未完成'}`);
});

Step 3：添加新任务的函数

function addTodo(text: string) {
    const newId = todos.length > 0 ? todos[todos.length - 1].id + 1 : 1;
    const newTodo: Todo = {
        id: newId,
        text: text,
        completed: false
    };
    todos.push(newTodo);
}

addTodo("写作业");
console.log(todos);

Step 4：标记任务为已完成

function completeTodo(id: number) {
    const todo = todos.find(t => t.id === id);
    if (todo) {
        todo.completed = true;
    }
}

completeTodo(1);
console.log(todos);

这就是一个简单的 To-Do 应用程序的基本框架了。虽然没有界面，但已经具备数据处理的能力。

新手常见问题解答

Q1：TypeScript 和 JavaScript 有什么区别？

JavaScript 是浏览器可以直接执行的语言。
TypeScript 是 JavaScript 的扩展，多了一个“类型系统”。
TypeScript 最终要被编译成 JavaScript 才能运行。

Q2：我是不是必须学完 JavaScript 再学 TypeScript？

不是必须的。你可以直接学习 TypeScript，因为它包含了所有 JavaScript 的语法。

不过建议先熟悉一些基本的 JS 语法，比如变量、函数、对象等，这样更容易理解 TS 的优势。

Q3：为什么我的 .ts 文件没有错误提示？

确保：

使用的是 .ts 后缀
安装了 TypeScript 编译器（tsc）
使用了 IDE 插件，如 VS Code 中的 TypeScript 支持

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

恭喜你完成了这个30分钟快速入门教程！

如果你想继续深入学习 TypeScript，以下是几个推荐方向：

✅ 基础进阶内容

接口（Interfaces）与类型别名（Type Aliases）
类（Classes）和继承
泛型（Generics）
枚举（Enums）
装饰器（Decorators）

✅ 与前端框架结合

React + TypeScript
Vue.js + TypeScript

✅ 使用构建工具

Webpack + TypeScript
Vite + TypeScript

✅ 阅读文档 & 动手实践

官方文档：https://www.typescriptlang.org/
TypeScript Playground：在线试用 TS 的好地方
自己尝试重构一个 JS 项目为 TS 版本，加深理解

结语：继续加油！

你现在掌握了 TypeScript 的基本语法、类型系统的核心概念，并完成了一个小项目。这些都是成为高级开发者的重要基石。

记住一句话：“最好的学习方法就是动手做项目”。不断尝试写代码、改代码，遇到问题查文档、看教程，你会发现 TypeScript 并没有想象中那么难。

祝你学习顺利，早日成为一名优秀的前端开发者！🚀

标签:综合面试题React

最热最新

暂无评论

为你推荐

暂无相关推荐