TypeScript面试题集合【初级、中级、高级】

初级面试题

什么是TypeScript？

TypeScript是JavaScript的超集，由Microsoft开发，它添加了可选的静态类型和基于类的面向对象编程。TypeScript旨在解决JavaScript的某些局限性，比如缺乏静态类型和基于类的面向对象编程，同时保持了与JavaScript的兼容性。通过添加这些特性，TypeScript使得代码更易于维护和扩展，提供了更好的工具和编辑器支持，以及更强大的类型检查功能。

TypeScript中的基本类型有哪些？

TypeScript中的基本类型包括：布尔值（boolean）、数字（number）、字符串（string）、数组（Array）、元组（Tuple）、枚举（Enum）、任意值（any）、空值（void）、Null和Undefined、Never、以及对象（Object，包括普通对象、数组、函数等）。此外，TypeScript还支持类型别名（Type Aliases）和映射类型（Mapped Types）等高级类型。

TypeScript中如何定义一个变量？

在TypeScript中，可以使用let、const或var关键字来声明变量。let和const提供了块级作用域，而var提供的是函数作用域或全局作用域。例如：

Plain 复制代码

let myVariable: string = "Hello, World!";
const myConst: number = 42;
var myVar: boolean = false;

什么是接口（interface）？

接口是TypeScript中的一个核心特性，它用于定义一个对象的结构，包括对象应该具有的属性和方法。接口提供了一种强类型的方式来确保对象实现特定的属性或方法。通过接口，可以实现代码的解耦和重用，同时提高代码的可读性和可维护性。例如：

Plain 复制代码

interface Person {
    name: string;
    age?: number; // 可选属性
    greet(): void; // 方法签名
}
class Student implements Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    greet(): void {
        console.log("Hello, my name is " + this.name);
    }
}

TypeScript中的联合类型是什么？

联合类型（Union Types）是TypeScript中的一个特性，它允许一个变量有多种类型。联合类型通过竖线（|）分隔每个类型来定义。例如，一个变量可以是字符串或数字类型：

Plain 复制代码

let id: number | string;
id = 123; // 正确
id = "abc"; // 正确

什么是类型断言？

类型断言（Type Assertion）是TypeScript中的一个特性，它允许开发者显式地指定一个变量的类型。类型断言不会进行类型检查，而是告诉编译器将变量视为特定的类型。类型断言有两种形式：尖括号形式（<类型>值）和as形式（值 as 类型）。例如：

Plain 复制代码

let someValue: any = "Hello World";
let strLength1: number = (<string>someValue).length; // 尖括号形式
let strLength2: number = (someValue as string).length; // as形式

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

在TypeScript中，定义函数的返回类型很简单，只需在函数签名中的参数列表后面添加:和返回类型的名称即可。例如：

Plain 复制代码

function greet(name: string): string {
    return 
Hello, ${name}!
;
}

什么是元组（Tuple）？

元组是TypeScript中的一个特性，它允许表示一个已知元素数量和类型的数组。元组的每个元素都有固定的类型，并且这些类型不必相同。元组类型通过方括号[]和逗号,分隔的类型列表来定义。例如：

Plain 复制代码

let person: [string, number] = ["John Doe", 30];

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

枚举是TypeScript中的一个特性，它允许为一组相关的值定义一个名称。枚举类型使得代码更加清晰和易于理解。枚举成员具有一个隐式的数字值（从0开始递增），除非显式地指定了其他值。例如：

Plain 复制代码

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

复制代码

#### 如何使用TypeScript的模块？

Plain 复制代码

TypeScript模块提供了一种将代码封装到不同文件中以组织和重用代码的方法。模块可以导出和导入到其他文件中，从而更容易跨多个文件和项目重用代码。TypeScript支持多种模块规范，如CommonJS、AMD、ES6模块等。使用
import
和
export
关键字可以导入和导出模块的功能。例如：
// math.ts
export function add(a: number, b: number): number {
    return a + b;
}

// main.ts
import { add } from './math';
console.log(add(1, 2)); // 输出: 3

中级面试题

什么是泛型（Generics）？

泛型，从字面上理解，就是一般的、广泛的的意思。在TypeScript中，泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型的一种特性。泛型中的T就像一个占位符或者说一个变量，在使用的时候可以把定义的类型像参数一样传入，它可以原封不动地输出。泛型在成员之间提供有意义的约束，这些成员可以是函数参数、函数返回值、类的实例成员、类的方法等。

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

在TypeScript中，类的定义方式和ES6的class基本相同。以下是一个简单的例子：

Plain 复制代码

class Person {
    name: string = "word";
    getName(): void {
        console.log(this.name);
    }
}
const p1 = new Person();
p1.name = "hello";
p1.getName(); // 输出 "hello"

