2026 年最常见的 40 道 TypeScript 面试题及答案

TypeScript 已从一个小众的 JavaScript 超集演变为现代 Web 开发的核心语言。

在我参与的 Web 应用项目中，亲眼见证了强类型与可维护性如何显著减少缺陷并提升跨团队协作效率。

TypeScript 提供了这一切，因此已成为现代开发的行业标准。

从微软（其创作者）到 Google、Airbnb 和 Netflix，许多组织都依赖 TypeScript 来驱动基于 React、Angular 和 Node.js 等框架构建的产品。

在我的工作中，经常能看到招聘信息将 TypeScript 熟练度列为核心要求，而非可选技能。

就我个人的使用体验而言，理解 TypeScript 的类型、接口以及高级特性，对准备技术面试的开发者来说至关重要。

基础 TypeScript 面试题

下面我们来看一些常见的 TypeScript 面试题，以及它们如何与代码安全和清晰度相关。

1. 为什么选择 TypeScript 而不是 JavaScript？

TypeScript 引入静态类型和编译期错误检查，帮助开发者及早发现问题，让代码库更加可预测。

这确保了更好的可维护性和可扩展性。

2. TypeScript 解决了哪些问题？

TypeScript 解决了 JavaScript 在类型安全、可扩展性和可读性方面的弱点。

强制清晰的类型定义可防止隐蔽的运行时错误，并使重构更安全。

3. 在 TypeScript 中使用静态类型的主要好处是什么？

静态类型提高代码可靠性、自动补全效果和开发效率。

它有助于尽早发现类型错误，并让 IDE 提供更强大的工具支持。

4. 什么是类型注解？为什么有用？

类型注解允许开发者显式声明变量类型。

这提升了代码可读性并减少运行时错误。

示例：

let username: string = "DataCamper";
let age: number = 25;
let isAdmin: boolean = true;技术支持

在上述代码中，编译器会确保每个变量只能被赋予正确的类型。

例如，如果您尝试将字符串赋值给 age，TypeScript 会抛出错误，帮助您尽早发现问题。

对函数参数、返回类型和 API 契约进行显式类型标注尤为重要，因为它能向其他开发者清晰传达预期。

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

TypeScript 可以根据赋值自动推断类型。

这意味着您不必总是显式声明类型，TypeScript 会替您推断。

示例：

let count = 10;  // inferred as number
count = "hello"; // Error: Type 'string' is not assignable to type 'number'技术支持

在此示例中，TypeScript 根据初始值推断 count 必须是 number，因此后续赋值为字符串会造成编译期错误。

类型推断的最佳实践包括：

对导出的函数、类和接口使用显式类型，以提供清晰的契约。
当类型显而易见时，允许对局部变量进行推断。
除非万不得已，避免使用 any，因为它会绕过 TypeScript 的安全特性。

6. TypeScript 如何处理数组、元组和枚举？

TypeScript 允许开发者对数组、元组和枚举施加严格类型，从而提升清晰度并防止运行时错误。

这是一个带类型的数组示例：

let scores: number[] = [95, 80, 85];
scores.push(100); // OK
scores.push("A+"); // Error技术支持

带类型的数组可确保数组中的所有元素都遵循相同类型。

这是一个元组示例：

let user: [string, number] = ["Don", 25];技术支持

元组定义了定长数组，并为各位置指定具体类型。

它们适用于元素顺序与类型都很重要的结构化数据。

这是一个枚举示例：

enum Status {
  Active,
  Inactive,
  Pending,
}
let currentStatus: Status = Status.Active;技术支持

枚举提供具名常量，提升可读性并减少无效取值。

它们尤其适用于状态码、角色和配置选项。

7. any、unknown 和 never 类型有什么区别？

下表突出展示了 TypeScript 中 any、unknown 和 never 的关键差异。

