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

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

如何在 TypeScript 中定义一个类(Class)和一个接口(Interface)之间的关系？

在 TypeScript 中，类和接口是两种不同的类型定义方式。类是用于定义对象的具体实现，而接口则是用于定义对象的行为或契约。

要定义类和接口之间的关系，可以使用以下方式：

1. 定义接口：首先，定义一个接口来描述类应该实现的行为或属性。接口可以包含公共的方法签名和属性声明，但不包含实现细节。

interface IAnimal {
  name: string;
  age: number;
  speak(): string;
}

2. 定义类：然后，定义一个类来实现接口中定义的行为。类可以继承接口，并提供具体的实现细节。

class Cat implements IAnimal {
  name: string;
  age: number;

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

  speak(): string {
    return 'Meow!';
  }
}

在这个例子中，Cat 类实现了 IAnimal 接口中定义的 name、age 和 speak() 方法。类的实例可以被赋值给接口类型的变量，因为它满足接口的要求。

let cat: IAnimal = new Cat('Tom', 5);
console.log(cat.speak()); // 输出: 'Meow!'

通过这种方式，类和接口之间建立了一种契约关系。类必须实现接口中定义的所有方法和属性，以确保类型的安全性和一致性。

如何在 TypeScript 中处理可选属性和只读属性？

在 TypeScript 中，你可以使用以下方式来处理可选属性和只读属性：

1. 处理可选属性：可以使用 ? 操作符来表示可选属性。当属性被标记为可选时，它可以被赋值为 undefined。

interface IOptionalProps {
  name?: string;
  age?: number;
}

class OptionalPropsClass implements IOptionalProps {
  name?: string;
  age?: number;

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

let optionalProps: IOptionalProps = {};
console.log(optionalProps.name); // 输出: undefined
console.log(optionalProps.age); // 输出: undefined

在这个例子中，IOptionalProps 接口定义了可选的 name 和 age 属性。OptionalPropsClass 类实现了该接口，并提供了可选属性的初始值。在创建 optionalProps 对象时，可以不提供任何属性值，因此它们将被初始化为 undefined。

2. 处理只读属性：可以使用 readonly 关键字来表示只读属性。只读属性只能在构造函数中被赋值，不能在对象创建后被修改。

interface IReadonlyProps {
  readonly name: string;
  readonly age: number;
}

class ReadonlyPropsClass implements IReadonlyProps {
  readonly name: string;
  readonly age: number;

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

let readonlyProps: IReadonlyProps = new ReadonlyPropsClass('Alice', 25);
readonlyProps.name = 'Bob'; // 错误: 不能修改只读属性
readonlyProps.age = 30; // 错误: 不能修改只读属性

在这个例子中，IReadonlyProps 接口定义了只读的 name 和 age 属性。ReadonlyPropsClass 类实现了该接口，并在构造函数中对只读属性进行初始化。由于只读属性不能被修改，尝试修改它们将引发错误。

什么是模块(Module)？如何在 TypeScript 中使用模块？

在 TypeScript 中，模块是一种组织代码的方式，它将相关的代码组织在一起，并提供了代码的封装和复用。模块可以包含变量、函数、类等代码元素，并可以通过导出(Export)和导入(Import)机制在不同的模块之间共享代码。

要在 TypeScript 中使用模块，可以使用以下方式：

1. 定义模块：使用 module 关键字来定义模块。在模块内部，可以定义要导出的代码元素。

module MyModule {
  export const myVariable = 10;
  export function myFunction() {
    console.log('Hello, World!');
  }
  export class MyClass {
    constructor() {}
  }
}

在这个例子中，MyModule 是一个模块，它包含了一个常量 myVariable、一个函数 myFunction 和一个类 MyClass。这些代码元素被标记为可导出，以便在其他模块中使用。

2. 导出模块：使用 export 关键字来导出模块中的代码元素。可以使用 export 关键字单独导出每个代码元素，也可以使用 export * 关键字导出整个模块。

export * from './myModule';

在这个例子中，myModule 模块中的所有代码元素都被导出，可以在其他模块中使用。

3. 导入模块：使用 import 关键字来导入其他模块中的代码元素。可以使用 import 关键字单独导入每个代码元素，也可以使用 import * 关键字导入整个模块。

import { myVariable, myFunction } from './myModule';
import * as myModule from './myModule';

console.log(myVariable); // 输出: 10
myFunction(); // 输出: 'Hello, World!'

在这个例子中，myModule 模块中的 myVariable 和 myFunction 被导入到当前模块中，可以直接使用。import * as myModule 导入了整个 myModule 模块，可以使用模块对象来访问模块中的代码元素。

通过使用模块，你可以更好地组织和管理代码，提高代码的复用性和可维护性。

如何使用命名空间(Namespace)在 TypeScript 中组织代码？

在 TypeScript 中，命名空间(Namespace)是一种用于组织代码的方式，它将相关的代码元素组合在一起，并提供了一种命名和访问这些代码元素的方式。使用命名空间可以避免命名冲突，并提高代码的可读性和可维护性。

要在 TypeScript 中使用命名空间，可以使用 namespace 关键字来定义命名空间，并使用 dot 操作符来访问命名空间中的代码元素。

下面是一个使用命名空间的示例：

// 定义命名空间
namespace MyNamespace {
  export const myVariable = 10;
  export function myFunction() {
    console.log('Hello, World!');
  }
  export class MyClass {
    constructor() {}
  }
}

// 访问命名空间中的代码元素
console.log(MyNamespace.myVariable); // 输出: 10
MyNamespace.myFunction(); // 输出: 'Hello, World!'
let myObject = new MyNamespace.MyClass();

在这个例子中，MyNamespace 是一个命名空间，它包含了一个常量 myVariable、一个函数 myFunction 和一个类 MyClass。这些代码元素被标记为可导出，以便在其他模块中使用。

在其他模块中，可以使用 MyNamespace.myVariable、MyNamespace.myFunction() 和 new MyNamespace.MyClass() 来访问命名空间中的代码元素。

通过使用命名空间，可以更好地组织和管理代码，避免命名冲突，并提高代码的可读性和可维护性。