前端 TypeScript 面试题, 什么是 TypeScript 的接口?怎么定义接口?

Step 1

Q:: 什么是 TypeScript 的接口？

A:: TypeScript 的接口是一种结构化的类型，用于定义对象的形状（shape），它描述了对象的属性以及它们的类型。接口不会在编译后生成实际的 JavaScript 代码，它只是一个静态类型检查的工具。接口可以用于类型检查、定义类的结构以及作为函数的参数类型。

Step 2

Q:: 如何定义一个 TypeScript 的接口？

A:: 你可以使用 interface 关键字来定义一个接口。例如，定义一个用户的接口如下：

 
interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
}
 

在这个例子中，User 接口定义了一个具有 id、name 和可选 email 属性的对象结构。

Step 3

Q:: 接口和类型别名有什么区别？

A:: 接口和类型别名都可以用于定义对象的形状，但它们有一些不同。接口主要用于对象、类和函数签名的描述，而类型别名（type alias）可以表示任何类型，包括基本类型、联合类型、元组等。接口可以被扩展（extend），而类型别名则不能直接扩展，但可以通过交叉类型来实现相似的功能。

Step 4

Q:: 如何在 TypeScript 中实现接口继承？

A:: 你可以使用 extends 关键字来实现接口继承。例如，继承一个基础接口：

 
interface Person {
  name: string;
  age: number;
}
 
interface Employee extends Person {
  employeeId: number;
}
 

在这个例子中，Employee 接口继承了 Person 接口，因此 Employee 包含了 name 和 age 属性，同时还有一个 employeeId 属性。

Step 5

Q:: 接口能否用于类的约束？如何实现？

A:: 接口可以用于约束类的结构。一个类可以实现（implement）一个或多个接口，确保类中定义了接口中规定的属性和方法。实现接口的示例如下：

 
interface Logger {
  log(message: string): void;
}
 
class ConsoleLogger implements Logger {
  log(message: string): void {
    console.log(message);
  }
}
 

在这个例子中，ConsoleLogger 类实现了 Logger 接口，因此必须实现 log 方法。

Step 6

Q:: 接口能否定义函数类型？如何定义？

A:: 接口可以用于定义函数类型。你可以在接口中指定函数的参数和返回值类型。示例如下：

 
interface SearchFunction {
  (source: string, subString: string): boolean;
}
 
const mySearch: SearchFunction = function(src, sub) {
  return src.includes(sub);
};
 

在这个例子中，SearchFunction 接口定义了一个函数类型，该函数接收两个 string 类型的参数，并返回一个 boolean 类型的值。