Type	Description
any	完全禁用类型检查，允许任何值。
unknown	比 any 更安全，使用前必须先进行类型检查。
never	表示永远不会出现的值（例如总是抛出异常的函数）。

示例：

function fail(): never {
  throw new Error("Something went wrong");
}技术支持

建议优先使用 unknown 而非 any，以在保持灵活性的同时维持类型安全。

8. 在 TypeScript 中，null 与 undefined 有何区别？

二者的关键区别在于：

undefined 表示变量已声明但尚未赋值。
null 是一个明确的“空值”。

TypeScript 的 strictNullChecks 模式会将它们视为不同类型，从而防止意外的空值相关错误。

示例：

let a: string | null = null;
let b: string | undefined = undefined;技术支持

9. strict 编译选项有什么作用？

strict 标志会启用 TypeScript 的所有严格类型检查规则，例如：

strictNullChecks: 防止将 null 和 undefined 赋给变量，除非显式允许，有助于避免运行时空引用错误。
noImplicitAny: 要求所有变量具有显式或可推断的类型，防止 TypeScript 默认使用 any。
strictFunctionTypes: 对函数类型兼容性实施更严格规则，捕获参数与返回类型的不匹配。
strictBindCallApply: 确保 bind、call 和 apply 方法在使用时具备正确的函数参数类型。

它能确保更安全、更可预测的代码，并及早捕获微妙的错误。

TypeScript 类型系统面试题

下面我们来看看技术面试中常谈到的一些 TypeScript 类型系统关键概念。

10. 在 TypeScript 中，接口（interface）与类型别名（type alias）有何区别？

接口和类型别名都用于描述对象的形状，但用途略有不同。

接口可以通过 extends 扩展，非常适合分层的对象模型。

类型别名则可以表示联合、交叉、原始类型以及更复杂的复合类型。

示例：

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

type Employee = {
  name: string;
  department: string;
};技术支持

在定义对象形状或类契约时使用接口。

当需要灵活、可组合的类型（如联合或交叉）时使用类型别名。

11. 什么是联合类型与交叉类型？

联合类型允许变量拥有多种可能的类型；交叉类型将多个类型合并为一个。

联合类型示例：

let id: string | number;
id = ‘abc’; // OK
id = 123; // OK技术支持

交叉类型示例：

type Admin = { name: string };
type Permissions = { canEdit: boolean };
type AdminUser = Admin & Permissions;技术支持

联合类型常用于函数参数。

交叉类型常见于复杂对象组合。

12. 什么是类型收窄？类型保护如何工作？

类型收窄允许 TypeScript 基于控制流推断更具体的类型。

示例：

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed());
  }
}技术支持

类型保护通过在执行特定操作前验证类型，确保运行时操作安全。

您可以使用：

typeof：用于原始类型
instanceof：用于类
自定义类型保护：使用 param is Type 语法

类型保护可提高类型安全并减少运行时错误。

13. 什么是字面量类型与可判别联合？

字面量类型会将变量限制为一组预定义的具体取值。

示例：

let direction: "up" | "down" | "left" | "right";技术支持

可判别联合将字面量类型与对象变体结合，实现模式匹配。

示例：

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(shape: Shape): number {
  if (shape.kind === "circle") return Math.PI * shape.radius ** 2;
  return shape.side ** 2;
}技术支持

可判别联合允许对对象类型进行安全分支，并简化复杂应用中的逻辑。

14. TypeScript 中的 keyof、typeof 和 in 是什么？

这些操作符提供强大的类型层级反射能力。

Keyof：获取某个类型的属性名集合
typeof：获取某个值的类型
in：用于映射类型

示例：

type Keys = keyof User; // "name" | "age"
const person = { name: "Alice", age: 25 };
type PersonType = typeof person; // { name: string; age: number }技术支持

15. 什么是索引签名（index signatures）？

索引签名允许对象具有动态键。

示例：

interface Errors {
  [key: string]: string;
}

