TypeScript 知识补充：隐式类型推断与泛型类型

2023-10-25 23:45:14

驾驭 TypeScript 的强大功能：隐式类型推断与泛型类型

在充满活力的 JavaScript 生态系统中，TypeScript 以其严格的类型系统脱颖而出，为您的代码注入可靠性和可维护性。其中两个至关重要的特性——隐式类型推断和泛型类型——进一步提升了 TypeScript 的优势，让您编写更简洁、更可复用的代码。

揭秘隐式类型推断

想象一下，你正在烤制一盘美味的饼干。您不需要事先逐一测量每种成分的量，因为您经验丰富，可以凭直觉做出判断。类似地，TypeScript 的隐式类型推断允许您省略变量的显式类型注解，TypeScript 会根据一些巧妙的规则推断它们。

首先，如果您将变量初始化为字面量（例如数字或字符串），TypeScript 会将其类型锁定为该字面量的类型。其次，上下文也会影响类型推断。例如，在数学函数中使用的变量会被推断为数字类型。最后，对象和数组的结构也会触发结构类型推断。

代码示例：

const name = "Alice"; // type: string
const sum = 1 + 2; // type: number

function greet(person: string) {
  console.log(`Hello, ${person}!`);
}

greet("Bob"); // Argument's type matches the function's parameter type

const friends = ["Alice", "Bob", "Eve"]; // type: string[]

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

const person: Person = {
  name: "John",
  age: 30
};

拥抱泛型类型的灵活性

泛型类型就像万能力士，它们允许您创建可适应不同数据类型和场景的可重用组件。泛型类型使用类型参数（用尖括号表示）作为占位符，允许您为多种数据类型创建单一函数或数据结构。

举个例子，考虑一个 max() 函数，它返回两个数字中较大的那个。有了泛型类型，您可以将该函数推广到任何可比较类型，而无需创建多个特定类型的版本。

代码示例：

function max<T extends number | string>(x: T, y: T): T {
  return x > y ? x : y;
}

const maxValue = max(10, 20); // type: number
const maxValue2 = max("Hello", "World"); // type: string