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

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

5. 什么是类型注解？为什么需要使用类型注解？

类型注解是在 TypeScript 中用于指定变量、函数、类、接口等元素的类型的一种方式。它们是通过在代码中添加额外的类型信息来增强类型系统的功能。

使用类型注解的主要原因是为了提供更好的类型安全性和开发便利性。通过使用类型注解，您可以在代码中明确地指定变量、函数、类、接口等元素的类型，从而使编译器能够在编译过程中检查类型错误，并在运行时避免潜在的错误。

以下是使用类型注解的一些优点：

1. 类型安全性：类型注解确保了代码中变量和函数的类型是正确的，从而避免了潜在的类型错误和运行时错误。
2. 提高代码可读性：通过声明变量和函数的类型，您可以更好地理解代码的意图和功能，从而提高代码的可读性。
3. 自动补全和代码提示：由于类型系统提供了类型信息，因此开发工具可以提供更好的自动补全和代码提示功能，帮助您更快地编写代码。
4. 更好的代码重构：在大型项目中，随着需求的变化，您可能需要对代码进行重构。类型系统可以帮助您更轻松地进行代码重构，因为它确保了代码的正确性和可维护性。
5. 更好的团队协作：在团队开发中，使用类型系统可以帮助团队成员更好地理解彼此的代码，从而提高团队协作效率。

总之，类型注解是 TypeScript 中非常重要的一个概念，它们可以提供更好的类型安全性和开发便利性，有助于提高代码的可读性、可维护性和可扩展性。

6. 如何使用 interface 声明一个接口？

在 TypeScript 中，您可以使用interface关键字声明一个接口。接口是一种契约，它定义了一个对象或类的形状（structure），即对象或类必须具有的属性和方法。

下面是一个使用interface声明接口的示例：

interface Person {
    name: string;
    age: number;
    sayHello: () => void;
}

在上述示例中，我们声明了一个名为Person的接口。该接口定义了一个名为name的字符串类型属性、一个名为age的数字类型属性和一个名为sayHello的方法，该方法没有返回值且没有参数。

您可以使用接口来定义类或对象的形状，并在其他类或对象中实现该接口。例如：

class Employee implements Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

在上述示例中，我们定义了一个名为Employee的类，它实现了Person接口。该类必须具有与接口定义相同的属性和方法，否则会触发类型错误。

您还可以使用接口来定义函数的形状。例如：

interfaceMathFunction {
    (x: number, y: number): number;
}
function add(x: number, y: number): number {
    return x + y;
}
function subtract(x: number, y: number): number {
    return x - y;
}

const mathFunctions: MathFunction[] = [add, subtract];

在上述示例中，我们声明了一个名为MathFunction的接口，它定义了一个接受两个数字参数并返回一个数字的函数。然后，我们定义了两个名为add和subtract的函数，它们实现了MathFunction接口。最后，我们创建了一个名为mathFunctions的数组，其中包含了add和subtract函数，因为它们都实现了MathFunction接口。

总之，接口是 TypeScript 中用于定义对象或类的形状、函数的形状以及其他类型的一种契约。通过使用接口，您可以确保代码中的对象、类或函数具有正确的形状，从而提高代码的可读性、可维护性和可扩展性。

7. 什么是类？如何创建一个类？

在 TypeScript 中，类是一种用于创建对象的模板或蓝图。类定义了对象的属性和方法，以及对象的行为和功能。

要创建一个类，您可以使用class关键字，并在花括号中定义类的成员。类的成员可以包括属性、方法和构造函数。

下面是一个创建类的示例：

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

在上述示例中，我们创建了一个名为Person的类。该类具有两个属性name和age，一个构造函数constructor，以及一个名为sayHello的方法。

构造函数constructor用于初始化类的实例。在构造函数中，我们接受两个参数name和age，并将它们分别赋给类的属性。

sayHello方法用于输出一条问候语，其中包含类的实例的名称。

您可以通过创建类的实例来使用类。例如：

const person = new Person("Alice", 25);
person.sayHello();  // 输出: Hello, my name is Alice

在上述示例中，我们创建了一个名为person的Person类的实例，并将其名称设置为"Alice"，年龄设置为 25。然后，我们调用了person实例的sayHello方法，输出了一条问候语，其中包含实例的名称。

8. 如何使用类的继承和多态？

在 TypeScript 中，类的继承是通过扩展现有类来创建新类的一种方式。通过继承，您可以在新类中重用现有类的属性和方法，并添加新的属性和方法。

下面是一个使用类的继承的示例：

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Employee extends Person {
    department: string;

    constructor(name: string, age: number, department: string) {
        super(name, age);
        this.department = department;
    }

    sayGoodbye() {
        console.log(`Goodbye, my name is ${this.name} and I work in ${this.department}`);
    }
}

在上述示例中，我们创建了一个名为Person的类和一个名为Employee的类。Employee类扩展了Person类，并添加了一个名为department的新属性和一个名为sayGoodbye的新方法。

在Employee类的构造函数中，我们调用了Person类的构造函数，并传递了实例的名称和年龄作为参数。这确保了Employee类的实例具有与Person类的实例相同的属性和方法。

多态是指在不同的上下文中使用相同的方法名，但根据对象的实际类型来执行不同的操作。在 TypeScript 中，您可以通过使用函数的类型注解和接口来实现多态。

下面是一个使用多态的示例：

interface Shape {
    area: number;
}

class Rectangle implements Shape {
    width: number;
    height: number;

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }

    get area() {
        return this.width * this.height;
    }
}

class Circle implements Shape {
    radius: number;

    constructor(radius: number) {
        this.radius = radius;
    }

    get area() {
        return Math.PI * this.radius * this.radius;
    }
}

function calculateArea(shape: Shape) {
    return shape.area;
}

const rectangle = new Rectangle(5, 10);
const circle = new Circle(5);

console.log(calculateArea(rectangle));  // 输出: 50
console.log(calculateArea(circle));  // 输出: 78.53981633974483

在上述示例中，我们创建了两个类Rectangle和Circle，它们都实现了Shape接口。Shape接口定义了一个名为area的属性，用于计算形状的面积。

calculateArea函数接受一个Shape类型的参数，并返回该形状的面积。由于Rectangle和Circle类都实现了Shape接口，因此我们可以将它们作为参数传递给calculateArea函数，并获得正确的结果。

这就是多态的体现，因为calculateArea函数可以根据传递给它的实际类型来执行不同的操作，而不需要关心对象的具体实现细节。