TypeScript 基础知识：类型注解和类型推断

????????TypeScript 是一种静态类型的 JavaScript 超集，它引入了类型系统来提供更强大的开发工具和更可靠的代码。在 TypeScript 中，类型注解和类型推断是两个重要的概念。它们帮助开发者在代码中明确声明和推断变量的类型，从而提高代码质量和开发效率。

一、类型注解（Type Annotations）

通过使用冒号（:）来明确指定变量的类型。示例代码如下：

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

二、类型推断（Type Inference）

TypeScript 根据变量的初始化值自动推断出变量的类型。示例代码如下：

let age = 25; // 推断为 number 类型
let name = "John"; // 推断为 string 类型
let isStudent = true; // 推断为 boolean 类型

三、函数参数和返回值的类型注解和推断

function add(a: number, b: number): number {
  return a + b;
}

const result = add(5, 3); // 推断 result 的类型为 number

四、对象属性的类型注解和推断

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

person.name = "Alice"; // 正确
person.age = "30"; // 错误，类型不匹配

五、数组类型注解和推断

let numbers: number[] = [1, 2, 3, 4, 5];

let names = ["John", "Alice", "Bob"]; // 推断为 string[] 类型

六、类型别名（Type Aliases）

使用?type?关键字创建自定义类型别名，提高代码可读性。

type Point = {
  x: number;
  y: number;
};

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

七、接口（Interfaces）

定义对象的结构和属性类型

interface Person {
  name: string;
  age: number;
}

let person: Person = { name: "John", age: 25 };

八、泛型（Generics）

创建可重用的组件，支持多种类型

function identity<T>(value: T): T {
  return value;
}

let result = identity<string>("Hello TypeScript"); // 显式指定泛型类型
let result = identity("Hello TypeScript"); // 类型推断为 string

九、类型断言（Type Assertion）

手动指定变量的类型

let value: any = "Hello TypeScript";
let length: number = (value as string).length; // 使用 as 进行类型断言

// 或者使用尖括号语法：
let length: number = (<string>value).length;

十、枚举（Enums）

定义一组命名的常量

enum Color {
  Red,
  Green,
  Blue,
}

let color: Color = Color.Red;

十一、可选属性和只读属性

interface Person {
  name: string;
  age?: number; // 可选属性
  readonly id: number; // 只读属性
}

let person: Person = { name: "John", id: 1 };
person.age = 25; // 正确
person.id = 2; // 错误，只读属性不可修改

十二、类型守卫（Type Guards）

在条件语句中判断变量的具体类型

function printLength(value: string | string[]) {
  if (typeof value === "string") {
    console.log(value.length); // 缩小为 string 类型
  } else {
    console.log(value.length); // 缩小为 string[] 类型
  }
}

十三、类型交叉（Intersection Types）

合并多个类型

type Admin = {
  name: string;
  role: string;
};

type Employee = {
  name: string;
  department: string;
};

type AdminEmployee = Admin & Employee;

let adminEmployee: AdminEmployee = {
  name: "John",
  role: "Admin",
  department: "IT",
};

十四、类型联合（Union Types）

允许变量具有多种可能的类型

type Status = "success" | "error" | "loading";

function getStatusMessage(status: Status): string {
  switch (status) {
    case "success":
      return "Operation successful";
    case "error":
      return "An error occurred";
    case "loading":
      return "Loading...";
    default:
      return "";
  }

十五、可索引类型（Index Types）

通过索引访问对象的属性

interface Dictionary<T> {
  [key: string]: T;
}

let colors: Dictionary<string> = {
  red: "#ff0000",
  green: "#00ff00",
  blue: "#0000ff",
};

let color: string = colors["red"];

十六、可辨识联合（Discriminated Unions）

使用共同的属性区分联合类型

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

type Shape = Circle | Square;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
    default:
      return 0;
  }
}