一文搞懂TypeScript类型：从新手到高手的全面指南

TypeScript中的各种类型使用指南

TypeScript（TS）作为JavaScript的超集，通过静态类型系统使得代码更加健壮和可维护。在实际开发中，了解并熟练使用TypeScript中的各种类型至关重要。这篇文章将详细介绍TypeScript中常见的类型及其使用场景，帮助你在开发过程中充分利用TS的类型系统。

一、基础类型

TypeScript提供了JavaScript中的所有基本数据类型，同时为其添加了类型注解的能力，使代码更具可读性和安全性。

1. number
   用于表示所有数值类型，包括整数和浮点数。

   let age: number = 30;
   let height: number = 175.5;
   

2. string
   用于表示文本数据。

   let firstName: string = "John";
   let lastName: string = "Doe";
   

3. boolean
   用于表示布尔值 true 或 false。

   let isActive: boolean = true;
   

4. null 和 undefined
null 和 undefined 都是基本类型，通常用来表示变量未赋值的状态。

   let notAssigned: null = null;
   let notInitialized: undefined = undefined;
   

5. any
any 类型可以表示任意类型，适用于需要兼容JavaScript代码或处理不确定类型的情况。

   let randomValue: any = "Hello";
   randomValue = 42;
   randomValue = true;
   

6. void
void 类型通常用于表示函数没有返回值。

   function logMessage(message: string): void {
     console.log(message);
   }
   

二、复杂类型

TypeScript还支持更复杂的数据类型，如对象、数组、元组等。

1. 对象类型
   对象类型允许我们定义具有特定属性的对象结构。

   let person: { name: string; age: number } = {
     name: "Alice",
     age: 25
   };
   

2. 数组类型
   TypeScript允许为数组定义元素类型，可以使用 T[] 或 Array<T> 来表示。

   let numbers: number[] = [1, 2, 3, 4, 5];
   let fruits: Array<string> = ["Apple", "Banana", "Orange"];
   

3. 元组类型
   元组类型用来表示固定长度和已知类型的数组。

   let tuple: [string, number] = ["Alice", 25];
   

4. 枚举类型
   枚举类型为一组相关的值赋予友好的名字。

   enum Direction {
     Up,
     Down,
     Left,
     Right
   }
   let move: Direction = Direction.Up;
   

三、联合类型与交叉类型

TypeScript允许使用联合类型和交叉类型来表达更复杂的类型组合。

1. 联合类型 (Union Types)
   联合类型允许一个变量持有多种类型中的一种。

   let id: number | string;
   id = 101;
   id = "A101";
   

2. 交叉类型 (Intersection Types)
   交叉类型允许将多个类型合并为一个类型，这个类型将拥有所有组合类型的特性。

   interface Employee {
     name: string;
     age: number;
   }
   
   interface Manager {
     level: number;
   }
   
   let manager: Employee & Manager = {
     name: "Bob",
     age: 45,
     level: 2
   };
   

四、类型别名和接口

类型别名和接口是TypeScript中用于定义自定义类型的两种方式。

1. 类型别名 (type)
   类型别名允许为复杂的类型起一个简短的名字。

   type Point = {
     x: number;
     y: number;
   };
   
   let p: Point = { x: 10, y: 20 };
   

2. 接口 (interface)
   接口用来定义对象的结构，并且可以被类实现或扩展。

   interface Person {
     name: string;
     age: number;
   }
   
   let employee: Person = {
     name: "John",
     age: 30
   };
   

   接口还可以继承多个其他接口。

   interface Employee extends Person {
     salary: number;
   }
   
   let manager: Employee = {
     name: "Alice",
     age: 35,
     salary: 5000
   };
   

五、泛型

泛型允许我们定义多种类型的代码，增强了代码的可重用性。

1. 泛型函数
   泛型函数能够处理不同类型的数据，而不需要重复写不同类型的函数。

   function identity<T>(arg: T): T {
     return arg;
   }
   
   let output1 = identity<string>("Hello");
   let output2 = identity<number>(42);
   

2. 泛型接口
   泛型接口允许我们在接口中使用泛型，从而定义出适应性更强的接口。

   interface Box<T> {
     content: T;
   }
   
   let stringBox: Box<string> = { content: "Hello" };
   let numberBox: Box<number> = { content: 100 };
   

3. 泛型类
   泛型也可以用于类，使类可以处理不同类型的数据。

   class Pair<T, U> {
     constructor(public first: T, public second: U) {}
   }
   
   let pair = new Pair<string, number>("Hello", 42);
   

六、类型断言与类型守卫

有时你会遇到类型不确定的情况，此时可以使用类型断言和类型守卫来告知编译器变量的确切类型。

1. 类型断言
   类型断言用来手动指定变量的类型，类似于类型转换。

   let someValue: any = "This is a string";
   let strLength: number = (someValue as string).length;
   

2. 类型守卫
   类型守卫是用于缩小类型范围的条件语句，常用于 typeof 和 instanceof。

   function padLeft(value: string, padding: string | number) {
     if (typeof padding === "number") {
       return Array(padding + 1).join(" ") + value;
     }
     if (typeof padding === "string") {
       return padding + value;
     }
     throw new Error(`Expected string or number, but got ${typeof padding}.`);
   }
   

七、总结

TypeScript的类型系统提供了丰富的类型工具，帮助我们在开发中更好地定义数据结构和逻辑，减少运行时错误。通过熟练使用TypeScript中的各种类型，你可以写出更加健壮和可维护的代码。希望这篇指南能帮助你更好地掌握TypeScript类型的使用，为你的前端开发保驾护航。