const messages: Errors = {
  email: "Invalid email",
  password: "Required"
};技术支持

常用于字典、类 Map 对象或动态配置模式。

16. 什么是结构化类型（structural typing）？

结构化类型（鸭子类型）意味着类型的兼容性基于其结构而非名称。

示例：

interface Point { x: number; y: number; }
let p = { x: 10, y: 20, z: 30 };
let q: Point = p; // OK because structural match技术支持

这让 TypeScript 更加灵活，也与 JavaScript 的编程模式契合。

17. 什么是声明合并（declaration merging）？

当 TypeScript 将多个同名声明合并时，就发生了声明合并。

下面是合并两个接口的示例：

interface User { name: string; }
interface User { age: number; }
const u: User = { name: "Rob", age: 30 }; // merged技术支持

在扩展第三方类型或增强库时很有用。

高级 TypeScript 面试题

以下是一些高级的 TypeScript 面试题及答案。

18. 什么是泛型（generics）？为什么有用？

泛型让您可以编写可复用、类型安全的函数和类，以适配多种数据类型。

泛型函数示例：

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

let output = identity<string>("DataCamp");
let outputNumber = identity<number>(42);技术支持

泛型类示例：

class Box<T> {
  content: T;
  constructor(content: T) {
    this.content = content;
  }
  getContent(): T {
    return this.content;
  }
}

let stringBox = new Box("Hello");
let numberBox = new Box(123);技术支持

最佳实践包括：

使用有意义的命名，如 <T>、<K, V> 或与领域相关的名称。
避免不必要的复杂度。
使用约束（extends）来限制可接受的类型。

泛型通过减少重复并强化一致的类型约束，提高了代码复用性。

19. 什么是 TypeScript 实用类型（utility types）？如何使用？

TypeScript 提供内置的实用类型，以高效地操作和变换既有类型。

示例：

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type PartialTodo = Partial<Todo>; // all properties optional
type RequiredTodo = Required<Todo>; // all properties required
type TodoPreview = Pick<Todo, "title" | "completed">; // select specific properties
type TodoWithoutDescription = Omit<Todo, "description">; // exclude properties技术支持

它们在处理 API 响应、表单或组件 props 时尤其有用。

建议尽可能利用实用类型来简化代码并强化类型一致性。

20. 什么是条件类型与映射类型？

条件类型允许您基于类型之间的关系，在类型层级中定义逻辑。

示例：

type IsString<T> = T extends string ? "yes" : "no";
type Result1 = IsString<string>; // "yes"
type Result2 = IsString<number>; // "no"技术支持

映射类型允许您一次性变换某个类型的所有属性。

示例：

type ReadonlyTodo = {
  readonly [K in keyof Todo]: Todo[K];
};

type OptionalTodo = {
  [K in keyof Todo]?: Todo[K];
};技术支持

关键差异包括：

keyof 提取某个类型的属性名。
typeof 获取变量或对象的类型。二者结合可实现动态类型操作与更安全的重构。

21. TypeScript 中 infer 关键字的用途是什么？

infer 允许您在条件类型中提取（推断）某个类型。

示例：

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

type R = ReturnType<() => number>; // number技术支持

常用于高级工具类型和泛型类型变换中。

22. 什么是模板字面量类型（template literal types）？

模板字面量类型通过插值来构造字符串类型。

示例：

type Event = ${string}Changed;
let e: Event = "nameChanged"; // OK技术支持

适用于：

事件命名
CSS 类名模式
API 路由模式

23. TypeScript 中的 satisfies 与 as const 是什么？

satisfies 确保某个值满足某种类型，但会保留其自身的字面量类型。

例如：

const config = {
  mode: "dark",
  version: 1
} satisfies { mode: string; version: number };技术支持

as const 会将所有属性设为只读并固定为字面量。

例如：

const directions = ["up", "down"] as const;
// type is readonly ["up", "down"]技术支持

