互联网大厂200道高频Typescript面试题

Typescript篇

1. 什么是 TypeScript？与 JavaScript 的区别是什么？

答案解析
TypeScript 是 JavaScript 的超集，由微软开发，增加了静态类型系统和面向对象编程特性，最终编译为纯 JavaScript。
区别：

• 类型系统：TypeScript 有静态类型检查，JavaScript 无。
• 编译：TypeScript 需编译为 JavaScript 执行。
• 特性：TypeScript 支持接口、泛型等高级功能。

代码示例：

// TypeScript
let name: string = "Alice"; // 类型声明
// name = 42; // 错误：类型不匹配

// JavaScript
let name = "Alice"; // 无类型
name = 42; // 合法

应用场景：大型项目中，TypeScript 提升代码可维护性。

---

2. TypeScript 的优点和缺点是什么？

答案解析
优点：

• 静态类型检查减少运行时错误。
• 更好的 IDE 支持（自动补全、跳转）。
• 增强代码可读性和可维护性。

缺点：

• 学习曲线较陡。
• 需要编译步骤，增加构建时间。
• 小型项目可能显得繁琐。

代码示例：

function add(a: number, b: number): number {
   
   
  return a + b;
}
// add("1", "2"); // 错误：参数类型不匹配

应用场景：团队协作、大型应用开发。

---

3. TypeScript 中的基本类型有哪些？

答案解析
TypeScript 包含以下基本类型：

• number、string、boolean、null、undefined。
• symbol（ES6 引入）、bigint（大整数）。
• any（任意类型）、void（无返回值）、never（永不返回）。

代码示例：

let num: number = 42;
let str: string = "hello";
let bool: boolean = true;
let sym: symbol = Symbol("id");
let big: bigint = 100n;
let nothing: void = undefined;
let impossible: never; // 无赋值

解析：

• any 关闭类型检查，谨慎使用。
• never 用于抛错或死循环。

---

4. 什么是 any 类型？何时使用？

答案解析
any 表示任意类型，关闭类型检查。
使用场景：

• 迁移旧 JavaScript 代码。
• 第三方库无类型定义。
• 动态数据类型未知。

代码示例：

let value: any = 42;
value = "hello"; // 合法
value = [1, 2, 3]; // 合法

解析：

• 滥用 any 会削弱 TypeScript 优势。

---

5. void、undefined 和 null 的区别是什么？

答案解析：

• void：表示函数无返回值。
• undefined：变量声明但未赋值。
• null：主动赋值的空值。

代码示例：

function log(): void {
   
   
  console.log("No return");
}

let u: undefined = undefined;
let n: null = null;

解析：

• void 多用于函数返回类型。

---

6. 什么是 TypeScript 的类型推断？

答案解析
TypeScript 在未显式声明类型时，会根据赋值推断类型。
作用：减少冗余代码。

代码示例：

let num = 42; // 推断为 number
// num = "hello"; // 错误

const str = "hello"; // 推断为 "hello"（字面量类型）

解析：

• 推断基于初始值，const 推断更严格。

---

7. TypeScript 中的 interface 和 type 有什么区别？

答案解析：

• interface：定义对象结构，可扩展、可合并。
• type：类型别名，功能更广，可定义联合类型等。

代码示例：

interface User {
   
   
  name: string;
}
interface User {
   
   
  age: number; // 合并
}

type UserType = {
   
   
  name: string;
} & {
   
    age: number }; // 交集

解析：

• interface 适合面向对象，type 更灵活。

---

8. 如何在 TypeScript 中定义函数类型？

答案解析
函数类型可通过参数和返回值类型定义。

代码示例：

// 函数声明
function add(a: number, b: number): number {
   
   
  return a + b;
}

// 函数类型
type AddFn = (a: number, b: number) => number;
const addFn: AddFn = (x, y) => x + y;

解析：

• 可使用 interface 或箭头函数语法。

---

9. 什么是 TypeScript 的联合类型？

答案解析
联合类型（|）表示变量可为多种类型之一。

代码示例：

let value: string | number;
value = "hello"; // 合法
value = 42; // 合法
// value = true; // 错误

解析：

• 常用于不确定类型的场景。

---

10. TypeScript 中的交叉类型是什么？

答案解析
交叉类型（&）将多个类型合并为一个类型。

代码示例：

type A = {
   
    a: string };
type B = {
   
    b: number };
type C = A & B;

const obj: C = {
   
    a: "hello", b: 42 };

解析：