在这个例子中，我们定义了一个Person类，该类有一个name属性和一个getName()方法。我们可以实例化这个类并修改实例的属性值，然后调用getName()方法。

TypeScript中的接口如何继承？

在TypeScript中，接口（Interfaces）是支持单继承的，即一个接口可以继承自另一个接口。使用extends关键字来定义接口的继承关系。以下是一个单继承的示例：

Plain 复制代码

interface Animal {
    name: string;
    eat(): void;
}
interface Dog extends Animal {
    bark(): void;
}
let myDog: Dog = {
    name: 'Buddy',
    eat() { console.log('Dog is eating'); },
    bark() { console.log('Woof woof!'); }
};

在这个例子中，Dog接口继承了Animal接口，并添加了bark方法。任何实现Dog接口的对象都必须实现name、eat和bark这三个属性和方法。

什么是TypeScript中的类型推断？

当我们在TypeScript中声明变量但没有明确指定其类型时，TypeScript会尝试根据变量的值进行类型推断。这样可以帮助我们避免手动指定所有类型，使代码更简洁，同时也提供了更好的类型安全性。以下是一些关于类型推断的例子：

Plain 复制代码

let x = 10; // TypeScript 推断 x 为 number 类型
let y = "hello"; // TypeScript 推断 y 为 string 类型
let z = true; // TypeScript 推断 z 为 boolean 类型

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

TypeScript中的交叉类型（Intersection Types）是通过&符号将多个类型进行合并成一个类型。交叉类型允许我们将多个类型合并为一个类型，从而可以创建一个具有多个类型特性的对象。以下是一个例子：

Plain 复制代码

interface ClassA {
    name: string;
    age: number;
}
interface ClassB {
    name: string;
    phone: number;
}
type Class = ClassA & ClassB;
let info: Class = {
    name: 'zhangsan',
    age: 18,
    phone: 15738755555
};

需要注意的是，如果合并的接口类型中具有同名属性，且类型不同，则合并后类型为never。

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

映射类型（Mapped Types）是TypeScript中的一种高级类型，它允许我们基于一个已存在的类型来创建一个新的类型。映射类型通过遍历一个对象的所有属性，并对每个属性应用一个函数来生成新的属性，从而创建一个新的类型。以下是一个简单的例子：

Plain 复制代码

type Keys = 'a' | 'b' | 'c';
type MappedType = { [P in Keys]: boolean };

在这个例子中，我们定义了一个Keys类型，它是一个字符串字面量类型。然后，我们使用映射类型来创建一个新的类型MappedType，它包含Keys中每个键的布尔值属性。

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

条件类型（Conditional Types）是TypeScript中的一种类型操作，它允许我们根据一个条件表达式来选择两个类型中的一个。条件类型使用三元运算符的语法，以下是一个简单的例子：

Plain 复制代码

type Message<T> = T extends string ? string : number;
let msg1: Message<string> = "Hello"; // 正确，类型为string
let msg2: Message<number> = 123; // 正确，类型为number

在这个例子中，我们定义了一个条件类型Message，它根据泛型T的类型来选择string或number类型。

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

命名空间（Namespace）是TypeScript中用于组织代码的一种方式，它允许我们将相关的代码（变量、函数、类等）组织在一起，从而避免命名冲突。以下是一个简单的例子：

Plain 复制代码

namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string): boolean {
            return /^[A-Za-z]+$/.test(s);
        }
    }
}
// 使用命名空间中的类和接口
let validator = new Validation.LettersOnlyValidator();
console.log(validator.isAcceptable("Hello")); // 输出 true

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

模块和命名空间都是TypeScript中用于组织代码的方式，但它们有一些关键的区别：

模块是ES6引入的一个概念，它允许我们将代码分割成可重用的单元。模块之间的依赖关系是通过import和export语句来管理的。
命名空间是TypeScript特有的一个概念，它提供了一种将代码组织成层次结构的方式，以避免命名冲突。命名空间通过namespace关键字来定义。

模块和命名空间的主要区别在于它们的定义方式和使用场景。模块更适用于大型项目的代码组织，而命名空间则更适用于小型项目或库的内部代码组织。

复制代码

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

装饰器（Decorators）是TypeScript中的一个实验性特性，它允许我们修改类、方法或属性的行为。装饰器使用@expression这种语法来应用。以下是一个简单的例子：

Plain 复制代码

function log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(
Calling ${propertyName} with args: ${args}
);
        const result = originalMethod.apply(this, args);
        console.log(
${propertyName} returned: ${result}
);
        return result;
    };
    return descriptor;
}
class Calculator {
    @log
    add(a: number, b: number): number {
        return a + b;
    }
}
const calc = new Calculator();
calc.add(2, 3); // 输出调用信息和返回值

