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

宋雨萱

2025-06-29 07:08

阅读 267

一、什么是TypeScript？为什么要学习它？

如果你是前端开发的新手，可能会听说过JavaScript和它的“好兄弟”——TypeScript（简称TS）。那么，它们之间到底有什么区别呢？

简单来说：

JavaScript 是网页开发中使用最广泛的语言之一，浏览器可以直接执行它。
TypeScript 是 JavaScript 的一个超集，可以看作是“加强版的JS”。

那为什么要用TypeScript而不直接写JavaScript呢？来看看几个关键优势：

✅ 类型检查：你可以告诉程序，“这个变量是字符串”，“那个函数只能接收数字”，这样就能在写代码时避免很多错误。

✅ 更清晰的代码结构：有了明确的数据类型，代码更容易理解、维护和协作。

✅ 兼容性好：TypeScript 最终会“编译”成普通的 JavaScript，所以它能运行在任何支持 JS 的地方。

🎯 总结一句话：TypeScript 就像是带了安全锁的 JavaScript，让你写出更健壮、更好维护的代码。

二、环境准备：从零开始搭建TypeScript开发环境

步骤1：安装Node.js 和 npm

我们要先有一个基础环境来运行 TypeScript。我们建议你先下载并安装 Node.js。
👉 官网地址：https://nodejs.org/

安装完成后，在命令行中输入以下命令，查看是否成功安装：

node -v
npm -v

如果能看到版本号，恭喜你！Node.js和npm已经安装好了。

⚠️ 温馨提示：npm 是 Node.js 自带的包管理工具，我们可以用它来安装TypeScript和其他工具。

步骤2：全局安装 TypeScript

接下来，我们通过 npm 来安装 TypeScript 编译器：

npm install -g typescript

安装完成后，输入：

tsc --version

如果显示 TypeScript 版本号，说明安装成功！

步骤3：创建你的第一个项目目录

新建一个文件夹，例如叫 ts-project，在里面创建两个文件：

ts-project/
├── index.html
└── app.ts

我们在 app.ts 写 TypeScript 代码，然后通过 TypeScript 编译器将它转为浏览器可以识别的 app.js 文件。

步骤4：配置编译选项（tsconfig.json）

在项目根目录运行以下命令：

tsc --init

这会在当前目录生成一个 tsconfig.json 文件，它用于配置 TypeScript 编译行为。

你可以打开这个文件，找到并修改这几个常用配置（其他保持默认即可）：

{
  "target": "ES2020",
  "module": "ESNext",
  "outDir": "./dist"
}

这样配置后，当你运行编译命令，TypeScript 会自动将所有 .ts 文件输出到 dist 文件夹下。

步骤5：测试编译

在 app.ts 中写入一段简单的 TS 代码：

let message: string = "Hello, TypeScript!";
console.log(message);

然后运行编译命令：

tsc

你会看到多出一个 dist/app.js 文件。打开它，里面内容就是编译后的 JavaScript。

三、TypeScript核心概念讲解（含代码示例）

我们不需要一开始就讲太复杂的知识，先从以下几个最基础但最重要的概念入手。

1. 变量类型声明（Typing）

在 JavaScript 中，变量是没有类型的：

let age = 25;
age = "twenty-five"; // 合法的，但容易出错

而在 TypeScript 中，你可以给变量加上“类型标签”：

let age: number = 25;
age = "twenty-five"; // ❌ 报错！不能赋值字符串给number

📌 常见类型有：

number：数字
string：字符串
boolean：布尔值（true/false）
array：数组
object：对象
any：任意类型（谨慎使用）

2. 类型推断（Type Inference）

有时候，TS可以根据你赋的值自动判断类型：

let name = "Alice"; // 不写 :string，TS也知道是 string
name = 123; // ❌ 报错

3. 函数参数与返回值类型

我们可以给函数的参数和返回值也加上类型：

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

add(2, 3);   // ✅ 正确
add("2", 3); // ❌ 报错：参数必须是number类型

如果不指定返回值类型，TS也会尝试根据返回结果推断：

function sayHi(name: string) {
    return "Hello, " + name; // 推断返回的是 string
}

4. 数组类型定义

数组中的元素也需要类型一致：

let nums: number[] = [1, 2, 3];
nums.push(4); // ✅ 正确
nums.push("a"); // ❌ 错误，不能加字符串进去

也可以使用另一种写法：

let fruits: Array<string> = ["apple", "banana"];
fruits.push("orange"); // ✅
fruits.push(123);      // ❌

5. 对象和接口（Interface）

我们可以用 interface 来描述一个对象应该长什么样：

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

let user: Person = {
    name: "John",
    age: 30
};

