面试题：TypeScript中类型推断与类型注解基础应用

Question

请解释TypeScript中类型推断的基本原理，并举例说明在函数参数和返回值中，类型推断是如何工作的。同时，给出一个使用类型注解明确函数参数和返回值类型的示例，并阐述在哪些场景下使用类型注解比依赖类型推断更合适。

Answer 1

TypeScript中类型推断的基本原理

TypeScript的类型推断是在编译阶段自动推导变量、函数参数和返回值类型的机制。它基于代码的上下文信息，无需显式声明类型注解，就能确定类型。例如，当一个变量被赋值时，TypeScript会根据赋的值推断其类型。如果let num = 42;，TypeScript会推断num的类型为number。

函数参数和返回值中的类型推断

1. 函数参数类型推断：

   function add(a, b) {
       return a + b;
   }
   let result = add(5, 3); // 这里TypeScript推断a和b为number类型
   

   在这个例子中，虽然函数add没有显式声明参数类型，但因为调用时传入了数字，TypeScript推断参数a和b的类型为number。
2. 函数返回值类型推断：

   function multiply(a, b) {
       return a * b;
   }
   let product = multiply(2, 4); // TypeScript推断返回值为number类型
   

   函数multiply没有显式声明返回值类型，但由于返回表达式a * b的结果为数字，TypeScript推断返回值类型为number。

使用类型注解明确函数参数和返回值类型的示例

function divide(a: number, b: number): number {
    if (b === 0) {
        throw new Error('Division by zero');
    }
    return a / b;
}
let quotient = divide(10, 2);

在这个divide函数中，显式使用类型注解声明参数a和b为number类型，返回值也为number类型。

使用类型注解比依赖类型推断更合适的场景

1. 函数重载：当一个函数有多种不同参数类型组合的实现时，需要类型注解来明确不同重载的参数和返回值类型。

   function printValue(value: string): void;
   function printValue(value: number): void;
   function printValue(value: any): void {
       console.log(value);
   }
   

2. 提高代码可读性：对于复杂的函数，特别是参数较多或返回值类型不直观时，使用类型注解能让代码阅读者更清晰地了解函数的接口。例如：

   function calculateStatistics(data: number[], options: { average: boolean, max: boolean }): { average?: number, max?: number } {
       let result: { average?: number, max?: number } = {};
       if (options.average) {
           let sum = data.reduce((acc, num) => acc + num, 0);
           result.average = sum / data.length;
       }
       if (options.max) {
           result.max = Math.max(...data);
       }
       return result;
   }
   

3. 避免潜在错误：在函数可能接收多种类型参数，但需要特定类型处理时，显式类型注解可以提前发现错误。例如：

   function processData(data: string | number) {
       if (typeof data ==='string') {
           // 此时data类型被收窄为string，类型注解能确保后续操作的正确性
           return data.length;
       } else {
           return data.toFixed(2);
       }
   }