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：代码格式化