如果少了一个字段或者类型不对，TS会报错。

6. 联合类型（Union Types）

有时候一个变量可以是几种类型，比如一个搜索框可能是字符串或数字：

let input: string | number;

input = "abc";  // ✅
input = 123;    // ✅
input = true;   // ❌

7. any 类型

any 类型表示不进行类型检查，几乎等于退化回原始 JS。

let value: any = "hello";
value = 123; // 允许
value = true; // 允许

⚠️ 注意：虽然方便，但应尽量避免使用 any，因为它失去了TS的优势。

四、实战演练：做一个简易待办事项应用（To-do List）

现在，我们动手做一个简单的 To-do 应用，练习前面学到的知识。

1. 项目结构

我们在之前的项目基础上添加 HTML 文件：

ts-project/
├── index.html
├── dist/
│   └── main.js
└── src/
    └── main.ts

我们改用 src/main.ts 写代码，让 TypeScript 编译到 dist/ 目录。

更新一下 tsconfig.json 中的入口路径：

{
  "rootDir": "./src",
  "outDir": "./dist"
}

2. 编写HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>TypeScript 待办事项</title>
</head>
<body>
  <h1>我的待办事项</h1>

  <input type="text" id="todoInput" placeholder="输入任务..." />
  <button id="addBtn">添加任务</button>
  <ul id="todoList"></ul>

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

3. 编写TypeScript代码（src/main.ts）

// 定义任务类型
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

// 存储任务的数组
let todos: Todo[] = [];

// 获取DOM元素
const input = document.getElementById('todoInput') as HTMLInputElement;
const button = document.getElementById('addBtn') as HTMLButtonElement;
const list = document.getElementById('todoList') as HTMLUListElement;

// 添加新任务
button.addEventListener('click', () => {
  const text = input.value.trim();
  if (text) {
    const newTodo: Todo = {
      id: Date.now(),
      text: text,
      completed: false
    };
    todos.push(newTodo);
    renderTodos();
    input.value = '';
  }
});

// 显示任务列表
function renderTodos() {
  list.innerHTML = '';
  todos.forEach(todo => {
    const li = document.createElement('li');
    li.textContent = todo.text;

    // 添加点击完成功能
    li.addEventListener('click', () => {
      todo.completed = !todo.completed;
      renderTodos();
    });

    // 如果已完成，标记样式
    if (todo.completed) {
      li.style.textDecoration = 'line-through';
      li.style.color = 'gray';
    }

    list.appendChild(li);
  });
}

4. 编译并测试

运行命令：

tsc

然后打开 index.html，就可以看到你的第一个用 TypeScript 构建的交互式小应用啦 ✅

五、常见问题FAQ

Q1：为什么我运行 tsc 没有任何输出？ A：可能没有 tsconfig.json 文件，或者没有语法错误。可以添加 --watch 参数监听变化试试：

tsc --watch

Q2：TypeScript 和 JavaScript 有什么区别？ A：TS 是 JS 的超集，增加了静态类型系统，帮助你发现潜在错误。

Q3：TS 写完是不是每次都要编译？ A：是的，你需要用 tsc 把 .ts 文件编译为浏览器可用的 .js 文件。

Q4：可以用TS写React吗？ A：当然可以！React 支持 TypeScript，而且官方推荐使用。

Q5：为什么有些变量类型用 :，有些用 <Type>？ A：这是泛型的不同写法，如 let arr: string[] 或 let arr: Array<string> 是等价的。

六、下一步学习建议

恭喜你完成了本篇教程 🎉！你现在应该对TypeScript有了基本的认识，并能写一些简单的应用了。

接下来你可以沿着这些路径继续学习：

🔹 初级进阶方向

学习 Type Guard（类型守卫）
了解泛型（Generics）的用法
尝试用TS写类（class）和继承
使用 TS 配合 React/Vue 进行开发

🔹 推荐学习资源

官方文档：https://www.typescriptlang.org/docs
TypeScript Playground 在线实验：https://www.typescriptlang.org/play
B站/YouTube 搜索 “TypeScript实战教程”

🔹 实战项目推荐

记账小程序
天气查询App
简易商城（结合Vue/React+TS）

结语

学习编程就像学骑自行车 —— 一开始摇摇晃晃，但只要坚持练下去，很快就能跑起来。TypeScript作为现代前端开发的核心工具，掌握它是迈向专业开发者的重要一步。

希望这篇《TypeScript快速入门指南》能够为你打下坚实的基础。如果你还有不懂的地方，欢迎留言提问，我们一起成长 💪

Happy Coding！💻

标签:区块链算法项目运营

最热最新

暂无评论

为你推荐

暂无相关推荐