TypeScript面试题全解析

一、 TypeScript 基础核心考点

在当前的前端开发环境中，TypeScript面试题几乎成为了中高级前端开发的必考题。TypeScript 作为 JavaScript 的超集，不仅提供了静态类型检查，还引入了许多现代编程语言的特性，极大地提升了代码的可维护性和开发体验。对于求职者而言，理解 TS 的基础类型系统是迈向高阶的第一步。

1.1 基础类型与类型推断

TypeScript 提供了丰富的基础类型，包括 string, number, boolean, array, tuple, enum, any, unknown, void, null, undefined 以及 never。其中，类型推断机制是 TS 智能的核心体现。编译器会根据变量的赋值上下文自动推断其类型，从而减少显式声明的负担。

// 类型推断示例
let userName = 'Alice'; // TS 自动推断为 string
let userAge = 25;       // TS 自动推断为 number
// 显式类型声明
let isDeveloper: boolean = true;
let skills: string[] = ['HTML', 'CSS', 'TypeScript'];
// 元组：固定长度和类型的数组
let userTuple: [string, number] = ['Bob', 30];

1.2 Any 与 Unknown 的区别

在 TypeScript面试题 中，any 和 unknown 的区别是一个高频考点。虽然两者都允许赋值任意类型，但 any 会关闭类型检查，相当于退回到 JavaScript 的动态类型行为，存在安全隐患。而 unknown 是类型安全的，在使用 unknown 类型的值之前，必须先进行类型收窄（Type Narrowing）。

let notSure: any = 4;
notSure.toFixed(); // 不会报错，但运行可能出错

let notSure: unknown = 4;
// notSure.toFixed(); // 报错：Object is of type 'unknown'
if (typeof notSure === 'number') {
    notSure.toFixed(); // 安全调用
}

1.3 接口（Interface）与类型别名（Type Alias）

定义对象结构时，interface 和 type 都可以使用。在 TypeScript面试题 中，面试官通常关注两者的区别：interface 支持声明合并（Declaration Merging），更适合描述对象形状和类实现；而 type 更灵活，可以描述联合类型、元组、映射类型等复杂场景。

// Interface: 可合并
interface User {
    name: string;
    age: number;
}
interface User {
    email: string;
}
// 最终 User 包含 name, age, email
// Type: 不可合并，但支持联合类型
type ID = string | number;
type UserOrAdmin = User | Admin;

二、 高级类型与类型操作

掌握高级类型是区分初级与高级 TS 开发者的关键。这一部分涵盖了 联合类型、交叉类型、类型守卫 以及内置的工具类型。

2.1 类型守卫（Type Guards）

类型守卫用于在运行时确定变量的具体类型。常见的类型守卫包括 typeof、instanceof、in 运算符以及自定义的类型谓词（Type Predicate）。

// 自定义类型谓词
function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}
// 使用
if (isFish(pet)) {
    pet.swim(); // TS 知道 pet 是 Fish
} else {
    pet.fly();  // TS 知道 pet 是 Bird
}

2.2 条件类型与映射类型

条件类型允许根据条件选择两种类型之一，语法类似于三元运算符。映射类型则允许从旧类型创建新类型，常用于工具类型的实现。

// 条件类型
type IsString = T extends string ? true : false;
type A = IsString; // true
type B = IsString; // false
// 映射类型
type Readonly = {
    readonly [P in keyof T]: T[P];
};
type Partial = {
    [P in keyof T]?: T[P];
};

2.3 常用工具类型深度解析

在 TypeScript面试题 中，手写常用工具类型是常见的考题。以下是几个核心工具类型的解析：

三、 泛型（Generics）实战与应用

泛型是 TypeScript 中最强大也最难理解的特性之一。它允许我们在定义函数、接口或类时，不预先指定具体的类型，而是在使用时再指定。这在 TypeScript面试题 中占据了重要地位，因为泛型是实现代码复用和类型安全的关键。

3.1 泛型函数与接口

泛型函数允许参数和返回值之间存在类型关联，确保输入输出类型的一致性。

// 泛型函数：返回值的类型与输入参数一致
function identity<T>(arg: T): T {
    return arg;
}
// 泛型接口
interface GenericContainer<T> {
    value: T;
    getValue: () => T;
}
const stringContainer: GenericContainer<string> = {
    value: "hello",
    getValue: () => "hello"
};

3.2 泛型约束（Constraints）

有时我们希望泛型不仅是一个类型，还要满足特定的结构要求。这时可以使用 extends 关键字进行约束。

interface HasLength {
    length: number;
}
function logLength<T extends HasLength>(arg: T): void {
    console.log(arg.length); // 安全访问 length
}
logLength("hello"); // OK
logLength([1, 2, 3]); // OK
// logLength(123); // Error: number does not satisfy the constraint

3.3 泛型在 React 中的应用

在现代前端框架如 React 中，泛型被广泛使用。例如，React 的 useState 和 useReducer 都依赖泛型来推断状态类型。

import React, { useState } from 'react';
// 通过泛型推断 state 类型为 number
const [count, setCount] = useState<number>(0);
// 或者通过初始值推断
const [user, setUser] = useState({ name: 'Alice', age: 25 });
// user 的类型被推断为 { name: string; age: number }

四、 装饰器（Decorators）原理与应用

装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、属性或参数上，以修改类或其成员的行为。在 Angular 和 NestJS 等框架中，装饰器被广泛使用。虽然装饰器目前处于 Stage 3 阶段，但在 TypeScript面试题 中，理解其元数据反射机制是重要的加分项。

4.1 装饰器工厂

为了支持配置化，我们通常使用装饰器工厂，即返回装饰器函数的函数。

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`调用方法: ${propertyKey}`);
        console.log(`参数:`, args);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}
class UserService {
    @Log
    getUser(id: number) {
        return { id, name: 'Alice' };
    }
}

4.2 元数据反射 API

装饰器常与 reflect-metadata 库配合使用，用于在运行时读取和写入类的元数据。这在实现依赖注入（DI）和路由注册时非常有用。

五、 TypeScript 工程化实践

除了语言特性，TypeScript面试题 还经常考察开发者在项目工程化方面的经验，包括 tsconfig.json 配置、类型声明文件编写以及构建优化。

5.1 tsconfig.json 关键配置解析

合理的 tsconfig.json 配置能显著提升开发体验和构建效率。

5.2 类型声明文件（.d.ts）

当使用没有类型定义的 JavaScript 库时，需要编写 .d.ts 文件。这包括全局模块声明和局部模块声明。

// global.d.ts
declare module 'my-untyped-lib' {
    export function doSomething(): void;
    export const VERSION: string;
}
// 或者使用 declare global 扩展内置类型
declare global {
    interface Window {
        myCustomProperty: string;
    }
}

六、 网友还关心：高频面试题深度解答

根据搜索引擎数据和社区讨论，以下是求职者最关心的 TypeScript面试题 周边问题及其深度解答。

七、 学习路线与建议

为了在 TypeScript面试题 中表现出色，建议按照以下路径学习：

希望这份 TypeScript面试题 解析能帮助你更好地准备面试。记住，理解原理比死记硬背更重要。