如何正确处理TypeScript的unknown类型？Angular路由传值场景

TypeScript抛出TS2339错误是因为Location.getState()的返回类型是unknown——这是TypeScript的安全设计，它无法确定你传入的state结构具体是什么。不用类型断言的话，有以下几种更安全的处理方式：

1. 使用类型守卫（Type Guard） #

类型守卫会在运行时验证数据结构，同时让TypeScript在编译时识别出正确类型，比类型断言更可靠，能避免运行时因类型不匹配导致的错误。

import { Location } from '@angular/common';
import { OnInit } from '@angular/core';

interface LolState {
  lol: string;
}

// 定义类型守卫函数
function isLolState(state: unknown): state is LolState {
  return typeof state === 'object' && state !== null && 'lol' in state && typeof (state as LolState).lol === 'string';
}

export class MyComponent implements OnInit {
  constructor(private location: Location) { }

  ngOnInit(): void {
    const state = this.location.getState();
    if (isLolState(state)) {
      // TypeScript自动识别state为LolState类型，可安全访问lol
      const lol = state.lol;
      // 处理逻辑...
    } else {
      // 处理state不符合预期的情况，比如设置默认值
      const lol = 'default_value';
    }
  }
}

2. 可选链+空值合并（快速处理场景） #

如果只是想避免编译错误，同时兼容state可能不存在的情况，可以用可选链操作符?.和空值合并操作符??，虽不会严格定义类型，但能快速解决报错：

import { Location } from '@angular/common';
import { OnInit } from '@angular/core';

export class MyComponent implements OnInit {
  constructor(private location: Location) { }

  ngOnInit(): void {
    const lol = this.location.getState()?.lol ?? 'default_value';
    // 处理逻辑...
  }
}

这种方式简洁，但TypeScript仍会将lol推断为unknown | string，若需要严格类型约束，优先选择类型守卫。

3. 模块扩充（Module Augmentation） #

如果应用中多次使用同一结构的路由state，可通过TypeScript的模块扩充功能，给Location的getState()方法指定默认返回类型，无需重复处理：

// 在项目类型定义文件（如src/types/angular.d.ts）中添加以下代码
import { Location } from '@angular/common';

declare module '@angular/common' {
  interface Location {
    getState(): LolState | null;
  }
}

// 组件中直接使用
import { Location } from '@angular/common';
import { OnInit } from '@angular/core';

interface LolState {
  lol: string;
}

export class MyComponent implements OnInit {
  constructor(private location: Location) { }

  ngOnInit(): void {
    const state = this.location.getState();
    if (state) {
      const lol = state.lol;
      // 处理逻辑...
    }
  }
}

注意：需确保类型定义文件被TypeScript识别（在tsconfig.json的include数组中包含该文件）。

关于“类型断言不好”的补充 #

类型断言本身并非“不好”，但它是跳过TypeScript类型检查的操作——若断言类型与运行时实际类型不匹配，会引发隐藏错误。而上述方案（尤其是类型守卫）是在运行时验证类型，同时让TypeScript正确推断类型，既保证类型安全，又避免编译错误。

内容的提问来源于stack exchange，提问作者patrick