TypeScript高频面试题

20. 问：什么是可辨识联合类型(Discriminated Unions)?

答：可辨识联合是TypeScript中一种特殊的联合类型，具有共同的单例类型属性—"标签"。这使得类型收窄更加容易：

typescript
 体验AI代码助手
 代码解读
复制代码
interface Square {
  kind: "square"; // 标签
  size: number;
}
interface Rectangle {
  kind: "rectangle"; // 标签
  width: number;
  height: number;
}
type Shape = Square | Rectangle;

function area(s: Shape) {
  switch (s.kind) {
    case "square": return s.size * s.size;
    case "rectangle": return s.width * s.height;
  }
}

21. 问：什么是infer关键字？如何使用？

答：infer关键字用在条件类型中推断类型变量：

typescript
 体验AI代码助手
 代码解读
复制代码
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

// 使用例子:
function foo() { return 123; }
type FooReturn = ReturnType<typeof foo>; // number

工程实践

22. 问：如何处理TypeScript中的模块路径别名？

答：在tsconfig.json中配置paths选项：

json
 体验AI代码助手
 代码解读
复制代码
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

要注意的是，这只处理了TypeScript编译时的路径解析，配合使用Webpack等构建工具的alias配置才能完全支持。

23. 问：TypeScript中的声明合并是什么？

答：声明合并是指编译器将多个同名声明合并为一个定义。常见于接口合并：

typescript
 体验AI代码助手
 代码解读
复制代码
interface Box {
  height: number;
}
interface Box {
  width: number;
}
// 两个接口会合并为:
// interface Box {
//   height: number;
//   width: number;
// }

24. 问：keyof、typeof和索引访问类型如何使用？

答：这些是TypeScript的操作符：

typescript
 体验AI代码助手
 代码解读
复制代码
interface Person {
  name: string;
  age: number;
}

// keyof获取对象的键
type PersonKeys = keyof Person; // "name" | "age"

// typeof获取变量的类型
const p = { name: "Tom", age: 25 };
type P = typeof p; // { name: string; age: number }

// 索引访问类型
type PersonName = Person["name"]; // string

高级类型操作

25. 问：如何实现ReturnType、Parameters等工具类型？

答：使用条件类型和infer关键字：

typescript
 体验AI代码助手
 代码解读
复制代码
// 获取函数返回类型
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

// 获取函数参数类型
type MyParameters<T> = T extends (...args: infer P) => any ? P : never;

function greet(name: string, age: number): string {
  return `Hello, ${name}! You are ${age} years old.`;
}

type GreetReturn = MyReturnType<typeof greet>; // string
type GreetParams = MyParameters<typeof greet>; // [string, number]

26. 问：什么是TypeScript中的命名空间(namespace)？它与模块有什么区别？

答：命名空间是一种将代码组织在一个命名容器内的方式：

• 命名空间(内部模块)：使用namespace关键字定义，主要用于组织代码
• 模块(外部模块)：使用ES模块系统的import/export语法，更适合现代应用

现代TypeScript开发推荐使用ES模块系统而非命名空间。

27. 问：如何在TypeScript中使用装饰器(Decorators)？

答：装饰器是实验性特性，需在tsconfig.json中启用：

json
 体验AI代码助手
 代码解读
复制代码
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

基本用法:

typescript
 体验AI代码助手
 代码解读
复制代码
function logger(target: any) {
  console.log(`Class name: ${target.name}`);
}

@logger
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

28. 问：TypeScript中的Mixins是什么？如何实现？

答：Mixins是一种代码复用模式，允许将多个类的功能合并：

typescript
 体验AI代码助手
 代码解读
复制代码
// 定义Mixin工厂
type Constructor<T = {}> = new (...args: any[]) => T;

function Timestamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}

function Activatable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    isActive = false;
    activate() { this.isActive = true; }
    deactivate() { this.isActive = false; }
  };
}

// 使用Mixins
class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

const TimestampedUser = Timestamped(User);
const TimestampedActivatableUser = Activatable(TimestampedUser);

const user = new TimestampedActivatableUser("John");
console.log(user.timestamp);
user.activate();

29. 问：解释一下TypeScript中的never类型的使用场景

答：never类型表示永不存在的值的类型，主要用于：

• 函数抛出异常或无法正常返回值的返回类型
• 作为联合类型中不可能出现的类型
• 用于完整性检查，比如确保switch语句涵盖所有可能情况

30. 问：如何在TypeScript中处理this类型？

答：可以使用this参数声明：

typescript
 体验AI代码助手
 代码解读
复制代码
interface Counter {
  count: number;
  increase(): this;
  reset(): void;
}

class SimpleCounter implements Counter {
  count = 0;
  
  increase() {
    this.count++;
    return this;
  }
  
  reset() {
    this.count = 0;
  }
}

const counter = new SimpleCounter().increase().increase(); // 链式调用