satisfies 与 as const 在 React、配置对象和可判别联合中都很有用。

TypeScript 函数与对象面试题

本节将探讨与函数和对象相关的 TypeScript 面试题。

24. TypeScript 中的函数重载如何工作？

函数重载允许为不同的参数类型或模式定义多个函数签名。

示例：

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
  return a + b;
}

let sumNumbers = add(5, 10); // 15
let sumStrings = add("Hello, ", "World"); // "Hello, World"技术支持

最佳实践包括：

在实现前声明所有可能的重载。
使用类型保护来安全处理多种类型。

25. 什么是可选参数与剩余参数？

可选参数与剩余参数使函数更灵活、更具表达力。

示例：

function greet(name: string, age?: number) {
  console.log(Hello ${name}, age: ${age ?? "unknown"});
}

function sum(...numbers: number[]) {
  return numbers.reduce((a, b) => a + b, 0);
}技术支持

使用可选与剩余参数的关键规则：

使用 ? 标记可选参数。
使用 ... 表示剩余参数（可变参数）。

面试常考此类题，以评估您处理动态函数输入的能力。

26. readonly 与 const 有何区别？

const 作用于变量，而 readonly 作用于对象属性。

示例：

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "Bob" };
// user.id = 2; // Error: Cannot assign to 'id'

const { id, name } = user;
console.log(User ${name} has ID ${id});技术支持

使用 readonly 与 const 的最佳实践：

对于不应修改的对象（如 API 返回的数据）使用 readonly。
对于不应被重新赋值的变量使用 const。
结合解构与类型注解，写出更简洁、自说明的代码。

27. 什么是函数类型变型（协变与逆变）？

函数类型变型描述了 TypeScript 如何根据参数类型和返回类型判断一个函数类型能否安全替换另一个。

返回类型：协变（Covariant）

函数允许返回比调用方预期更具体的类型。例如：

type Animal = { name: string };
type Dog = Animal & { bark: () => void };

let f: () => Animal;
let g: () => Dog = () => ({ name: "Rex", bark() {} });

f = g; // OK: Dog is a subtype of Animal技术支持

参数类型：逆变（Contravariant）

函数允许接受比预期更通用的参数类型。例如：

type Dog = { name: string; bark: () => void };
type Animal = { name: string };

type HandleDog = (dog: Dog) => void;
type HandleAnimal = (animal: Animal) => void;

let handleDog: HandleDog = d => console.log(d.bark());
let handleAnimal: HandleAnimal = a => console.log(a.name);

// A function that accepts an Animal is more general,
// so it can stand in for one that accepts a Dog
handleDog = handleAnimal; // OK技术支持

28. 什么是 this 类型？

this 类型让方法可以返回与类本身相同的类型，适用于流式 API：

class Builder {
  setName(name: string): this {
    // ...
    return this;
  }
}
new Builder().setName("Test"); // chaining works技术支持

TypeScript 面向对象编程（OOP）面试题

以下问题涵盖技术面试中常见的 TypeScript OOP 关键概念。

29. TypeScript 如何支持面向对象编程？

TypeScript 支持类、继承与访问修饰符等 OOP 原则。

类定义了可复用的对象蓝图，继承允许一个类扩展另一个类以共享属性与行为。

示例：

class Animal {
  constructor(public name: string) {}

  move(distance: number) {
    console.log(${this.name} moved ${distance}m.);
  }
}

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

const dog = new Dog("Buddy");
dog.bark();       // Woof!
dog.move(10);     // Buddy moved 10m.技术支持

访问修饰符包括：

public：任何地方都可访问
protected：在类内部及其子类中可访问
private：仅在声明它的类内部可访问

建议使用访问修饰符来确保封装，防止内部状态或逻辑被意外访问或修改。

30. 抽象类与接口有何区别？

抽象类与接口都用于为对象或类定义契约，但用途不同。

抽象类可以包含共享实现与抽象方法。

