基于最新版本（2025年整理，从环境搭建到类型系统详解）

一、TypeScript简介：为什么需要它？

1.1 JavaScript的痛点与TS的解决方案

JavaScript 是一种动态类型语言，开发时灵活但维护困难：

// JavaScript代码示例
function add(a, b) {
  return a + b;
}
add(10, "20"); // 输出 "1020"，但不会报错！

TypeScript 的核心价值：

• 静态类型检查：在代码运行前（编译时）发现类型错误
• 代码智能提示：IDE 能根据类型推导出属性和方法
• 面向对象增强：支持接口、泛型等高级特性

1.2 TS与JS的关系：超集的本质

• TS是JS的超集：所有合法的JS代码都是合法的TS代码
• 需要编译：TS代码需通过tsc编译器转换为JS（浏览器只认识JS）
• 渐进式采用：可在JS项目中逐步引入TS文件

二、开发环境搭建（2025最新版）

2.1 安装Node.js与TypeScript

1. 访问 Node.js官网 安装最新LTS版本
2. 验证安装（命令行执行）：

node -v  # 输出 v20.12.1（示例版本）
npm -v   # 输出 10.5.0

3. 全局安装TypeScript编译器：

npm install -g typescript
tsc --version  # 输出 Version 5.4.5（示例版本）

2.2 配置VSCode（推荐IDE）

1. 必装插件：
   TypeScript IntelliSense（内置，无需额外安装）
   ESLint（代码规范检查）
   Prettier（代码自动格式化）
2. 实时编译TS文件：
   创建hello.ts文件，输入 console.log("Hello TS")
   终端执行：tsc hello.ts → 生成hello.js
3. 自动化编译：
   项目根目录执行：tsc --init 生成tsconfig.json
   修改配置：

     {
       "compilerOptions": {
         "target": "ES2025",   // 编译目标ES版本
         "strict": true,       // 开启严格模式
         "outDir": "./dist"   // 输出目录
       }
     }

执行 tsc -w 监听文件变化并自动编译

三、基础类型系统（附代码示例）

3.1 原始类型：明确定义变量用途

// 显式类型注解
let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;
let nothing: null = null;
let notDefined: undefined = undefined;

// 类型错误示例
age = "30"; // 报错：不能将类型“string”分配给类型“number”

3.2 数组与元组：结构化数据

// 数组两种写法等价
let numbers: number[] = [1, 2, 3];
let fruits: Array<string> = ["apple", "banana"];

// 元组：固定长度和类型
let person: [string, number] = ["Alice", 30];
person[0] = "Bob";     // 
person[1] = "25";      //  类型“string”不能赋值给“number”
person.push("extra");  //  严格模式下元组长度固定，push会报错

3.3 枚举：给常量命名

// 数字枚举（默认从0开始）
enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right  // 3
}
let dir: Direction = Direction.Up;

// 字符串枚举（更易调试）
enum LogLevel {
  Info = "INFO",
  Error = "ERROR"
}
console.log(LogLevel.Error); // 输出 "ERROR"

3.4 特殊类型：any vs unknown

// any：关闭类型检查（慎用！）
let data: any = "hello";
data = 100;       // 
data.toFixed();   // 编译通过，但运行时可能报错！

// unknown：安全版的any
let userInput: unknown = fetchUserInput();
userInput.toUpperCase(); //  直接操作会报错
if (typeof userInput === "string") {
  userInput.toUpperCase(); //  类型守卫后可用
}

3.5 void与never：函数的特殊返回

// void：无返回值（默认可省略）
function logMessage(msg: string): void {
  console.log(msg);
}

// never：永远不会返回（常用于抛出错误）
function throwError(message: string): never {
  throw new Error(message);
}

四、类型推论与联合类型

4.1 自动类型推断

let score = 95;          // 自动推断为number类型
score = "100";           //  错误：类型不匹配

let mixedArr = [1, "two"]; // 推断为 (number | string)[]  

4.2 联合类型与类型守卫

// 联合类型：变量可以是多种类型之一
let id: string | number;
id = "ABC123";  // 
id = 123;       // 

// 类型守卫：运行时检查类型
function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

五、新手常见问题QA

Q1：TS一定要用类吗？

答：不需要！TS的核心是类型系统，即使不用类也能享受类型检查。

Q2：TS编译后的代码和我的源码不一致？

答：tsc默认编译为ES3代码，通过修改tsconfig.json中的target可调整目标版本。

Q3：为什么我的VSCode没有智能提示？

答：检查是否安装了TypeScript插件，或尝试重启VSCode。

下一篇预告（中篇）：

• 函数类型与重载
• 接口（Interface）与类型别名（type）的深度对比
• 对象类型的进阶操作

立即练习建议：

1. 在本地创建一个playground.ts文件，尝试所有示例
2. 故意写一些类型错误的代码，观察编译器的报错信息

（中篇将在24小时内更新，建议先掌握本篇内容并动手实践！）