在这个例子中，我们定义了一个log装饰器，它会在调用被装饰的方法之前和之后打印日志信息。然后，我们在Calculator类的add方法上应用了这个装饰器。

请注意，由于装饰器目前仍然是TypeScript的实验性特性，因此在使用时可能需要配置TypeScript编译器以支持该特性。

高级面试题

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

高级类型（Advanced Types）是TypeScript中为了增加语言的灵活性和表达能力而引入的一些特殊类型。这些高级类型允许开发者定义更具体、更复杂的类型，从而更好地描述数据和函数的行为。TypeScript中的高级类型包括但不限于：

**字面量****类型（**Literal Types）：字面量不仅可以表示值，还可以表示类型。例如，字符串字面量类型允许指定一个具体的字符串值作为类型。
联合类型（Union Types）：表示一个值可以是几种类型之一，使用"|"分隔每个类型。
交叉类型（Intersection Types）：将多个类型合并为一个类型，它包含了所有类型的成员。
索引类型：允许定义对象的索引签名，即对象可以有的属性和它们的类型。
条件类型：根据条件返回不同的类型，它们使用条件语句的结构，但使用类型语法。
类型推断（Type Inference）：TypeScript可以自动推断变量的类型，而无需显式声明。

此外，还有类型别名、映射类型、泛型等高级类型特性，这些特性使得TypeScript成为一种强大的静态类型系统，能够帮助编写更健壮、更易于维护的代码。

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

类型守卫（Type Guards）是TypeScript中的一种特殊表达式，它们可以在运行时检查一个值是否具有特定类型。类型守卫通常与typeof、instanceof等操作符结合使用，或者通过自定义函数来实现。以下是几种常见的类型守卫使用方式：

typeof****类型守卫：用于确定变量的类型，但功能有限，只能确定JavaScript能识别的类型（如Boolean、String、Number等）。
instanceof****类型守卫：用于检查一个值是否是给定构造函数或类的实例。这对于确定实例类型的类型很有用。
in****类型守卫：检查对象是否具有特定的属性，并使用该属性区分不同的类型。
自定义类型守卫：通过自己编写函数来创建自定义类型保护，可以检查的内容没有限制，但需要确保精度以避免错误。

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

反射（Reflection）是一种在运行时获取和操作类型及其成员的能力。在TypeScript中，可以使用反射来获取类的构造函数、属性、方法等信息，并进行动态的操作。例如，可以使用typeof来获取类的构造函数，使用Object.getOwnPropertyNames来获取类的属性和方法。反射是一种强大的工具，但也需要谨慎使用，以避免过度依赖反射导致代码可读性和维护性的下降。

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

TypeScript中的类型操纵技巧多种多样，包括但不限于以下几种：

类型别名（Type Aliases）：为类型起一个新名字，以便更简洁地引用它们。
条件类型：根据条件返回不同的类型，允许在类型级别进行条件判断。
映射类型：基于一个已存在的类型来创建新的类型，新的类型将具有与原类型相同的键，但每个键对应的类型由提供的函数来定义。
递归****类型别名：允许定义引用自身的类型，这在处理树状结构或嵌套数据时特别有用。
字符串文字插值类型：允许基于其他类型的动态创建字符串文本类型，这在处理事件系统或在整个代码库中创建一致的命名约定时特别有用。

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

依赖注入（Dependency Injection）是一种设计模式，用于实现控制反转（Inversion of Control），即类的依赖关系由外部容器来管理，而不是在类内部创建依赖对象。在TypeScript中实现依赖注入通常涉及以下几个步骤：

定义一个容器：用于管理对象的生命周期和依赖关系。
标记可被注入的类：通过某种机制（如装饰器或注解）标记哪些类可以被容器注入。
配置依赖关系：在容器中配置类的依赖关系。
获取实例：从容器中获取类的实例，容器会自动处理依赖注入。

在实际应用中，可以使用第三方库（如InversifyJS）来实现依赖注入，这些库提供了更强大和灵活的功能。

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

混入（Mixins）是一种将多个类的行为组合到一个类中的技术。在TypeScript中，可以通过使用类型别名、交叉类型、装饰器等技术来实现混入。以下是一个使用类型别名和交叉类型实现混入的简单示例：

Plain 复制代码

type Constructor<T> = new (...args: any[]) => T;
function Mixin<TBase extends Constructor<{}>, TMixin extends Constructor<{}>>(base: TBase, mixin: TMixin): Constructor<TBase & InstanceType<TMixin>> {
    return class extends base implements InstanceType<TMixin> {
        constructor(...args: any[]) {
            super(...args);
            Object.assign(this, new mixin(...(args as any)));
        }
    } as any;
}
class A {
    foo() {
        console.log('foo from A');
    }
}
class B {
    bar() {
        console.log('bar from B');
    }
}
const AB = Mixin(A, B);
const ab = new AB();
ab.foo(); // 输出: foo from A
ab.bar(); // 输出: bar from B