接口只描述结构，不包含实现。

示例：

abstract class Shape {
  abstract getArea(): number; // must be implemented
}

class Circle extends Shape {
  constructor(public radius: number) {
    super();
  }

  getArea(): number {
    return Math.PI * this.radius ** 2;
  }
}技术支持

最佳实践包括：

当需要在相关类之间共享逻辑时，使用抽象类。
当需要灵活的类型契约和解耦的设计时，使用接口。

31. private、protected 与 public 修饰符的区别是什么？

下面比较了 TypeScript 的访问修饰符及其控制范围：

Modifier	Description
public	任何地方都可访问。
protected	在类内部及其子类中可访问。
private	仅在声明它的类内部可访问。

选择正确的访问修饰符有助于实现封装，确保内部状态与逻辑不会被意外访问或修改。

32. implements 与 extends 有何区别？

extends 继承行为和属性，而 implements 仅强制实现契约，不提供具体实现。

示例：

interface Logger { log(msg: string): void; }

class Base { foo() {} }

class MyClass extends Base implements Logger {
  log(msg: string) {}
}技术支持

33. TypeScript 中的 mixin（混入）如何工作？

混入允许复用多个类组件。

示例：

type Constructor<T = {}> = new (...args: any[]) => T;

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

class User {}
const TimestampedUser = Timestamped(User);技术支持

当需要多重继承模式时非常有用。

实战型 TypeScript 面试题

这些问题聚焦于面试中常见的 TypeScript 实际应用。

34. 您会如何将 JavaScript 项目迁移到 TypeScript？

将遗留的 JavaScript 代码库迁移到 TypeScript 应当循序渐进，以最小化风险与干扰。

推荐步骤：

将 .js 文件重命名为 .ts。
在 tsconfig.json 中启用 allowJs 与 checkJs。
逐步添加类型，从核心函数或模块开始。
临时使用 any，随后在完善代码库时替换为合适的类型。

用于渐进迁移的 tsconfig.json 示例：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "strict": true
  }
}技术支持

循序渐进的迁移能保证稳定性，并让团队无需大规模重写就能尽早受益于类型检查。

35. 如何在 React 中使用 TypeScript？

在 React 中使用 TypeScript 能为 props 与 state 提供类型安全，有助于防止运行时错误。

示例：

interface Props {
  title: string;
}

const Header: React.FC<Props> = ({ title }) => <h1>{title}</h1>;技术支持

定义 props 类型有助于 TypeScript 在编译期捕获缺失或类型不正确的 props，从而提升可靠性与开发效率。

36. 如何在 Node.js 中使用 TypeScript？

TypeScript 为 Node.js 应用添加了类型安全，包括 API 路由、配置与中间件等。

示例：

import express, { Request, Response } from "express";
const app = express();

app.get("/", (req: Request, res: Response) => res.send("Hello TypeScript"));技术支持

为 Request 与 Response 标注类型可确保参数使用正确，避免常见的运行时错误。

TypeScript 让 Node.js API 更易维护并能安全重构。

37. 如何处理缺少 TypeScript 定义的第三方 JavaScript 库？

有些库没有内置类型。这种情况下，您有两种主要选择：

选项一：安装社区维护的类型

npm install --save-dev @types/library-name技术支持

选项二：创建自定义声明文件

// custom.d.ts
declare module "legacy-library" {
  export function init(): void;
}技术支持

提示：

在编写自定义声明前，始终先检查 @types。
对于复杂的库，逐步添加类型以确保兼容性。

为第三方库提供合适的类型能提升信心并减少运行时错误。

TypeScript 配置与工具链面试题

本节涵盖技术面试中常谈的 TypeScript 配置与工具链要点。

38. 什么是 tsconfig.json？为什么重要？

tsconfig.json 是任意 TypeScript 项目的核心配置文件。

它定义编译器行为、包含的文件以及启用的特性。