• 要求满足所有类型特性。

---

11. 什么是 TypeScript 的类型断言？

答案解析
类型断言（as 或 <>）告诉编译器相信开发者对类型的判断。

代码示例：

let value: any = "hello";
let strLength: number = (value as string).length;
// 或
let strLength2: number = (<string>value).length;

解析：

• 常用于 any 或未知类型转换。

---

12. TypeScript 中的 never 类型有什么用？

答案解析
never 表示永不发生的值，如抛错或死循环。

代码示例：

function fail(): never {
   
   
  throw new Error("Failed");
}

function infinite(): never {
   
   
  while (true) {
   
   }
}

解析：

• 用于类型推断和穷尽检查。

---

13. 如何在 TypeScript 中使用枚举（Enum）？

答案解析
枚举定义一组命名常量，常用于固定值集合。

代码示例：

enum Direction {
   
   
  Up = 1,
  Down,
  Left,
  Right,
}

let dir: Direction = Direction.Up; // 1

解析：

• 默认从 0 开始，可手动赋值。

---

14. TypeScript 中的泛型是什么？

答案解析
泛型允许在定义时不指定具体类型，使用时传入类型。
作用：提高代码复用性和类型安全。

代码示例：

function identity<T>(arg: T): T {
   
   
  return arg;
}

let num = identity<number>(42); // 类型 number
let str = identity<string>("hello"); // 类型 string

解析：

• T 是类型参数。

---

15. 如何约束泛型类型？

答案解析
使用 extends 限制泛型类型范围。

代码示例：

interface Lengthy {
   
   
  length: number;
}

function getLength<T extends Lengthy>(item: T): number {
   
   
  return item.length;
}

console.log(getLength("hello")); // 5
// getLength(42); // 错误

解析：

• 确保泛型具备特定属性。

---

16. TypeScript 中的 keyof 运算符有什么用？

答案解析
keyof 获取类型的所有键，生成联合类型。

代码示例：

interface User {
   
   
  name: string;
  age: number;
}

type UserKeys = keyof User; // "name" | "age"
let key: UserKeys = "name"; // 合法

解析：

• 常与泛型结合使用。

---

17. TypeScript 中的 in 运算符如何使用？

答案解析
in 用于映射类型，遍历键生成新类型。

代码示例：

type Optional<T> = {
   
   
  [K in keyof T]?: T[K];
};

interface User {
   
   
  name: string;
  age: number;
}

type OptionalUser = Optional<User>; // { name?: string; age?: number }

解析：

• 常用于类型转换。

---

18. 什么是 TypeScript 的条件类型？

答案解析
条件类型（T extends U ? X : Y）根据条件选择类型。

代码示例：

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

解析：

• 常用于类型推导。

---

19. TypeScript 中的 infer 关键字有什么作用？

答案解析
infer 在条件类型中推断类型变量。

代码示例：

type ReturnType<T> = T extends (...args: any) => infer R ? R : never;

function fn() {
   
    return "hello"; }
type FnReturn = ReturnType<typeof fn>; // "hello"

解析：

• 提取函数返回类型等。

---

20. 如何在 TypeScript 中定义可选参数？

答案解析
使用 ? 标记参数为可选。

代码示例：

function greet(name: string, age?: number): string {
   
   
  return age ? `${
     
     name}, ${
     
     age}` : name;
}

console.log(greet("Alice")); // "Alice"
console.log(greet("Bob", 25)); // "Bob, 25"

解析：

• 可选参数必须在必选参数后。

---

21. TypeScript 中的默认参数如何定义？

答案解析
使用 = 为参数设置默认值。

代码示例：

function greet(name: string = "Guest"): string {
   
   
  return `Hello, ${
     
     name}`;
}

console.log(greet()); // "Hello, Guest"
console.log(greet("Alice")); // "Hello, Alice"

解析：

• 默认参数隐式为可选。

---

22. TypeScript 中的接口继承如何实现？

答案解析
使用 extends 实现接口继承。

代码示例：

interface Person {
   
   
  name: string;
}

interface User extends Person {
   
   
  id: number;
}

const user: User = {
   
    name: "Alice", id: 1 };

解析：

• 支持多继承：interface A extends B, C。

---

23. TypeScript 中的类如何实现接口？

答案解析
使用 implements 让类遵循接口。

代码示例：

interface Printable {
   
   
  print(): void;
}

class Document implements Printable {
   
   
  print() {
   
   
    console.log("Printing...");
  }
}

解析：

