一、类型推断

TypeScript 的类型推断机制能够在编译阶段自动推导变量和表达式的类型，显著提升代码可读性与可维护性，同时减少显式类型注解的需求。

1.1 基础概念

类型推断是 TypeScript 编译器基于变量初始化值、函数返回值、表达式操作等上下文信息，自动确定变量或表达式最合适类型的过程。

基础类型推断

TypeScript 能够根据变量的初始赋值推断其基础类型：

typescript

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

最佳公共类型推断

当变量被赋予多个不同类型的值时，TypeScript 会推导出联合类型作为"最佳公共类型"：

typescript

let values = [1, 2, "three", true]; // 推断为 (number | string | boolean)[]

上下文类型推断

TypeScript 能够根据函数参数、赋值语句等上下文中的预期类型来推断变量类型。

1.2 类型断言

当我们需要手动指定变量或表达式的类型时，可以使用类型断言向 TypeScript 明确传递类型信息：

typescript

let value = "Hello, TypeScript!";let length = (value as string).length; // 手动断言为 string 类型

1.3 泛型中的类型推断

在使用泛型时，TypeScript 能够根据实际传入的参数类型推断泛型参数的具体类型：

typescript

function identity<T>(value: T): T {

   return value;}

let result = identity("Hello, TypeScript!"); // result 的类型被推断为 string

1.4 核心优势总结

自动化类型推导：基于赋值、返回值和上下文自动推断类型，减少冗余代码

灵活的类型控制：支持类型断言，在必要时手动指导类型系统

泛型协同：与泛型结合，实现既灵活又类型安全的代码设计

二、类型守卫

类型守卫在运行时检查变量类型并缩小其类型范围，使 TypeScript 能够在特定代码块内提供更精确的类型推断和类型检查。

2.1 基本概念

类型守卫是收窄变量类型范围的技术手段，特别适用于处理联合类型，让开发者能够在不同类型分支中安全地调用相应方法或访问属性。

常见类型守卫包括：typeof、instanceof、in 操作符、自定义谓词函数、真值判断、switch-case 等。

2.2 typeof 类型守卫

使用 typeof 操作符基于变量的基础类型进行条件判断：

typescript

function printValue(value: string | number) {

   if (typeof value === 'string') {

       console.log(value.toUpperCase());    // 此分支中 value 被收窄为 string

   } else {

       console.log(value.toFixed(2));       // 此分支中 value 被收窄为 number

   }}

printValue('hello');    // 输出：HELLOprintValue(3.1415);     // 输出：3.14

2.3 instanceof 类型守卫

使用 instanceof 操作符检查对象是否为特定类的实例：

typescript

class Animal {

   move() { console.log('Animal is moving'); }}

class Dog extends Animal {

   bark() { console.log('Dog is barking'); }}

function performAction(animal: Animal) {

   if (animal instanceof Dog) {

       animal.bark();      // 此分支中 animal 被收窄为 Dog 类型

   } else {

       animal.move();      // 此分支中 animal 保持为 Animal 类型

   }}

2.4 in 操作符类型守卫

使用 in 操作符通过属性存在性判断对象的具体类型：

typescript

interface Circle {

   kind: 'circle';

   radius: number;}

interface Rectangle {

   kind: 'rectangle';

   width: number;

   height: number;}

type Shape = Circle | Rectangle;

function printArea(shape: Shape) {

   if ('radius' in shape) {

       console.log(Math.PI * shape.radius ** 2);    // 此分支中 shape 被收窄为 Circle

   } else {

       console.log(shape.width * shape.height);     // 此分支中 shape 被收窄为 Rectangle

   }}

2.5 自定义类型谓词函数

通过返回类型谓词的函数实现自定义类型判断逻辑：

typescript

interface Bird {

   fly(): void;}

interface Fish {

   swim(): void;}

function isBird(animal: Bird | Fish): animal is Bird {

   return (animal as Bird).fly !== undefined;}

function handleAnimal(animal: Bird | Fish) {

   if (isBird(animal)) {

       animal.fly();    // 此分支中 animal 被收窄为 Bird

   } else {

       animal.swim();   // 此分支中 animal 被收窄为 Fish

   }}

2.6 控制流类型守卫

TypeScript 在执行 if、switch 等控制流语句后，会根据条件表达式自动收窄变量类型：

typescript

type Fruit = 'apple' | 'banana' | 'orange';

function getFruitColor(fruit: Fruit) {

   let color: string;

   switch (fruit) {

       case 'apple':

           color = 'red';      // fruit 被收窄为 'apple'

           break;

       case 'banana':

           color = 'yellow';   // fruit 被收窄为 'banana'

           break;

       default:

           color = 'orange';   // fruit 被收窄为 'orange'

   }

   return color;}

2.7 真值类型守卫

当条件表达式结果为真值时，TypeScript 会自动将变量类型收窄为非空类型：

typescript

function processValue(value: string | null) {

   if (value) {

       console.log(value.toUpperCase());  // 此分支中 value 被收窄为 string

   } else {

       console.log('Value is null or empty');

   }}

2.8 核心价值总结

安全类型区分：通过运行时检查，安全地区分联合类型中的不同成员

精准类型收窄：利用多种技术手段实现精确的类型范围控制

提升代码质量：增强类型安全性与可维护性，预防运行时错误

三、综合对比

TypeScript 的类型推断与类型守卫机制共同构建了强大的静态类型系统，既保证了 JavaScript 的灵活性，又提供了坚实的类型安全保障，是现代前端开发中不可或缺的重要特性。