示例：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}技术支持

关键设置包括：

target：输出的 JavaScript 版本
module：模块系统（CommonJS、ESNext 等）
strict：启用所有严格类型检查选项
outDir：编译后代码的输出目录
esModuleInterop：允许 CommonJS 模块导入

请务必启用严格模式，以便及早捕获潜在错误并提升可维护性。

39. 如何将 TypeScript 与 Webpack、Vite 或 Babel 等构建工具集成？

TypeScript 能与现代构建系统无缝集成。

常见配置包括：

Webpack：使用 ts-loader 进行即时编译
Vite：使用 vite-plugin-ts 实现快速构建
Babel：在以 JS 为主的环境中使用 @babel/preset-typescript

Vite 配置示例：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  build: {
    target: "es2020"
  }
});技术支持

请对齐编译器与打包器配置，启用增量构建，并使用 source map 以便调试。

40. 如何将 ESLint 与 TypeScript 配置以提升代码质量？

ESLint 有助于保持一致的编码规范并及早发现错误。

安装所需包：

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev技术支持

ESLint 配置示例：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}技术支持

提示包括：

避免全局禁用规则。
按项目细化规则，以平衡类型安全与灵活性。
将 ESLint 与 Prettier 搭配使用，保持代码风格一致、整洁。

拿下 TypeScript 面试的技巧

在面试前，您应同时强化技术能力与沟通能力。

以下是一些可行的方法：

学习路径：

复习官方文档中的高级类型、泛型与实用类型。
重视真实场景用例而非死记硬背。
练习阅读与理解类型错误，尤其是编译器提示常会出现在技术评测中。

练习项目：

构建小而完整的应用，展示实战能力：

使用已标注 props 与 state 类型的 React 待办清单。
带有类型化请求与响应对象的 Express REST API。
使用泛型与映射类型的工具库。

常见陷阱：

过度使用 any，会破坏 TypeScript 的类型安全。
忽视严格模式，导致运行时错误。
在类型定义中混淆 null 与 undefined。
忘记为第三方库安装或配置类型定义。

沟通技巧：

面试中，清晰阐述您在类型选择上的思考过程。
说明不同方案间的权衡（如 interface vs type alias、abstract class vs interface）。
展示 TypeScript 如何提升项目的可维护性与可扩展性。

结语

TypeScript 之所以能持续主导现代 Web 开发，是因为它强制使用清晰、一致的数据类型，从而帮助预防缺陷，并为大型项目提升可扩展性。

如需继续学习，请查看我们的完整课程目录，在不同技术方向上持续拓展您的知识。

作者

Don Kaluarachchi

LinkedIn Twitter

我是 Don——一名顾问、开发者、工程师、数字架构师和作者（基本上，我身兼数职 👨‍💻🎩）。我热衷于让数字平台顺畅运行，并不断寻找改进的方法。不写代码的时候，我会写写关于人工智能、数据科学以及各类技术主题的文章。

多年来，我参与过从构建与优化软件到部署 AI 模型、设计云端解决方案等各类项目。我拥有伦敦布鲁内尔大学的人工智能理学硕士学位和计算机科学理学学士学位。

常见问题

TypeScript 的用途是什么？

TypeScript 是 JavaScript 的类型化超集，编译为原生 JavaScript。它用于构建具有静态类型检查的可扩展、可维护的应用程序。

为什么 TypeScript 对 2026 年的开发者很重要？

随着 React、Angular 和 Node.js 等框架将 TypeScript 标准化，它现已成为大多数前端与全栈面试考察的关键技能。

如何在面试前练习 TypeScript？

构建小型项目（如 React 待办应用或 Node.js API），以加强理解并为实操类面试任务做准备。

应避免哪些常见的 TypeScript 面试错误？

过度使用“any”、忽视编译器警告、跳过严格模式，以及无法解释自己的类型选择，都是常见错误。

主题

AWS AI 代理