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

在这里插入图片描述

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

文章目录

    • 5. 什么是类型注解？为什么需要使用类型注解？
    • 6. 如何使用 interface 声明一个接口？
    • 7. 什么是类？如何创建一个类？
    • 8. 如何使用类的继承和多态？

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函数可以根据传递给它的实际类型来执行不同的操作，而不需要关心对象的具体实现细节。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Qt手写ListView

Qt手写ListView

创建视图： QHBoxLayout* pHLay new QHBoxLayout(this);m_pLeftTree new QTreeView(this);m_pLeftTree->setEditTriggers(QAbstractItemView::NoEditTriggers); //设置不可编辑m_pLeftTree->setFixedWidth(300);创建模型和模型项： m_pLeftTree…
阅读更多...
STM32 SCF文件

STM32 SCF文件

文章目录 1 SCF文件2 SCT分散加载文件3 SCF文件编写 1 SCF文件 keil编译器在链接的时候，是根据分散加载(.scf后缀的文件)来确定程序的加载域和运行域的。 加载域就是程序运行前在flash中具体分区情况执行域就是程序运行后，程序在flash和ram中的分区情况…
阅读更多...
【5G PHY】5G SS/PBCH块介绍（四）

【5G PHY】5G SS/PBCH块介绍（四）

博主未授权任何人或组织机构转载博主任何原创文章，感谢各位对原创的支持！ 博主链接 本人就职于国际知名终端厂商，负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作，目前牵头6G算力网络技术标准研究。 博客…
阅读更多...
leetcode中“辅助栈”类题目和“单调栈”类题目的异同

leetcode中“辅助栈”类题目和“单调栈”类题目的异同

