本文介绍了TypeScript类型课程的基础知识，包括类型系统的基本概念、常见类型以及类型推断。通过详细示例代码，读者可以学会如何定义和使用不同类型，如变量类型、函数类型和复合类型。此外，文章还探讨了接口和类型别名的应用，以及如何利用联合类型和交叉类型增强代码的灵活性。

引入TypeScript类型系统

为什么需要类型

在编程中，类型系统是指用于定义和检查数据类型的规则和约定。使用类型系统可以增强代码的健壮性和可维护性。在JavaScript中，由于其动态类型特性，变量可以在运行时改变类型，这可能导致一些潜在的错误。通过使用TypeScript，我们可以为代码中的每个变量指定明确的类型，从而在编译阶段就能捕捉到类型不匹配的错误。此外，类型系统还可以带来更好的代码文档化，使团队成员更容易理解和维护代码。

TypeScript类型的基本概念

TypeScript是一种静态类型语言，这意味着在编译阶段会检查类型错误，而不是在运行时。其类型系统包括多种类型（如基本类型、复合类型、接口等）和类型推断功能。通过使用这些类型，开发者可以明确地定义变量、函数参数、返回值等的类型，从而增强代码的类型安全性。

以下是TypeScript类型系统的基本概念：

• 变量类型定义

  • 在TypeScript中，可以通过在变量声明后使用: type来指定变量的类型。
  • 示例代码：

    let age: number = 25;
    let name: string = "Alice";
    let isStudent: boolean = true;

• 类型注解

  • 类型注解用于显式地声明变量的类型。
  • 示例代码：

    let person: { name: string; age: number };
    person = { name: "Bob", age: 30 };

• 函数类型定义

  • 函数参数和返回值也可以定义类型。
  • 示例代码：

    function greet(name: string): string {
    return `Hello, ${name}`;
    }

• 类型推断

  • TypeScript可以自动推断一些基本类型的变量类型。
  • 示例代码：

    let age = 25; // 类型推断为 number
    let name = "Alice"; // 类型推断为 string

• 接口和类型别名

  • 接口用于定义对象的形状，类型别名用于定义新的类型。
  • 示例代码：

    
    interface Point {
    x: number;
    y: number;
    }

  type Size = { width: number; height: number };

常见类型介绍

基本类型

TypeScript提供了多种基本类型的定义，包括数字、字符串、布尔值、null和undefined等。

• 数字类型 (number)

  • 用于表示整数或浮点数。
  • 示例代码：

    let age: number = 18;
    let pi: number = 3.14;

• 字符串类型 (string)

  • 用于表示文本。
  • 示例代码：

    let name: string = "Alice";
    let message: string = `Hello, ${name}`;

• 布尔类型 (boolean)

  • 用于表示真或假。
  • 示例代码：

    let isStudent: boolean = true;
    let isWorking: boolean = false;

• null 和 undefined 类型
  • 用于表示未定义或空值。
  • 示例代码：

    let unknown: undefined = undefined;
    let nothing: null = null;

复合类型

除了基本类型外，TypeScript还支持复合类型，包括数组、元组以及枚举类型。

• 数组类型 ([type][])

  • 用于表示包含相同类型元素的数组。
  • 示例代码：

    let numbers: number[] = [1, 2, 3];
    let names: string[] = ["Alice", "Bob"];

• 元组类型 (tuple)

  • 用于表示包含不同类型元素的数组，并且每个元素都有固定的索引。
  • 示例代码：

    let person: [string, number] = ["Alice", 25];
    person[0]; // "Alice"
    person[1]; // 25

• 枚举类型 (enum)
  • 用于定义一组命名的常量。
  • 示例代码：

    enum Status { Ready, Running, Finished }
    let status: Status = Status.Ready;

类型推断与类型定义

类型推断的使用场景

TypeScript具有类型推断功能，基本类型（如数字、字符串、布尔值）的推断是自动完成的，但某些复杂的类型需要手动定义。

• 示例代码：

  let name = "Alice"; // 推断为 string 类型
  let nameLength = name.length; // 推断为 number 类型

如何手动定义类型

手动定义类型可以确保变量、函数参数和返回值的类型正确无误，提高代码的可读性和健壮性。

• 示例代码：

  function addNumbers(a: number, b: number): number {
  return a + b;
  }
  
  let result: number = addNumbers(1, 2); // result 的类型被推断为 number

接口与类型别名

接口的定义与使用

接口用于定义对象的形状，即对象可以具有哪些属性和方法。

• 示例代码：

  interface Point {
  x: number;
  y: number;
  }
  
  let point: Point = { x: 10, y: 20 };

• 接口的继承

  • 接口可以继承其他接口，这可以让你定义更复杂的类型层次。
  • 示例代码：

    
    interface Point3D extends Point {
    z: number;
    }

  let point3D: Point3D = { x: 10, y: 20, z: 30 };

类型别名的应用场景

类型别名用于定义新的类型，可以简化复杂的类型定义。

• 示例代码：

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

联合类型与交叉类型

联合类型的定义与应用

联合类型用于表示一个变量可以是多种类型中的一种。

• 示例代码：

  let maybeNumberOrString: number | string;
  maybeNumberOrString = 42; // 允许
  maybeNumberOrString = "hello"; // 允许

• 联合类型的使用场景：

  • 当一个变量可能具有多种类型的值时。
  • 示例代码：

    
    function logValue(value: number | string) {
    if (typeof value === 'number') {
    console.log(`Number: ${value}`);
    } else {
    console.log(`String: ${value}`);
    }
    }

  logValue(42); // 输出: Number: 42
  logValue("hello"); // 输出: String: hello

交叉类型的定义与应用

交叉类型用于表示一个变量同时具有多种类型的属性、方法或行为。

• 示例代码：

  interface Point {
  x: number;
  y: number;
  }
  
  interface Color {
  r: number;
  g: number;
  b: number;
  }
  
  let pointWithColor: Point & Color = {
  x: 10,
  y: 20,
  r: 255,
  g: 0,
  b: 0
  };

类型保护与类型守卫

类型保护的概念

类型保护是一种模式，用于确保变量是特定类型。类型守卫是一种运行时检查，用于确保值是特定类型。

• 示例代码：

  function isString(value: any): value is string {
  return typeof value === 'string';
  }
  
  function processValue(value: any) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value);
  }
  }
  
  processValue("hello"); // 输出: HELLO
  processValue(42); // 输出: 42

类型守卫的实现与使用

类型守卫可以是typeof、instanceof、in等关键字，或者自定义的类型保护函数。

• 示例代码：

  function isNumber(value: any): value is number {
  return typeof value === 'number';
  }
  
  function performOperation(value: any) {
  if (isNumber(value)) {
    console.log(`Square of ${value} is ${value * value}`);
  } else if (typeof value === 'string') {
    console.log(`Length of ${value} is ${value.length}`);
  }
  }
  
  performOperation(42); // 输出: Square of 42 is 1764
  performOperation("hello"); // 输出: Length of hello is 5