TypeScript 快速入门与环境搭建
前言
本文你将学到：
✅ TypeScript 的基本概念和优势
✅ 开发环境搭建方法
✅ tsconfig.json 配置文件
✅ 编写和编译第一个 TypeScript 程序
✅ 开发工具配置
1 什么是 TypeScript
TypeScript 是 JavaScript 的超集，由微软于 2012 年发布并开源。它在 JavaScript 基础上添加了静态类型系统，最终编译为纯 JavaScript 运行。
核心特性：
静态类型检查：在编译阶段发现类型错误
JavaScript 超集：完全兼容 JavaScript 语法
面向对象特性：支持类、接口、继承等 OOP 概念
工具支持：强大的 IDE 智能提示和自动补全
渐进式采用：可以逐步将 JavaScript 项目迁移到 TypeScript
2 为什么要学习 TypeScript
JavaScript 的痛点：
// JavaScript示例 - 运行时错误
function add(a, b) {return a + b;
}
add(10, 20); // 30 ✅
add("10", "20"); // "1020" ❌
add(null, undefined); // NaN ❌
TypeScript 的优势：
// TypeScript示例 - 编译时错误
function add(a: number, b: number): number {return a + b;
}
add(10, 20); // 30 ✅
add("10", "20"); // 编译时报错 ❌
add(null, undefined); // 编译时报错 ❌
3 环境搭建
安装 Node.js
首先确保安装了 Node.js（推荐 LTS 版本）：
# 检查Node.js版本
node --version
npm --version
安装 TypeScript
# 全局安装TypeScript
npm install -g typescript
# 验证安装
tsc --version
4 创建第一个 TypeScript 项目
项目初始化
# 创建项目文件夹
mkdir my-first-typescript
cd my-first-typescript
# 初始化package.json
npm init -y
创建 tsconfig.json 配置文件
{"compilerOptions": {"target": "ES2020","module": "commonjs","outDir": "./dist","rootDir": "./src","strict": true,"esModuleInterop": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true},"include": ["src/**/*"],"exclude": ["node_modules", "dist"]
}
配置说明：
target：编译目标 JavaScript 版本
module：模块系统
outDir：编译输出目录
rootDir：源代码目录
strict：启用严格模式（推荐）
5 第一个 TypeScript 程序
创建源代码文件
# 创建src目录
mkdir src
# 创建第一个TypeScript文件
touch src/hello.ts
编写代码
// src/hello.ts
let message: string = "Hello TypeScript!";
console.log(message);
// 类型检查示例
function greet(name: string): string {return `Hello, ${name}!`;
}
const user: string = "初学者";
console.log(greet(user));
编译与运行
# 编译TypeScript文件
tsc
# 运行编译后的JavaScript文件
node dist/hello.js
自动编译
# 监听文件变化，自动编译
tsc --watch
6 开发工具推荐
Visual Studio Code 配置
创建.vscode/settings.json：
{"typescript.tsdk": "node_modules/typescript/lib","editor.codeActionsOnSave": {"source.fixAll.typescript": true}
}
推荐插件：
TypeScript Hero：增强 TypeScript 开发体验
ESLint：代码质量检查
Prettier：代码格式化