【高频考点精讲】TypeScript类型体操入门：从基础类型到高级工具类型

TypeScript类型体操入门：从基础类型到高级工具类型

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

最近在后台收到不少同学的私信，说TypeScript的类型系统学起来像在做体操，各种泛型、联合类型绕得头晕。今天全栈老李就带大家从基础类型开始，一步步玩转TypeScript的类型体操，让你写出更健壮的前端代码。

基础类型：TypeScript的"建筑材料"

TypeScript的基础类型就像是建房子的砖块，没有它们，再复杂的类型系统也搭建不起来。我们先来看看这些"建筑材料"：

// 全栈老李的基础类型示例
let isDone: boolean = false; // 布尔值
let decimal: number = 6; // 数字
let color: string = "blue"; // 字符串
let list: number[] = [1, 2, 3]; // 数组
let tuple: [string, number] = ["hello", 10]; // 元组
enum Color {
   
   Red, Green, Blue} // 枚举
let notSure: any = 4; // 任意类型
let u: undefined = undefined; // undefined
let n: null = null; // null

这些基础类型看似简单，但在实际项目中经常会出现类型定义不严谨的问题。比如很多同学喜欢滥用any类型，这就好比在建筑中用泡沫塑料代替钢筋——短期内施工方便，长期来看隐患无穷。

联合类型与交叉类型：类型系统的"乐高积木"

有了基础类型，我们就可以开始玩"乐高"了。联合类型(|)和交叉类型(&)是构建复杂类型的基本工具。

// 全栈老李的联合类型示例
type StringOrNumber = string | number;

function formatInput(input: StringOrNumber) {
   
   
  if (typeof input === 'string') {
   
   
    return input.toUpperCase();
  }
  return input.toFixed(2);
}

// 交叉类型示例
interface Person {
   
   
  name: string;
  age: