引言

在前面的文章中，我们已经掌握了TypeScript的基本语法和类型注解，现在是时候迈入更高级的领域，发现TypeScript的强大潜力！在本文中，我们将深入探索TypeScript高级类型的世界，并通过实例代码演示如何解决实际开发中的难题。

1.联合类型和交叉类型

场景：处理不同来源的数据
在实际项目中，我们可能会从不同的数据源获取信息，有时数据的类型可能不尽相同。使用联合类型，我们可以更灵活地处理这种情况。

function processData(data: string | number) {
    
    
  if (typeof data === "string") {
    
    
    console.log("处理字符串类型的数据：", data);
  } else if (typeof data === "number") {
    
    
    console.log("处理数字类型的数据：", data);
  } else {
    
    
    console.log("无法识别的数据类型！");
  }
}

场景：合并多个数据结构
有时我们需要将多个数据结构合并成一个新的类型，这时可以使用交叉类型来实现。

interface Person {
    
    
  name: string;
}

interface Address {
    
    
  city: string;
}

type PersonWithAddress = Person & Address;

function printPersonInfo(person: PersonWithAddress) {
    
    
  console.log("姓名：", person.name);
  console.log("城市：", person.city);
}

2. 类型别名和类型断言

场景：简化复杂类型
当我们在编写复杂的类型声明时，使用类型别名可以大幅提高代码的可读性。

type ComplexData = {
    
     id: number; name: string; age: number };

场景：与第三方库集成
当与第三方库或原生JavaScript交互时，有时我们需要手动指定变量的类型，使用类型断言可以增加灵活性。

let value: any = "Hello TypeScript!";
let length: number = (value as string).length;

3. 条件类型

场景：根据条件选择不同的类型
条件类型允许我们根据条件返回不同的类型，这在一些复杂的业务场景中很有用。

type Check<T> = T extends string ? boolean : number;

type Result1 = Check<string>; // Result1为boolean类型
type Result2 = Check<number>; // Result2为number类型

4. 映射类型

场景：批量设置默认值
在处理用户输入或配置时，有时我们需要为每个属性设置默认值。使用映射类型，可以轻松实现批量设置默认值的功能。

type Options = {
    
    
  name: string;
  age: number;
  isActive: boolean;
};

type DefaultOptions<T> = {
    
     [K in keyof T]: T[K] | null };

function setDefaultValues<T>(options: DefaultOptions<T>): T {
    
    
  const defaultValues = {
    
    
    name: "John Doe",
    age: 25,
    isActive: false,
    ...options,
  };

  return defaultValues as T;
}

const userOptions = setDefaultValues<Options>({
    
    
  name: "Alice",
  isActive: true,
});

5. Omit 和 Pick

场景：从接口中排除或选择部分属性
在实际项目中，有时我们需要从一个接口中排除一些属性或者选择特定的属性。Omit 和 Pick 是 TypeScript 的两个高级类型，分别用于实现这两个功能。

Omit

Omit 允许我们从一个接口中排除指定的属性，返回一个新的接口。

interface User {
    
    
  id: number;
  name: string;
  age: number;
  email: string;
}

type UserWithoutEmail = Omit<User, 'email'>;

const user: UserWithoutEmail = {
    
    
  id: 1,
  name: 'Alice',
  age: 30,
  // 注意，这里没有 email 属性
};

在上面的例子中，我们使用 Omit<User, ‘email’> 来排除 User 接口中的 email 属性，得到一个新的 UserWithoutEmail 接口，它没有 email 属性。

Pick

Pick 允许我们从一个接口中选择指定的属性，返回一个新的接口。

interface User {
    
    
  id: number;
  name: string;
  age: number;
  email: string;
}

type UserInfo = Pick<User, 'name' | 'age'>;

const userInfo: UserInfo = {
    
    
  name: 'Alice',
  age: 30,
  // 注意，这里没有 id 和 email 属性
};

在上面的例子中，我们使用 Pick<User, ‘name’ | ‘age’> 来选择 User 接口中的 name 和 age 属性，得到一个新的 UserInfo 接口，它只包含 name 和 age 属性。

结论

恭喜您！通过本文的学习，您已经从TypeScript的小白成长为大神了！在实际场景中，我们学习了如何使用联合类型和交叉类型处理不同来源的数据和合并多个数据结构，以及如何使用类型别名和类型断言简化复杂类型和与第三方库集成。我们还学习了如何根据条件选择不同的类型，并且使用映射类型批量设置默认值。这些高级类型的技巧将为您在实际项目中编写优雅且高效的TypeScript代码提供巨大帮助。继续努力，享受玩转TypeScript的快乐之旅！

玩转TypeScript高级类型：从小白到大神！

引言