在这个示例中，Mixin函数接受两个构造函数作为参数，并返回一个新的构造函数。这个新的构造函数创建的实例将同时拥有两个原始类的行为。

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

类型保护（Type Protection）与类型守卫类似，都是用于在运行时检查一个值是否具有特定类型。类型保护通常通过自定义函数来实现，这些函数返回一个布尔值来表示检查是否成功。与类型守卫不同的是，类型保护更侧重于在函数内部对类型进行断言，而不是在条件语句中。以下是一个使用类型保护的示例：

Plain 复制代码

function isString(value: any): value is string {
    return typeof value === 'string';
}
function processValue(value: any) {
    if (isString(value)) {
        // 在这里，TypeScript知道value是string类型
        console.log(value.toUpperCase());
    } else {
        // 处理其他类型
        console.log(value);
    }
}

在这个示例中，isString函数是一个类型保护函数，它返回一个布尔值来表示给定的值是否是字符串类型。在processValue函数中，可以使用这个类型保护函数来检查值的类型，并在类型确定的情况下执行相应的操作。

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

TypeScript中的模块解析策略是指编译器如何查找和解析模块的位置。TypeScript支持多种模块解析策略，包括经典解析策略（Classic）和Node.js解析策略（Node）。

经典解析策略 ：在这种策略下，TypeScript编译器会按照一个相对简单的规则来解析模块。它会首先在当前文件所在目录下查找模块文件（如.ts、.tsx、.d.ts等），如果没有找到，则会在编译选项中的baseUrl指定的目录下查找，或者回退到全局模块查找。
Node.js解析策略 ：这是TypeScript默认的模块解析策略。它遵循Node.js的模块解析机制，包括查找node_modules目录、解析package.json中的main字段、查找index.js等默认文件等。此外，TypeScript还支持通过paths和baseUrl编译选项来自定义模块解析路径。

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

装饰器（Decorators）是TypeScript中的一个实验性特性，它允许你通过声明式的方式修改类和类成员的行为。装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问器、属性或参数上。装饰器使用@expression这种形式，expression必须求值为一个函数，它会在运行时被调用，被装饰的声明信息作为参数传入。

以下是一个使用装饰器的示例：

Plain 复制代码

function log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(
Calling ${propertyName} with args:
, args);
        const result = originalMethod.apply(this, args);
        console.log(
${propertyName} returned:
, result);
        return result;
    };
    return descriptor;
}
class Calculator {
    @log
    add(a: number, b: number): number {
        return a + b;
    }
}
const calc = new Calculator();
calc.add(2, 3); // 输出调用和返回信息

在这个示例中，log是一个装饰器函数，它会被附加到Calculator类的add方法上。当调用add方法时，装饰器函数会先执行，打印出调用信息和返回值信息。

复制代码

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

在TypeScript中处理异步编程主要依赖于JavaScript的异步特性，但TypeScript提供了更强大的类型检查和智能提示功能来增强异步代码的可读性和安全性。以下是几种在TypeScript中处理异步编程的主要方式：

回调函数**（Callbacks）**：虽然在现代JavaScript/TypeScript开发中，回调函数已经较少作为首选的异步处理方式，但它们仍然是理解异步编程的基础。回调函数是一个作为参数传递给另一个函数的函数，这个被传递的函数将在某个异步操作完成后被调用。

Plain 复制代码

function fetchData(callback: (data: string) => void) {
    setTimeout(() => {
        const data = "Fetched Data";
        callback(data);
    }, 1000);
}
fetchData((data) => {
    console.log(data);
});

在TypeScript中，你可以为回调函数指定参数和返回值的类型。

Promises：Promises是处理异步操作更现代、更优雅的方式。它们代表了一个异步操作的最终完成（或失败）及其结果值。

Plain 复制代码

function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // 模拟成功或失败的条件
            if (success) {
                resolve("Fetched Data");
            } else {
                reject(new Error("Failed to fetch data"));
            }
        }, 1000);
    });
}
fetchData()
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

在TypeScript中，你可以为Promise指定它解析（resolve）值的类型。

async/await：async/await是基于Promises的语法糖，它使得异步代码看起来和同步代码非常相似，从而更容易理解和维护。

Plain 复制代码

async function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // 模拟成功或失败的条件
            if (success) {
                resolve("Fetched Data");
            } else {
                reject(new Error("Failed to fetch data"));
            }
        }, 1000);
    });
}
async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
getData();

使用async关键字声明的函数总是返回一个Promise。在函数内部，你可以使用await关键字等待一个Promise完成，并获取其结果。await只能在async函数内部使用。