TypeScript类型收窄在if语句中的控制流分析

了解 TypeScript 类型收窄是编写类型安全代码的关键技能。类型收窄使 TypeScript 能够在代码执行过程中不断缩小变量的可能类型范围，从而提供更准确的类型推断和更强的类型安全保护。

基本类型收窄方法

1. 使用 typeof 操作符进行基本类型检查：

   function processValue(value: string | number) {
   if (typeof value === 'string') {
    // 在这里，TypeScript知道value一定是string类型
    value.toUpperCase();
   } else {
    // 在这里，TypeScript知道value一定是number类型
    value.toFixed(2);
   }
   }

2. 使用 instanceof 进行实例类型检查：

   
   class Dog {
   bark() { console.log('Woof!'); }
   }

class Cat {
meow() { console.log('Meow!'); }
}

function makeSound(pet: Dog | Cat) {
if (pet instanceof Dog) {
pet.bark();
} else {
pet.meow();
}
}

3. **检查** 字面量类型：
```typescript
function move(direction: 'up' | 'down' | 'left' | 'right') {
  if (direction === 'up') {
    // 处理向上移动逻辑
  } else if (direction === 'down') {
    // 处理向下移动逻辑
  }
  // ... 其他方向处理
}

4. 使用 in 操作符检查属性是否存在：

   
   interface Bird {
   fly(): void;
   }

interface Fish {
swim(): void;
}

function move(pet: Bird | Fish) {
if ('fly' in pet) {
pet.fly();
} else {
pet.swim();
}
}

## 控制流分析的工作原理

---

**理解** TypeScript 的控制流分析是如何工作的至关重要。TypeScript 会沿着代码执行路径分析类型，当遇到类型保护时，它会缩小变量的可能类型范围。

```typescript
function padLeft(padding: number | string, input: string): string {
  // 在这里，padding可能是number或string类型

  if (typeof padding === 'number') {
    // 在这里，padding被收窄为number类型
    return ' '.repeat(padding) + input;
  }

  // 在这里，padding被收窄为string类型
  return padding + input;
}

TypeScript 会跟踪变量的类型变化，并根据条件语句、赋值语句等自动更新类型信息。

自定义类型守卫

创建 自定义类型守卫函数，以处理更复杂的类型检查逻辑：

interface Cat {
  meow(): void;
}

interface Dog {
  bark(): void;
}

function isCat(pet: Cat | Dog): pet is Cat {
  return (pet as Cat).meow !== undefined;
}

function makeSound(pet: Cat | Dog) {
  if (isCat(pet)) {
    pet.meow();
  } else {
    pet.bark();
  }
}

注意函数签名中的 pet is Cat 语法，这是一种类型谓词，明确告诉 TypeScript 该函数返回的是类型断言。

联合类型的逐级收窄

处理 复杂的联合类型，通过多个条件逐步缩小类型范围：

type Result = 
  | { status: 'success'; data: string }
  | { status: 'error'; error: Error }
  | { status: 'pending' };

function handleResult(result: Result) {
  if (result.status === 'success') {
    // 此时TypeScript知道result是{status: 'success'; data: string}
    console.log(result.data);
  } else if (result.status === 'error') {
    // 此时TypeScript知道result是{status: 'error'; error: Error}
    console.log(result.error.message);
  } else {
    // 此时TypeScript知道result是{status: 'pending'}
    console.log('Waiting for result...');
  }
}

可为null类型的收窄

处理 可为null或undefined的值：

function processName(name: string | null | undefined) {
  if (name) {
    // 此时name被收窄为string类型
    console.log(`Name: ${name.toUpperCase()}`);
  } else {
    // 此时name为null或undefined
    console.log('No name provided');
  }
}

或者显式检查null或undefined：

function printName(name: string | null | undefined) {
  if (name === null) {
    // 处理null情况
    console.log('Name is null');
  } else if (name === undefined) {
    // 处理undefined情况
    console.log('Name is undefined');
  } else {
    // 处理string情况
    console.log(name.toUpperCase());
  }
}

