Typescript基础面试题 | 04.精选 ts 面试题

前端开发工程师（主业）、技术博主（副业）、已过CET6
阿珊和她的猫_CSDN个人主页
牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

13. 什么是装饰器？如何使用装饰器？

在 TypeScript 中，装饰器是一种特殊的语法，它允许您在不修改现有代码的情况下，动态地修改类、方法、属性和参数的行为。

装饰器的基本语法如下：

@decoratorName
class MyClass {
    // 类的成员
}

在上述语法中，@decoratorName是一个装饰器函数的名称，MyClass是一个类。

要使用装饰器，您需要定义一个装饰器函数，并在需要应用装饰器的地方使用@符号来调用它。装饰器函数可以接受一个或多个参数，并返回一个新的装饰器函数，该函数将被应用于目标类、方法、属性或参数。

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

function logDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]) {
        console.log(`Calling method: ${propertyKey}`);
        const result = originalMethod.apply(this, args);
        console.log(`Method result: ${result}`);
        return result;
    };

    return descriptor;
}

class MyClass {
    @logDecorator
    method1() {
        return "Hello, World!";
    }
}

在上述示例中，我们定义了一个名为logDecorator的装饰器函数，它接受三个参数：target、propertyKey和descriptor。

target参数表示被装饰的目标类或对象，propertyKey参数表示被装饰的目标方法或属性的名称，descriptor参数表示目标方法或属性的描述符，其中包含方法或属性的各种信息，如名称、类型、值等。

在装饰器函数内部，我们首先获取原始方法的引用，并将其赋值给originalMethod变量。然后，我们使用descriptor.value属性来修改目标方法的实现，并在方法执行前后打印相关信息。

最后，我们返回修改后的描述符，以便将装饰器应用于目标方法。

在类MyClass中，我们使用@logDecorator装饰器来应用装饰器函数到method1方法上。当调用method1方法时，它将输出调用方法的信息以及方法的返回值。

需要注意的是，装饰器是一种高级特性，在某些情况下可能会导致代码的可读性和可维护性下降。因此，在使用装饰器时，应该谨慎考虑，并确保代码的清晰和易于理解。

14. 如何使用类型断言？

在 TypeScript 中，类型断言是一种用于在运行时检查变量类型的机制。它允许您在代码中强制转换一个变量的类型，以确保它符合预期的类型。

类型断言的基本语法如下：

<T>(value: any): T;

在上述语法中，是一个类型参数，表示您希望将变量强制转换为的目标类型。value是您要进行类型断言的变量。

下面是一个使用类型断言的示例：

function multiply(a: number, b: number): number {
    if (typeof a === "number" && typeof b === "number") {
        return a * b;
    } else {
        throw new Error("Both arguments must be numbers.");
    }
}

// 调用函数并传递字符串作为参数
try {
    const result = multiply("5", "10");
} catch (error) {
    console.error(error.message);  // 输出: "Both arguments must be numbers."
}

// 使用类型断言来强制转换参数类型
const result = multiply<Number>("5", "10") as number;
console.log(result);  // 输出: 0

在上述示例中，我们定义了一个名为multiply的函数，它接受两个参数a和b，并返回它们的乘积。在函数内部，我们使用typeof操作符来检查参数的类型是否为数字。如果类型不正确，我们将抛出一个错误。

然后，我们调用multiply函数并传递字符串"5"和"10"作为参数。由于参数类型不正确，函数将抛出一个错误，我们使用catch块来捕获这个错误，并输出错误信息。

最后，我们使用类型断言来强制转换参数类型，并再次调用multiply函数。在类型断言中，我们将目标类型指定为Number，并将返回值强制转换为数字类型。由于参数类型已经被强制转换为数字类型，因此函数将返回它们的乘积 0。

需要注意的是，类型断言是一种运行时的类型检查机制，它可能会导致潜在的类型错误和运行时错误。因此，在使用类型断言时，应该谨慎考虑，并确保代码的可靠性和安全性。

15. 如何使用 intersection types？

在 TypeScript 中，交叉类型（Intersection Types）是一种用于表示多个类型的公共部分的类型。它允许您创建一个新的类型，该类型包含多个其他类型的所有成员。

交叉类型的基本语法如下：

type MyIntersectionType = Type1 & Type2 & Type3;

在上述语法中，MyIntersectionType是一个新的交叉类型，它包含了Type1、Type2和Type3这三个类型的所有成员。

下面是一个使用交叉类型的示例：

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

interface Employee {
    department: string;
}

type MyIntersectionType = Person & Employee;

const person: Person = {
    name: "John",
    age: 30,
};

const employee: Employee = {
    department: "Marketing",
};

const myObject: MyIntersectionType = {
    name: "John",
    age: 30,
    department: "Marketing",
};

console.log(person.name);  // 输出: John
console.log(employee.department);  // 输出: Marketing
console.log(myObject.name);  // 输出: John
console.log(myObject.age);  // 输出: 30
console.log(myObject.department);  // 输出: Marketing

在上述示例中，我们定义了两个接口Person和Employee，它们分别表示人的基本信息和员工的详细信息。然后，我们使用交叉类型Person & Employee创建了一个新的类型MyIntersectionType，它包含了Person和Employee这两个接口的所有成员。

最后，我们创建了三个对象person、employee和myObject，它们分别符合Person、Employee和MyIntersectionType这三个类型。由于MyIntersectionType包含了Person和Employee的所有成员，因此我们可以使用myObject来访问Person和Employee的所有成员。

需要注意的是，交叉类型的成员可能会存在冲突和歧义。如果两个类型中存在同名的成员，那么交叉类型中将只保留一个成员。在使用交叉类型时，应该确保不会出现成员冲突和歧义的情况。

16. 什么是枚举类型？如何使用枚举类型？

在 TypeScript 中，枚举类型（Enum Type）是一种用于表示一组固定值的类型。它允许您创建一个命名常量的集合，并将它们组织在一个类型中。

枚举类型的基本语法如下：

enum MyEnum {
    Value1,
    Value2,
    Value3,
}

在上述语法中，MyEnum是一个枚举类型的名称，Value1、Value2和Value3是该枚举类型的成员。

下面是一个使用枚举类型的示例：

enum Color {
    Red,
    Green,
    Blue,
}

const myColor: Color = Color.Red;

console.log(myColor);  // 输出: Red

在上述示例中，我们定义了一个名为Color的枚举类型，它包含了三个成员Red、Green和Blue。然后，我们使用Color.Red来初始化一个变量myColor，并将其赋值为Color枚举类型的成员Red。

枚举类型的成员可以被直接访问和使用，它们被视为常量。枚举类型的成员也可以被用于类型检查和类型推导，以确保代码的正确性和可读性。

需要注意的是，枚举类型的成员是按顺序排列的，并且可以通过它们的名称或索引来访问。默认情况下，枚举类型的成员从 0 开始索引。您也可以使用数字来初始化枚举类型的成员，例如Color[2]，这将将其赋值为Color.Blue。