完整教程：TypeScript 面试题及详细答案 100题 （21-30）-- 接口（Interface）

news/2025/11/8 14:52:44/文章来源:https://www.cnblogs.com/yangykaifa/p/19202296

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，SQL，Linux… 。

前后端面试题-专栏总目录

在这里插入图片描述

文章目录

  • 一、本文面试题目录
      • 21. 接口的核心作用是什么？如何用接口定义对象的结构？
      • 22. 如何定义接口的可选属性、只读属性？举例说明。
      • 23. 接口如何描述函数类型？与直接定义函数类型有何区别？
      • 24. 什么是可索引接口？如何定义数字索引和字符串索引接口？
      • 25. 接口之间如何实现继承？一个接口可以继承多个接口吗？
      • 26. 接口与类的关系是什么？类如何实现接口？一个类可以实现多个接口吗？
      • 27. 什么是接口合并？哪些场景下会发生接口合并？
      • 28. 接口可以定义静态属性或方法吗？为什么？
      • 29. 如何用接口描述数组的“只读”特性？
      • 30. 接口与类型别名（Type Alias）在定义对象结构时的核心区别是什么？
  • 二、100道TypeScript面试题目录列表

一、本文面试题目录

21. 接口的核心作用是什么？如何用接口定义对象的结构？

用接口定义对象结构时，需声明对象应包含的属性名称、类型，以及可选的方法（仅需定义方法签名，无需实现）。