• 类必须实现所有接口成员。

---

24. TypeScript 中的抽象类是什么？

答案解析
抽象类（abstract）不能实例化，定义通用行为。

代码示例：

abstract class Animal {
   
   
  abstract makeSound(): void;
  move() {
   
   
    console.log("Moving...");
  }
}

class Dog extends Animal {
   
   
  makeSound() {
   
   
    console.log("Woof!");
  }
}

解析：

• abstract 方法需子类实现。

---

25. TypeScript 中的 readonly 修饰符有什么用？

答案解析
readonly 使属性只读，不可修改。

代码示例：

interface Point {
   
   
  readonly x: number;
  readonly y: number;
}

const p: Point = {
   
    x: 10, y: 20 };
// p.x = 30; // 错误

解析：

• 仅在编译时检查。

---

26. TypeScript 中的 const 断言是什么？

答案解析
as const 将对象转为只读字面量类型。

代码示例：

let obj = {
   
    name: "Alice" } as const;
// obj.name = "Bob"; // 错误
type Name = typeof obj.name; // "Alice"

解析：

• 常用于类型收窄。

---

27. 如何在 TypeScript 中定义数组类型？

答案解析
数组类型可用 T[] 或 Array<T> 定义。

代码示例：

let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["a", "b"];

解析：

• 两种写法等价。

---

28. TypeScript 中的元组（Tuple）是什么？

答案解析
元组是固定长度和类型的数组。

代码示例：

let tuple: [string, number] = ["Alice", 25];
// tuple[0] = 42; // 错误

解析：

• 长度和类型严格约束。

---

29. 如何在 TypeScript 中定义对象类型？

答案解析
使用 interface 或 type 定义对象结构。

代码示例：

interface User {
   
   
  name: string;
  age: number;
}

const user: User = {
   
    name: "Alice", age: 25 };

解析：

• 可选属性用 ?。

---

30. TypeScript 中的 unknown 类型有什么用？

答案解析
unknown 是安全的 any，需类型检查后使用。

代码示例：

let value: unknown = 42;
// let len = value.length; // 错误
if (typeof value === "string") {
   
   
  let len = value.length; // 合法
}

解析：

• 比 any 更严格。

---

31. TypeScript 中的类型守卫是什么？

答案解析
类型守卫通过条件判断收窄类型。

代码示例：

function process(value: string | number) {
   
   
  if (typeof value === "string") {
   
   
    return value.toUpperCase(); // value 是 string
  }
  return value.toString(); // value 是 number
}

解析：

• 常用 typeof、instanceof。

---

32. 如何在 TypeScript 中使用自定义类型守卫？

答案解析
自定义类型守卫返回类型谓词（如 x is T）。

代码示例：

function isString(value: any): value is string {
   
   
  return typeof value === "string";
}

let val: unknown = "hello";
if (isString(val)) {
   
   
  console.log(val.toUpperCase()); // val 是 string
}

解析：

• 增强类型安全性。

---

33. TypeScript 中的 as 和类型断言的替代方法是什么？

答案解析
as 是强制断言，替代方法包括类型守卫和非空断言。

代码示例：

let value: unknown = "hello";
// 类型守卫
if (typeof value === "string") {
   
   
  console.log(value.length);
}
// 非空断言
let str: string | null = "test";
console.log(str!.length);

解析：

• 避免滥用 as。

---

34. TypeScript 中的 namespace 有什么用？

答案解析
namespace 组织代码，避免命名冲突（已不推荐）。

代码示例：

namespace Utils {
   
   
  export function log(msg: string) {
   
   
    console.log(msg);
  }
}

Utils.log("Hello");

解析：

• 推荐使用 ES 模块。

---

35. 如何在 TypeScript 中声明模块？

答案解析
使用 declare 为外部代码声明类型。

代码示例：

declare module "my-lib" {
   
   
  export function doSomething(): string;
}

import {
   
    doSomething } from "my-lib";
console.log(doSomething());

解析：

• 用于无类型定义的库。

---

36. TypeScript 中的 declare 关键字有什么作用？

答案解析
declare 声明变量、函数等类型，不生成代码。

代码示例：

declare let globalVar: string;
console.log(globalVar); // 假设已存在

解析：

• 用于全局变量声明。

---

37. TypeScript 中的类型兼容性如何判断？

答案解析
TypeScript 使用结构类型系统，比较属性兼容性。

代码示例：

interface A {
   
   
  x: number;
}
interface B {
   
   
  x: number;
  y: string