1 总结 1 栈中元素的特性 2 单调栈存在一次性连续删除多个栈顶的情况，但是普通的栈，一次只pop掉一个栈顶元素 2 LC1209. 删除字符串中的所有相邻重复项 II - 普通辅助栈 class Solution {public String removeDuplicates(String s, int k) {int ns.l…
阅读更多...
windows的bat文件（学习笔记）

windows的bat文件（学习笔记）

简介 通过windows的cmd执行的批处理，扩展名可以是.bat或.cmd（类似linux的shell脚本） 所有语句符号不区分大小写 帮助提示信息：命令 /? 1 基本语法 (1) 注释：rem 注释文本不执行 (2) 关闭盘符输出：e…
阅读更多...
城市生命线丨桥梁结构健康监测系统的作用

城市生命线丨桥梁结构健康监测系统的作用

在城市建设当中，有非常多的城市基本建设，建设当中，桥梁作为不可忽视的一环，也需要有很多桥梁建设的智能监测系统，在这个桥梁结构健康监测系统中，桥梁的各个数值都能被监测得到。 WITBEE万宾使用城市生命线智…
阅读更多...
MyBatis 操作数据库(入门)

MyBatis 操作数据库(入门)

一：MyBatis概念 (1)MyBatis 💗MyBatis是一款优秀的持久层框架，用于简化JDBC的开发 (2)持久层 1.持久层 💜持久层：持久化操作的层，通常指数据访问层(dao)，是用来操作数据库的 2.持久层的规范 ①…
阅读更多...
4D Gaussian Splatting：用于实时的动态场景渲染

4D Gaussian Splatting：用于实时的动态场景渲染

Wu G, Yi T, Fang J, et al. 4d gaussian splatting for real-time dynamic scene rendering[J]. arXiv preprint arXiv:2310.08528, 2023. 更多参考资料如下： 文章总结：4D Gaussian Splatting for Real-Time Dynamic Scene Rendering；疑难问…
阅读更多...
蓝桥杯每日一题2023.11.26

蓝桥杯每日一题2023.11.26

题目描述 奖券数目 - 蓝桥云课 (lanqiao.cn) 将每一个数字进行一一枚举&#xff0c;如果检查时不带有数字4则答案可以加1 #include<bits/stdc.h> using namespace std; int ans; bool check(int n) {while(n){if(n % 10 4)return false;n / 10; }return true; } int m…
阅读更多...
线性分组码的奇偶校验矩阵均匀性分析

线性分组码的奇偶校验矩阵均匀性分析

回顾信道编解码知识&#xff0c;我们知道信道编码要求编码具有检纠错能力&#xff0c;作为FEC&#xff08;forward error correction&#xff09;前向纠错编码的一类&#xff0c;线性分组码表示校验位与信息位的关系能够线性表示。 在这篇文章中&#xff0c;并不是要讨论信道编…
阅读更多...
NX二次开发UF_CURVE_ask_isocline 函数介绍

NX二次开发UF_CURVE_ask_isocline 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_isocline Defined in: uf_curve.h int UF_CURVE_ask_isocline(tag_t isocline_feat, int * face_cnt, tag_p_t * faces, double direction [ 3 ] , char * * start_ang…
阅读更多...
plotneuralnet和netron结合绘制模型架构图

plotneuralnet和netron结合绘制模型架构图

plotneuralnet和netron结合绘制模型架构图 一、plotneuralnet 本身的操作 模型结构图的可视化&#xff0c;能直观展示模型的结构以及各个模块之间的关系。最近借助plotneuralnet python库&#xff08;windows版&#xff09;绘制了一个网络结构图&#xff0c;有一些经验和心得…
阅读更多...
使用Pytorch从零开始构建Normalizing Flow

使用Pytorch从零开始构建Normalizing Flow

归一化流 (Normalizing Flow) &#xff08;Rezende & Mohamed&#xff0c;2015&#xff09;学习可逆映射 f : X → Z f: X \rightarrow Z f:X→Z, 在这里X是我们的数据分布&#xff0c;Z是选定的潜在分布。 归一化流是生成模型家族的一部分&#xff0c;其中包括变分自动编…
阅读更多...
手摸手Element-Plus组件化开发

手摸手Element-Plus组件化开发

前端环境准备 编码工具: VSCode 依赖管理:NPM 项目构建: Vuecli NPM的全称是Node Package Manager&#xff0c;是一个NodeJS包管理和分发工具&#xff0c;已经成为了非官方的发布Node模块&#xff08;包&#xff09;的标准。2020年3月17日&#xff0c;Github宣布收购npm&am…
阅读更多...
扫码点餐小程序的效果如何

扫码点餐小程序的效果如何

扫码点餐是餐饮商家常用的方式&#xff0c;其可以帮助商家更好更快的服务到店客户及节省商家点餐、加菜、汇总结算的时间及人力成本。 通过【雨科】平台搭建餐饮扫码点餐小程序&#xff0c;客户进店用小程序扫描桌码即可开始点餐&#xff0c;确认菜单信息后打印小票提交到厨房…
阅读更多...
C# WPF上位机开发（开篇）

C# WPF上位机开发（开篇）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 之前很少用到c#语言&#xff0c;大部分时间都用c/c&#xff0c;主要是它可以兼顾上位机qt开发以及嵌入式开发。所以&#xff0c;用c/c是比较合理的…
阅读更多...
flex布局实战之自动填充剩余

flex布局实战之自动填充剩余

案例目标 文字部分自适应并且居中 图中是一个弹窗&#xff0c;我现在使用flex的布局来实现&#xff0c;标题和关闭按钮。因为是uni-app,所以标签是view 。你可以自行替换为 代码 <view class"popup-box"><view class"title"><view class&…
阅读更多...
CSS特效019：图标图片悬浮旋转一周

CSS特效019：图标图片悬浮旋转一周

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…
阅读更多...
Java新建项目如何整理项目结构，没有src文件夹

Java新建项目如何整理项目结构，没有src文件夹

现在IDEA2023中新建项目时, 不会有src文件夹。这时需要自己创建一个src的包&#xff0c;然后将这个包设置为source root。 可能出现没有这个选项的情况&#xff0c;这是需要把设置的当前项目首先Unmark了&#xff0c;然后再对src文件夹mark一下。 src: 这是源代码的根目录。 …
阅读更多...
rsyslog出现Unit rsyslog.service is masked不可用问题解决

rsyslog出现Unit rsyslog.service is masked不可用问题解决

博主在测试将日志发送到日志服务器的功能时遇到了rsyslog服务不可用的问题&#xff0c;具体来说&#xff0c;就是执行systemctl restart rsyslog或者 service rsyslog restart命令时&#xff0c;出现了标题中所述的Unit rsyslog.service is masked问题。网上查找了很多资料&…
阅读更多...
最新文章

Copyright @ 2022~2023