// 定义对象结构的接口
interface User {
name: string; // 必选属性
age: number;  // 必选属性
greet: () => string; // 方法签名
}
// 实现接口的对象
const user: User = {
name: "Alice",
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
// 不符合接口的对象会报错
const invalidUser: User = {
name: "Bob" // 报错：缺少age和greet
};

22. 如何定义接口的可选属性、只读属性？举例说明。

  • 答案：

    • 可选属性：在属性名后加?，表示该属性可存在或不存在。
    • 只读属性：在属性名前加readonly，表示该属性初始化后不可修改。

  • 示例代码：

interface Book {
readonly id: number; // 只读属性（初始化后不可改）
title: string;       // 必选属性
author: string;      // 必选属性
publisher?: string;  // 可选属性（可省略）
pages?: number;      // 可选属性
}
// 符合接口的对象
const book1: Book = {
id: 1001,
title: "TypeScript Guide",
author: "John Doe"
// publisher和pages可选，可省略
};
const book2: Book = {
id: 1002,
title: "JS Basics",
author: "Jane Smith",
publisher: "Tech Press",
pages: 300
};
// 错误示例
book1.id = 2000; // 报错：只读属性不可修改
book2.publisher = "New Press"; // 允许：可选属性可修改

23. 接口如何描述函数类型？与直接定义函数类型有何区别？

  • 答案：接口描述函数类型时，需定义一个函数签名（参数类型和返回值类型），格式为(参数: 类型) => 返回值类型。

区别：

  • 接口描述函数类型更具语义性，可复用（如作为参数或返回值类型）；

  • 直接定义函数类型（如type Func = (a: number) => number）更简洁，适合临时使用。

  • 示例代码：

// 用接口描述函数类型
interface MathOperation {
(a: number, b: number): number;
}
// 实现接口的函数
const add: MathOperation = (x, y) => x + y;
const multiply: MathOperation = (x, y) => x * y;
// 直接定义函数类型
type StringFormatter = (str: string) => string;
const toUpper: StringFormatter = (s) => s.toUpperCase();
// 接口的复用性
function calculate(operation: MathOperation, a: number, b: number): number {
return operation(a, b);
}
console.log(calculate(add, 2, 3)); // 5

24. 什么是可索引接口？如何定义数字索引和字符串索引接口？

  • 答案：可索引接口用于描述可通过索引访问的对象（如数组、字典），定义索引类型（数字或字符串）和对应的值类型。

  • 数字索引接口：索引为number类型，常用于描述数组或类数组对象。

  • 字符串索引接口：索引为string类型，常用于描述字典（键值对）对象。

  • 示例代码：

// 数字索引接口（类似数组）
interface NumberArray {
[index: number]: number; // 索引为number，值为number
}
const arr: NumberArray = [1, 2, 3];
console.log(arr[0]); // 1
// arr[0] = "a"; // 报错：值必须为number
// 字符串索引接口（类似字典）
interface StringMap {
[key: string]: string; // 索引为string，值为string
}
const dict: StringMap = {
name: "Alice",
city: "Beijing"
};
console.log(dict["name"]); // "Alice"
// dict["age"] = 30; // 报错：值必须为string
// 混合索引（字符串索引值类型需兼容数字索引值类型）
interface MixedIndex {
[key: string]: number | string;
[index: number]: number; // 数字索引值类型必须是字符串索引值类型的子类型
}

25. 接口之间如何实现继承？一个接口可以继承多个接口吗？

  • 答案：接口通过extends关键字实现继承，子接口会继承父接口的所有属性和方法。一个接口可以继承多个接口，用逗号分隔父接口列表。

  • 示例代码：

// 父接口1
interface Person {
name: string;
age: number;
}
// 父接口2
interface Contact {
phone: string;
email?: string;
}
// 继承单个接口
interface Student extends Person {
studentId: number;
}
// 继承多个接口
interface Teacher extends Person, Contact {
teacherId: number;
subject: string;
}
// 实现Student接口
const student: Student = {
name: "Bob",
age: 18,
studentId: 1001
};
// 实现Teacher接口（需包含Person和Contact的所有属性）
const teacher: Teacher = {
name: "Ms. Lee",
age: 35,
phone: "123-4567",
teacherId: 2001,
subject: "Math"
};

26. 接口与类的关系是什么？类如何实现接口？一个类可以实现多个接口吗？

  • 答案：接口可以约束类的结构（属性和方法），类通过implements关键字实现接口，必须实现接口中声明的所有属性和方法（除可选属性外）。

一个类可以实现多个接口，用逗号分隔接口列表，需满足所有接口的约束。

  • 示例代码：
// 定义接口
interface Runable {
speed: number;
run(): void;
}
interface Swimmable {
swimSpeed: number;
swim(): void;
}
// 类实现单个接口
class Dog implements Runable {
speed: number = 20;
run() {
console.log(`Dog runs at ${this.speed}km/h`);
}
}
// 类实现多个接口
class Duck implements Runable, Swimmable {
speed: number = 10;
swimSpeed: number = 5;
run() {
console.log(`Duck runs at ${this.speed}km/h`);
}
swim() {
console.log(`Duck swims at ${this.swimSpeed}km/h`);
}
}
// 错误示例：未完全实现接口
class Cat implements Runable {
speed: number = 15;
// 缺少run()方法，报错
}

27. 什么是接口合并？哪些场景下会发生接口合并？

  • 答案：接口合并（Interface Merging）是TypeScript的特性，指多个同名接口会自动合并为一个接口，合并后的接口包含所有同名接口的成员。

发生场景：

  1. 同一作用域内定义多个同名接口；
  2. 不同文件中定义的同名接口（全局作用域或模块内）。
  • 示例代码：
// 同一作用域内的接口合并
interface Car {
brand: string;
}
interface Car {
model: string;
year?: number; // 可选属性
}
// 合并后等价于：
// interface Car {
//   brand: string;
//   model: string;
//   year?: number;
// }
const myCar: Car = {
brand: "Toyota",
model: "Camry"
};
// 合并函数成员（需函数重载）
interface Calculator {
compute(a: number, b: number): number;
}
interface Calculator {
compute(a: string, b: string): string; // 函数重载
}
const calc: Calculator = {
compute(a: any, b: any): any {
if (typeof a === "number" && typeof b === "number") {
return a + b;
}
return a + b;
}
};

28. 接口可以定义静态属性或方法吗？为什么？

  • 答案：接口不能定义静态属性或方法。原因是接口的设计目标是约束实例的结构，而静态成员属于类本身而非实例，因此接口无法约束类的静态部分。

若需约束类的静态成员，可使用“工厂模式”或结合类型别名与构造函数类型。

  • 示例代码：
// 错误：接口不能定义静态成员
interface MyClass {
static staticProp: number; // 报错
instanceMethod(): void;
}
// 正确方式：用类型别名约束构造函数（静态部分）
type MyClassConstructor = {
new (): MyClassInstance; // 实例类型
staticProp: number; // 静态属性
staticMethod(): void; // 静态方法
};
interface MyClassInstance {
instanceMethod(): void; // 实例方法
}
// 实现类
class MyClass implements MyClassInstance {
static staticProp: number = 10;
static staticMethod() {
console.log("Static method");
}
instanceMethod() {
console.log("Instance method");
}
}
// 验证静态成员
const ctor: MyClassConstructor = MyClass;
console.log(ctor.staticProp); // 10

29. 如何用接口描述数组的“只读”特性？

  • 答案：可通过定义带readonly修饰符的数字索引接口，或直接使用TypeScript内置的ReadonlyArray<T>接口，来描述只读数组（不可修改长度或元素）。

  • 示例代码：

// 自定义只读数组接口
interface ReadonlyNumberArray {
readonly [index: number]: number;
readonly length: number; // 长度也只读
}
// 使用内置ReadonlyArray<T>
const readonlyArr: ReadonlyArray<number> = [1, 2, 3];// 或简写：readonly number[]const readonlyArr2: readonly number[] = [4, 5, 6];// 错误操作（只读数组不允许修改）readonlyArr[0] = 10; // 报错readonlyArr.push(4); // 报错（无push方法，因会修改数组）readonlyArr.length = 0; // 报错// 转换为普通数组后可修改const mutableArr: number[] = [...readonlyArr];mutableArr[0] = 10; // 允许

30. 接口与类型别名（Type Alias）在定义对象结构时的核心区别是什么？

  • 答案：接口与类型别名在定义对象结构时的核心区别如下：

    1. 扩展性：接口可通过extends继承，也可通过重复定义合并；类型别名不可继承，也不能合并，需用&（交叉类型）扩展。
    2. 实现：类可通过implements实现接口；类不能实现类型别名（除非类型别名是对象或接口类型）。
    3. 命名提示：接口在错误信息中显示原名；类型别名可能被展开显示。
    4. 适用场景：接口适合定义对象/类的结构（可扩展）；类型别名适合联合类型、交叉类型等复杂组合。

  • 示例代码：

// 接口扩展（extends）
interface A { x: number }
interface B extends A { y: string }
// 类型别名扩展（交叉类型）
type C = { x: number }
type D = C & { y: string }
// 接口合并
interface E { a: number }
interface E { b: string } // 合并为 { a: number; b: string }
// 类型别名不能合并（重复定义报错）
// type F = { a: number }
// type F = { b: string } // 报错
// 类实现接口
class MyClass implements A {
x: number = 10;
}
// 类实现类型别名（仅当类型别名为对象类型时允许）
class MyClass2 implements C {
x: number = 20;
}

二、100道TypeScript面试题目录列表

文章序号TypeScript面试题100道
1TypeScript面试题及详细答案100道（01-10）
2TypeScript面试题及详细答案100道（11-20）
3TypeScript面试题及详细答案100道（21-30）
4TypeScript面试题及详细答案100道（31-40）
5TypeScript面试题及详细答案100道（41-50）
6TypeScript面试题及详细答案100道（51-60）
7TypeScript面试题及详细答案100道（61-70）
8TypeScript面试题及详细答案100道（71-80）
9TypeScript面试题及详细答案100道（81-90）
10TypeScript面试题及详细答案100道（91-100）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/959764.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

详细介绍：SkyDiffusion：用 BEV 视角打开街景→航拍图像合成新范式

详细介绍：SkyDiffusion：用 BEV 视角打开街景→航拍图像合成新范式

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …
阅读更多...
Blender中如何让导出的FBX模型文件同时携带多个动画片段

Blender中如何让导出的FBX模型文件同时携带多个动画片段

Blender版本：V4.5； Unity版本：团结引擎 V1.7.3； 问题描述： 起因是博主本人最近在学习Unity，使用到了Blender对3D模型进行动画片段制作，但是博主在学习过程中发现，我使用Blender导出的FBX文件一次只能携带一个动…
阅读更多...
精美的vue流程设计器

精美的vue流程设计器

一、vue-dawn-flow介绍 vue-dawn-flow是一款功能强大的开源流程设计器，专为 Vue.js 生态打造，完美兼容 Vue 2 和 Vue 3 框架。并且能很好的兼容vue前端所有框架。 1.1插件功能提供了一个可视化的流程设计器，你可以在…
阅读更多...
2025年刀轮船订制厂家权威推荐榜单：斗轮清淤船/刀轮式挖泥船/小型斗轮船源头厂家精选

2025年刀轮船订制厂家权威推荐榜单：斗轮清淤船/刀轮式挖泥船/小型斗轮船源头厂家精选

在内河航道维护与水利工程建设领域，刀轮船作为高效清淤装备，其作业效率直接影响工程进度与成本。据水利行业统计数据显示，2025年我国内河清淤市场规模预计达到287亿元，年增长率稳定在8%-12%。 刀轮船凭借其独特的斗…
阅读更多...
高效地使用std::map

高效地使用std::map

#include <iostream> #include <string> #include <map> using namespace std;typedef map<string, int> M; M m; const char K[] = "key";void fn1 () {auto p = m.insert({K, 0…
阅读更多...
flask:得到get/post参数

flask:得到get/post参数

一，得到get参数 代码： from flask import Blueprint,jsonify,render_template,requestuser = Blueprint(user, __name__)# 用蓝图注册路由 @user.route("/add/") def user_add():# 得到get参数name = requ…
阅读更多...
YACS2025年10月甲组

YACS2025年10月甲组

YACS2025年10月甲组T1. 数据结构 注意到可以离线，考虑整体二分。每次执行前一半操作，如果发现超过了 \(y\)，那么答案就在前一半操作，否则就在后一半操作（如果补一个操作编号为 \(0\)，整体加极大值的操作）。 所以…
阅读更多...
2025年peek什么材料定制厂家权威推荐榜单：peek原料/材料peek/peek塑料原料源头厂家精选

2025年peek什么材料定制厂家权威推荐榜单：peek原料/材料peek/peek塑料原料源头厂家精选

在机器人轻量化与新能源汽车爆发式增长的浪潮下，PEEK（聚醚醚酮）材料凭借其卓越性能正成为高端制造领域的“新宠”。据行业数据显示，特斯拉Optimus单机使用PEEK量超过2kg，预计2025年全球出货量达50万台时，将激发出…
阅读更多...
一对一视频聊天源码，高效查找方法之二分查找 - 云豹科技

一对一视频聊天源码，高效查找方法之二分查找 - 云豹科技

一对一视频聊天源码，高效查找方法之二分查找介绍二分查找也称折半查找（Binary Search），它是一种效率较高的查找方法。但是，折半查找要求线性表必须采用顺序存储结构，而且表中元素按关键字有序排列。过程首先，假…
阅读更多...
2025年高解析喷码机生产厂家权威推荐榜单：打标机/打码机/工业喷码机源头厂家精选

2025年高解析喷码机生产厂家权威推荐榜单：打标机/打码机/工业喷码机源头厂家精选

在“一物一码”成为食品、医药、线缆、日化等行业出厂标配的2025年，高解析喷码机已成为产品追溯、品牌防伪及生产管理不可或缺的一环。 高解析喷码技术正随着工业4.0深化与"中国智造"转型而持续进步。据行业…
阅读更多...
Netty 示例

Netty 示例

1. Netty 示例 1.1. 简单的 Echo 服务器 这里，我们直接使用Netty作为独立的进程启动 1.1.1. Netty 依赖 maven依赖如下： <dependency><groupId>io.netty</groupId><artifactId>netty-all<…
阅读更多...
2025年电子压力试验生产厂家权威推荐榜单：混凝土压力试验机/纸箱压力试验机/全自动压力试验机源头厂家精选

2025年电子压力试验生产厂家权威推荐榜单：混凝土压力试验机/纸箱压力试验机/全自动压力试验机源头厂家精选

在工程质量检测与材料研发领域，电子压力试验机作为衡量材料力学性能的关键设备，其测量精度与稳定性直接影响检测结果的可靠性。据行业报告显示，全球压力试验机市场正稳步增长，技术创新与智能化成为推动行业发展的核…
阅读更多...
从网络下载图片到本地

从网络下载图片到本地

/// <summary> /// 保存图片从web /// </summary> /// <param name="imgUrl">图片网页链接</param> /// <param name="path">保存路径</param> /// <para…
阅读更多...
Netty 的示例

Netty 的示例

1. Netty 示例 1.1. 简单的 Echo 服务器 这里，我们直接使用Netty作为独立的进程启动 1.1.1. Netty 依赖 maven依赖如下： <dependency><groupId>io.netty</groupId><artifactId>netty-all<…
阅读更多...
2025年大型一体化净水器制造企业权威推荐榜单：全自动一体化净水器/自来水一体化净水器/自动一体化净水器源头厂家精选

2025年大型一体化净水器制造企业权威推荐榜单：全自动一体化净水器/自来水一体化净水器/自动一体化净水器源头厂家精选

在水资源日益紧张的背景下，大型一体化净水器凭借其高效处理能力和自动化运行优势，正成为市政供水、工业用水等领域的重要解决方案。据行业数据显示，2025年中国大型一体化净水器市场规模预计达到156亿元，年复合增长…
阅读更多...
Misc图片题各种解法总结（仅限入门）

Misc图片题各种解法总结（仅限入门）

Misc图片题各种解法总结（仅限入门）图片特别小（1k不到那种）：直接拿HxD/WinHex打开看有没有塞字符串 图片比较特殊：随机应变，比如是什么码就扫一下，是gif动图就把每一帧提取一下，是日历/键位一般就是连连看 两张…
阅读更多...
Perfect Hash能用于分词吗？

Perfect Hash能用于分词吗？

CMPH - C Minimal Perfect Hashing Library 装起来很方便。apt list有：libcmph0 libcmph-dev libcmph-tools 测试数据是229837个词，从 意义 一一 ... 中航技进出口有限责任公司 2MB 在Intel N100上，cmph -g words 仅…
阅读更多...
小白必看！AI写论文的实用方法全攻略

小白必看！AI写论文的实用方法全攻略

当今数字化时代，AI技术渗透各领域，为论文写作带来新思路。本文介绍借助AI高效完成论文写作的方法，如利用其优势提高效率、提供灵感、优化表达。还分享利用AI生成论文大纲、摘要、国内外研究现状及结论的prompt指令，…
阅读更多...
初中几何①手拉手模型 +两个相似（一般、等腰、等腰直角、60度角、30度角）三角形 或 矩形 的手拉手模型

初中几何①手拉手模型 +两个相似（一般、等腰、等腰直角、60度角、30度角）三角形 或 矩形 的手拉手模型

手拉手模型：4个类型和11个结论，一次性全学会！ 原创 夜读数学 夜读数学 2025年5月23日 12:13 上海 https://mp.weixin.qq.com/s/vHUrnn7PZP9nq8oEuOo1-A一、模型特征绕共点旋转，两个三角形：共顶点，等顶角，+（…
阅读更多...
一对一视频直播app开发，golang fmt格式“占位符” - 云豹科技

一对一视频直播app开发，golang fmt格式“占位符” - 云豹科技

一对一视频直播app开发，golang fmt格式“占位符”golang 的fmt 包实现了格式化I/O函数，类似于C的 printf 和 scanf。# 定义示例类型和变量 type Human struct {Name string }var people = Human{Name:"zhangsan…
阅读更多...
最新文章

Copyright @ 2022~2023