类型断言与类型收窄

区分 类型断言和类型收窄的使用场景：

function formatDate(date: Date | string) {
  // 类型断言（假设我们知道date一定是Date类型）
  const d = date as Date;
  console.log(d.toLocaleDateString());

  // 类型收窄（更安全的方式）
  if (date instanceof Date) {
    console.log(date.toLocaleDateString());
  } else {
    console.log(new Date(date).toLocaleDateString());
  }
}

类型收窄更安全，因为它依赖于运行时的实际类型检查，而类型断言只是告诉 TypeScript 编译器"相信我，我知道我在做什么"。

高级技巧：使用条件表达式收窄

利用 逻辑与(&&)和逻辑或(||)操作符进行类型收窄：

interface Fish {
  swim(): void;
}

interface Bird {
  fly(): void;
}

type Pet = Fish | Bird;

function isSwimming(pet: Pet): pet is Fish {
  return 'swim' in pet;
}

function isFlying(pet: Pet): pet is Bird {
  return 'fly' in pet;
}

function move(pet: Pet) {
  // 使用逻辑或操作符
  if (isSwimming(pet) || isFlying(pet)) {
    // 这里Pet被收窄为Fish | Bird（实际上没有缩小范围）
    if (isSwimming(pet)) {
      pet.swim();
    } else {
      pet.fly();
    }
  }
}

实际应用场景

应用 类型收窄来解决实际开发中的问题：

1. 处理 API 响应数据：

interface ApiResponse<T> {
  data: T | null;
  status: number;
}

function handleResponse<T>(response: ApiResponse<T>) {
  if (response.status !== 200) {
    throw new Error('Request failed');
  }

  if (response.data === null) {
    // 处理数据为null的情况
    console.log('No data available');
  } else {
    // 此时response.data被收窄为T类型
    console.log('Data:', response.data);
  }
}

2. 验证 表单输入：

type FormField = {
  value: string | number | boolean;
  required: boolean;
  errors?: string[];
};

function validateField(field: FormField): FormField {
  if (field.required) {
    if (field.value === '' || field.value === null || field.value === undefined) {
      return {
        ...field,
        errors: ['This field is required']
      };
    }
  }

  // 根据字段类型进行特定验证
  if (typeof field.value === 'string') {
    if (field.value.length > 100) {
      return {
        ...field,
        errors: [...(field.errors || []), 'Value too long']
      };
    }
  }

  return field;
}

3. 管理 应用状态：

type AppState = 
  | { status: 'loading' }
  | { status: 'loaded'; data: string[] }
  | { status: 'error'; error: Error };

function handleState(state: AppState) {
  switch (state.status) {
    case 'loading':
      console.log('Loading data...');
      break;
    case 'loaded':
      console.log('Data loaded:', state.data);
      break;
    case 'error':
      console.log('Error loading data:', state.error.message);
      break;
  }
}

最佳实践

遵循 以下最佳实践，充分利用 TypeScript 的类型收窄功能：

1. 优先使用 类型守卫而不是类型断言，除非你完全确定类型。
2. 创建可重用的 类型守卫函数，而不是重复编写相同的类型检查。
3. 利用 控制流分析自然地收窄类型，而不是过度使用类型断言。
4. 保持 类型守卫函数纯粹，避免在类型守卫中执行副作用。
5. 考虑使用 联合类型和字面量类型来更精确地描述数据结构。

// 类型守卫函数示例
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

// 使用类型守卫的函数
function processValue(value: unknown) {
  if (isString(value)) {
    // TypeScript知道value是string类型
    console.log(value.toUpperCase());
  } else {
    // 处理非string类型
    console.log('Not a string');
  }
}

通过理解和应用 TypeScript 的类型收窄机制，你可以编写出更安全、更可靠、更易于维护的代码。类型收窄是 TypeScript 类型系统的强大功能之一，充分利用它可以显著提高代码质量和开发效率。