【面试系列】TypeScript高频面试题及详细解答

欢迎来到我的博客，很高兴能够在这里和您见面！欢迎订阅相关专栏：

⭐️ 全网最全IT互联网公司面试宝典：收集整理全网各大IT互联网公司技术、项目、HR面试真题.

⭐️ AIGC时代的创新与未来：详细讲解AIGC的概念、核心技术、应用领域等内容。

⭐️ 全流程数据技术实战指南：全面讲解从数据采集到数据可视化的整个过程，掌握构建现代化数据平台和数据仓库的核心技术和方法。

文章目录

• • 常见的初级面试题
  • • [1. 什么是TypeScript？](#1. 什么是TypeScript？)
    • [2. TypeScript中的基本类型有哪些？](#2. TypeScript中的基本类型有哪些？)
    • [3. TypeScript中如何定义一个变量？](#3. TypeScript中如何定义一个变量？)
    • [4. 什么是接口（interface）？](#4. 什么是接口（interface）？)
    • [5. TypeScript中的联合类型是什么？](#5. TypeScript中的联合类型是什么？)
    • [6. 什么是类型断言？](#6. 什么是类型断言？)
    • [7. 如何定义函数的返回类型？](#7. 如何定义函数的返回类型？)
    • [8. 什么是元组（Tuple）？](#8. 什么是元组（Tuple）？)
    • [9. TypeScript中的枚举（Enum）是什么？](#9. TypeScript中的枚举（Enum）是什么？)
    • [10. 如何使用TypeScript的模块？](#10. 如何使用TypeScript的模块？)
  • 常见的中级面试题
  • • [1. 什么是泛型（Generics）？](#1. 什么是泛型（Generics）？)
    • [2. 如何在TypeScript中使用类（Class）？](#2. 如何在TypeScript中使用类（Class）？)
    • [3. TypeScript中的接口如何继承？](#3. TypeScript中的接口如何继承？)
    • [4. 什么是TypeScript中的类型推断？](#4. 什么是TypeScript中的类型推断？)
    • [5. TypeScript中的交叉类型（Intersection Types）是什么？](#5. TypeScript中的交叉类型（Intersection Types）是什么？)
    • [6. TypeScript中的映射类型（Mapped Types）是什么？](#6. TypeScript中的映射类型（Mapped Types）是什么？)
    • [7. TypeScript中的条件类型（Conditional Types）是什么？](#7. TypeScript中的条件类型（Conditional Types）是什么？)
    • [8. 什么是TypeScript中的命名空间（Namespace）？](#8. 什么是TypeScript中的命名空间（Namespace）？)
    • [9. TypeScript中的模块与命名空间有何区别？](#9. TypeScript中的模块与命名空间有何区别？)
    • [10. 如何在TypeScript中定义和使用装饰器（Decorators）？](#10. 如何在TypeScript中定义和使用装饰器（Decorators）？)
  • 常见的高级面试题
  • • [1. 什么是高级类型（Advanced Types）？](#1. 什么是高级类型（Advanced Types）？)
    • [2. 如何使用TypeScript进行类型守卫（Type Guards）？](#2. 如何使用TypeScript进行类型守卫（Type Guards）？)
    • [3. TypeScript中的反射（Reflection）是什么？](#3. TypeScript中的反射（Reflection）是什么？)
    • [4. TypeScript中的类型操纵（Type Manipulation）有哪些技巧？](#4. TypeScript中的类型操纵（Type Manipulation）有哪些技巧？)
    • [5. 如何在TypeScript中实现依赖注入（Dependency Injection）？](#5. 如何在TypeScript中实现依赖注入（Dependency Injection）？)
    • [6. TypeScript中如何实现混入（Mixins）？](#6. TypeScript中如何实现混入（Mixins）？)
    • [7. 如何使用TypeScript中的类型保护（Type Protection）？](#7. 如何使用TypeScript中的类型保护（Type Protection）？)
    • [8. TypeScript中的模块解析策略（Module Resolution Strategies）是什么？](#8. TypeScript中的模块解析策略（Module Resolution Strategies）是什么？)
    • [9. 什么是TypeScript中的装饰器（Decorators）？](#9. 什么是TypeScript中的装饰器（Decorators）？)
    • [10. 如何在TypeScript中处理异步编程？](#10. 如何在TypeScript中处理异步编程？)
  • 面试中需要掌握的常考知识点

摘要：
本文汇总了TypeScript的高频面试题，涵盖初级、中级和高级问题，旨在帮助面试者深入理解TypeScript的核心概念和高级用法。初级问题主要涉及基础语法和简单类型，中级问题涉及类型推断、泛型和接口扩展等，高级问题则涵盖高级类型系统、装饰器和性能优化等。详细解答每个问题，并总结了面试中常见的知识点，帮助读者全面准备TypeScript面试。

常见的初级面试题

1. 什么是TypeScript？

TypeScript是JavaScript的超集，添加了静态类型和其他高级特性。它允许开发者在编写代码时提前发现错误，提高代码的可靠性和可维护性。TypeScript代码最终会被编译成纯JavaScript。

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

TypeScript中的基本类型包括：boolean、number、string、array、tuple、enum、any、void、null、undefined、never和object。这些类型帮助开发者明确变量的预期值，减少类型错误。

3. TypeScript中如何定义一个变量？

可以使用let、const或var关键字来定义变量，推荐使用let和const。例如：

let age: number = 30;
const name: string = "John";

4. 什么是接口（interface）？

接口用于定义对象的类型，包括属性和方法。它是一种契约，规定了实现该接口的对象必须具备的结构。例如：

interface Person {
    name: string;
    age: number;
}
let john: Person = { name: "John", age: 30 };

5. TypeScript中的联合类型是什么？

联合类型（Union Types）表示一个变量可以是多种类型之一。使用竖线（|）分隔。例如：

let value: string | number;
value = "Hello";
value = 42;

6. 什么是类型断言？

类型断言用于告诉编译器变量的实际类型，可以使用尖括号语法或as关键字。例如：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 或
let strLength: number = (someValue as string).length;

7. 如何定义函数的返回类型？

可以在函数声明时指定返回类型。例如：

function greet(name: string): string {
    return "Hello, " + name;
}

8. 什么是元组（Tuple）？

元组是一种特殊的数组，可以包含不同类型的元素，并且每个元素的类型是已知的。例如：

let tuple: [string, number];
tuple = ["hello", 10];

9. TypeScript中的枚举（Enum）是什么？

枚举是一组有名字的常量，可以是数字或字符串。例如：

enum Color { Red, Green, Blue }
let c: Color = Color.Green;

10. 如何使用TypeScript的模块？

模块用于将代码分隔成不同的文件，并通过export和import关键字来共享代码。例如：

// math.ts
export function add(a: number, b: number): number {
    return a + b;
}

// app.ts
import { add } from './math';
console.log(add(2, 3));

常见的中级面试题

1. 什么是泛型（Generics）？

泛型允许你创建可重用的组件，适用于多种数据类型。使用泛型参数（如<T>）来定义。例如：

function identity<T>(arg: T): T {
    return arg;
}
let output = identity<string>("myString");

2. 如何在TypeScript中使用类（Class）？

类是面向对象编程的基础，可以包含属性和方法。使用class关键字定义类。例如：

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        return `Hello, ${this.name}`;
    }
}

3. TypeScript中的接口如何继承？

接口可以继承其他接口，使用extends关键字。例如：

interface Named {
    name: string;
}
interface Person extends Named {
    age: number;
}
let john: Person = { name: "John", age: 30 };

4. 什么是TypeScript中的类型推断？

类型推断是指编译器根据变量的初始值自动推断其类型。例如：

let x = 3;  // x被推断为number类型

5. TypeScript中的交叉类型（Intersection Types）是什么？

交叉类型将多个类型合并为一个类型。例如：

interface Person {
    name: string;
}
interface Employee {
    employeeId: number;
}
type Staff = Person & Employee;
let staff: Staff = { name: "John", employeeId: 1234 };

6. TypeScript中的映射类型（Mapped Types）是什么？

映射类型基于旧类型创建新类型。例如：

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
interface Person {
    name: string;
    age: number;
}
let readonlyPerson: Readonly<Person> = { name: "John", age: 30 };
// readonlyPerson.name = "Jane"; // Error: name is readonly

7. TypeScript中的条件类型（Conditional Types）是什么？

条件类型根据条件返回不同的类型。例如：

type IsString<T> = T extends string ? true : false;
type Test1 = IsString<string>;  // true
type Test2 = IsString<number>;  // false

8. 什么是TypeScript中的命名空间（Namespace）？

命名空间用于组织代码，可以避免命名冲突。使用namespace关键字定义。例如：

namespace Validation {
    export function isValid(s: string): boolean {
        return s.length > 3;
    }
}
console.log(Validation.isValid("hello"));

9. TypeScript中的模块与命名空间有何区别？

模块是ES6规范的一部分，通过文件和import/export语法定义，具有文件级别的作用域。命名空间是TypeScript特有的，用于逻辑分组，具有全局作用域。

10. 如何在TypeScript中定义和使用装饰器（Decorators）？

装饰器是一个特殊的声明，可以附加到类声明、方法、访问器、属性或参数上。使用@符号定义。例如：

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}
@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
}

常见的高级面试题

1. 什么是高级类型（Advanced Types）？

高级类型包括交叉类型（Intersection Types）、联合类型（Union Types）、条件类型（Conditional Types）和映射类型（Mapped Types）。这些类型允许开发者定义更复杂的类型结构，从而提高类型系统的表达能力。例如，交叉类型可以将多个类型合并为一个类型，而条件类型可以根据条件返回不同的类型。

type UnionType = string | number;
type IntersectionType = { name: string } & { age: number };
type ConditionalType<T> = T extends string ? string : number;
type MappedType<T> = { [K in keyof T]: T[K] };

2. 如何使用TypeScript进行类型守卫（Type Guards）？

类型守卫是一些表达式，帮助编译器在特定的范围内推断类型。常见的类型守卫有typeof、instanceof和自定义类型守卫函数。例如：

function isString(value: any): value is string {
    return typeof value === "string";
}
function example(value: string | number) {
    if (isString(value)) {
        console.log(value.toUpperCase());
    } else {
        console.log(value.toFixed(2));
    }
}

3. TypeScript中的反射（Reflection）是什么？

反射是指程序在运行时检查和修改其结构和行为的能力。TypeScript中可以使用reflect-metadata库进行反射操作。例如：

import 'reflect-metadata';

function logType(target: any, key: string) {
    const t = Reflect.getMetadata("design:type", target, key);
    console.log(`${key} type: ${t.name}`);
}

class Demo {
    @logType
    public attr: string;
}

4. TypeScript中的类型操纵（Type Manipulation）有哪些技巧？

类型操纵是指通过类型别名、泛型、映射类型和条件类型来创建和变换类型。例如：

type Nullable<T> = T | null;
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
type Extract<T, U> = T extends U ? T : never;

5. 如何在TypeScript中实现依赖注入（Dependency Injection）？

依赖注入是一种设计模式，可以使用inversify库实现。例如：

import "reflect-metadata";
import { Container, injectable, inject } from "inversify";

@injectable()
class ServiceA {
    log() {
        console.log("ServiceA");
    }
}

@injectable()
class Client {
    constructor(@inject(ServiceA) private serviceA: ServiceA) {}

    run() {
        this.serviceA.log();
    }
}

const container = new Container();
container.bind(ServiceA).toSelf();
container.bind(Client).toSelf();

const client = container.get(Client);
client.run();

6. TypeScript中如何实现混入（Mixins）？

混入是一种复用类功能的方式，可以通过函数将多个类的功能合并到一个类中。例如：

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}

class Disposable {
    isDisposed: boolean = false;
    dispose() {
        this.isDisposed = true;
    }
}

class Activatable {
    isActive: boolean = false;
    activate() {
        this.isActive = true;
    }
}

class SmartObject implements Disposable, Activatable {
    isDisposed: boolean = false;
    dispose: () => void;
    isActive: boolean = false;
    activate: () => void;
}

applyMixins(SmartObject, [Disposable, Activatable]);

const smartObj = new SmartObject();
smartObj.activate();
smartObj.dispose();

7. 如何使用TypeScript中的类型保护（Type Protection）？

类型保护是通过特定语法或函数来保证变量在一定范围内具有特定类型。例如：

function isNumber(value: any): value is number {
    return typeof value === "number";
}

function example(value: string | number) {
    if (isNumber(value)) {
        console.log(value.toFixed(2));
    } else {
        console.log(value.toUpperCase());
    }
}

8. TypeScript中的模块解析策略（Module Resolution Strategies）是什么？

模块解析策略是指TypeScript在编译时如何查找模块。主要有两种策略：Classic和Node。Node策略遵循Node.js的模块解析逻辑，Classic策略适用于非Node.js环境。可以通过tsconfig.json配置。

{
    "compilerOptions": {
        "moduleResolution": "node"
    }
}

9. 什么是TypeScript中的装饰器（Decorators）？

装饰器是一种特殊的声明，可以附加到类声明、方法、访问器、属性或参数上，用于修改类的行为。装饰器使用@符号定义。例如：

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
}

10. 如何在TypeScript中处理异步编程？

可以使用async/await语法处理异步编程，这使得代码更简洁、更易读。例如：

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}
fetchData();

面试中需要掌握的常考知识点

1. 基础类型：了解TypeScript的基本数据类型及其使用。
2. 接口和类型别名：理解如何使用接口和类型别名定义复杂的类型结构。
3. 类和继承：熟悉TypeScript中的类、继承和访问修饰符。
4. 泛型：掌握泛型的定义和使用，能够创建灵活且类型安全的代码。
5. 模块和命名空间：了解模块系统和命名空间的区别及其使用场景。
6. 装饰器：理解装饰器的概念及其在类、方法和属性上的应用。
7. 异步编程 ：能够使用async/await处理异步操作。
8. 高级类型：熟悉交叉类型、联合类型、条件类型和映射类型等高级类型。
9. 类型守卫和类型保护：掌握如何使用类型守卫和类型保护确保类型安全。
10. 依赖注入：了解如何在TypeScript中实现依赖注入，提升代码的可维护性和可测试性。

这些知识点不仅是面试中常考的内容，也是日常开发中使用TypeScript时需要掌握的关键技能。通过系统地学习和掌握这些知识，可以更好地应对各种类型的面试问题。

💗💗💗 如果觉得这篇文对您有帮助，请给个点赞、关注、收藏吧，谢谢！💗💗💗