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

在这里插入图片描述

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

文章目录

    • 13. 什么是装饰器?如何使用装饰器?
    • 14. 如何使用类型断言?
    • 15. 如何使用 intersection types?
    • 16. 什么是枚举类型?如何使用枚举类型?

13. 什么是装饰器?如何使用装饰器?

在 TypeScript 中,装饰器是一种特殊的语法,它允许您在不修改现有代码的情况下,动态地修改类、方法、属性和参数的行为

装饰器的基本语法如下:

@decoratorName
class MyClass {
    // 类的成员
}

在上述语法中,@decoratorName是一个装饰器函数的名称,MyClass是一个类。

要使用装饰器,您需要定义一个装饰器函数,并在需要应用装饰器的地方使用@符号来调用它。装饰器函数可以接受一个或多个参数,并返回一个新的装饰器函数,该函数将被应用于目标类、方法、属性或参数。

下面是一个使用装饰器的示例:

function logDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]) {
        console.log(`Calling method: ${propertyKey}`);
        const result = originalMethod.apply(this, args);
        console.log(`Method result: ${result}`);
        return result;
    };

    return descriptor;
}

class MyClass {
    @logDecorator
    method1() {
        return "Hello, World!";
    }
}

在上述示例中,我们定义了一个名为logDecorator的装饰器函数,它接受三个参数:targetpropertyKeydescriptor

target参数表示被装饰的目标类或对象,propertyKey参数表示被装饰的目标方法或属性的名称,descriptor参数表示目标方法或属性的描述符,其中包含方法或属性的各种信息,如名称、类型、值等。

在装饰器函数内部,我们首先获取原始方法的引用,并将其赋值给originalMethod变量。然后,我们使用descriptor.value属性来修改目标方法的实现,并在方法执行前后打印相关信息。

最后,我们返回修改后的描述符,以便将装饰器应用于目标方法。

在类MyClass中,我们使用@logDecorator装饰器来应用装饰器函数到method1方法上。当调用method1方法时,它将输出调用方法的信息以及方法的返回值。

需要注意的是,装饰器是一种高级特性,在某些情况下可能会导致代码的可读性和可维护性下降。因此,在使用装饰器时,应该谨慎考虑,并确保代码的清晰和易于理解。

14. 如何使用类型断言?

在 TypeScript 中,类型断言是一种用于在运行时检查变量类型的机制。它允许您在代码中强制转换一个变量的类型,以确保它符合预期的类型。

类型断言的基本语法如下:

<T>(value: any): T;

在上述语法中,<T>是一个类型参数,表示您希望将变量强制转换为的目标类型。value是您要进行类型断言的变量。

下面是一个使用类型断言的示例:

function multiply(a: number, b: number): number {
    if (typeof a === "number" && typeof b === "number") {
        return a * b;
    } else {
        throw new Error("Both arguments must be numbers.");
    }
}

// 调用函数并传递字符串作为参数
try {
    const result = multiply("5", "10");
} catch (error) {
    console.error(error.message);  // 输出: "Both arguments must be numbers."
}

// 使用类型断言来强制转换参数类型
const result = multiply<Number>("5", "10") as number;
console.log(result);  // 输出: 0

在上述示例中,我们定义了一个名为multiply的函数,它接受两个参数ab,并返回它们的乘积。在函数内部,我们使用typeof操作符来检查参数的类型是否为数字。如果类型不正确,我们将抛出一个错误。

然后,我们调用multiply函数并传递字符串"5"和"10"作为参数。由于参数类型不正确,函数将抛出一个错误,我们使用catch块来捕获这个错误,并输出错误信息。

最后,我们使用类型断言来强制转换参数类型,并再次调用multiply函数。在类型断言中,我们将目标类型指定为Number,并将返回值强制转换为数字类型。由于参数类型已经被强制转换为数字类型,因此函数将返回它们的乘积 0。

需要注意的是,类型断言是一种运行时的类型检查机制,它可能会导致潜在的类型错误和运行时错误。因此,在使用类型断言时,应该谨慎考虑,并确保代码的可靠性和安全性。

15. 如何使用 intersection types?

在 TypeScript 中,交叉类型(Intersection Types)是一种用于表示多个类型的公共部分的类型。它允许您创建一个新的类型,该类型包含多个其他类型的所有成员。

交叉类型的基本语法如下:

type MyIntersectionType = Type1 & Type2 & Type3;

在上述语法中,MyIntersectionType是一个新的交叉类型,它包含了Type1Type2Type3这三个类型的所有成员。

下面是一个使用交叉类型的示例:

interface Person {
    name: string;
    age: number;
}

interface Employee {
    department: string;
}

type MyIntersectionType = Person & Employee;

const person: Person = {
    name: "John",
    age: 30,
};

const employee: Employee = {
    department: "Marketing",
};

const myObject: MyIntersectionType = {
    name: "John",
    age: 30,
    department: "Marketing",
};

console.log(person.name);  // 输出: John
console.log(employee.department);  // 输出: Marketing
console.log(myObject.name);  // 输出: John
console.log(myObject.age);  // 输出: 30
console.log(myObject.department);  // 输出: Marketing

在上述示例中,我们定义了两个接口PersonEmployee,它们分别表示人的基本信息和员工的详细信息。然后,我们使用交叉类型Person & Employee创建了一个新的类型MyIntersectionType,它包含了PersonEmployee这两个接口的所有成员。

最后,我们创建了三个对象personemployeemyObject,它们分别符合PersonEmployeeMyIntersectionType这三个类型。由于MyIntersectionType包含了PersonEmployee的所有成员,因此我们可以使用myObject来访问PersonEmployee的所有成员。

需要注意的是,交叉类型的成员可能会存在冲突和歧义。如果两个类型中存在同名的成员,那么交叉类型中将只保留一个成员。在使用交叉类型时,应该确保不会出现成员冲突和歧义的情况。

16. 什么是枚举类型?如何使用枚举类型?

在 TypeScript 中,枚举类型(Enum Type)是一种用于表示一组固定值的类型。它允许您创建一个命名常量的集合,并将它们组织在一个类型中。

枚举类型的基本语法如下:

enum MyEnum {
    Value1,
    Value2,
    Value3,
}

在上述语法中,MyEnum是一个枚举类型的名称,Value1Value2Value3是该枚举类型的成员。

下面是一个使用枚举类型的示例:

enum Color {
    Red,
    Green,
    Blue,
}

const myColor: Color = Color.Red;

console.log(myColor);  // 输出: Red

在上述示例中,我们定义了一个名为Color的枚举类型,它包含了三个成员RedGreenBlue。然后,我们使用Color.Red来初始化一个变量myColor,并将其赋值为Color枚举类型的成员Red

枚举类型的成员可以被直接访问和使用,它们被视为常量。枚举类型的成员也可以被用于类型检查和类型推导,以确保代码的正确性和可读性。

需要注意的是,枚举类型的成员是按顺序排列的,并且可以通过它们的名称或索引来访问。默认情况下,枚举类型的成员从 0 开始索引。您也可以使用数字来初始化枚举类型的成员,例如Color[2],这将将其赋值为Color.Blue

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

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

相关文章

论文阅读:“Model-based teeth reconstruction”

文章目录 AbstractIntroductionTeeth Prior ModelData PreparationParametric Teeth Model Teeth FittingTeeth Boundary Extraction Reference Abstract 近年来&#xff0c;基于图像的人脸重建方法日趋成熟。这些方法可以捕捉整个面部或面部特定区域&#xff08;如头发、眼睛…

html实现各种瀑布流(附源码)

文章目录 1.设计来源1.1 动态响应瀑布流1.2 分页瀑布流1.3 响应瀑布流 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134613121 html实现各种瀑布流(附源码)&#xff0c;…

Java中wait()方法在synchronized方法中调用的奥秘

作为一名Java程序员&#xff0c;我们深知synchronized关键字和wait()方法在多线程编程中的重要性。 在本文中&#xff0c;我们将探讨为什么wait()方法需要在synchronized方法中调用&#xff0c;以及它们是如何协同工作的。 首先&#xff0c;让我们了解一下synchronized关键字和…

数字图像处理-Matlab实验

实验一 图像增强 实验内容: 对于给定的低对比度测试图像,利用灰度图像直方图均衡化算法进行图像视觉效果增强。 对于给定的低照度彩色测试图像,结合颜色空间转换和灰度图像直方图均衡化算法进行图像视觉效果增强。 实验数据: Test1_1.jpg: Test1_2.jpg: 实验步骤: %% …

基于PyQT5的图像分类网络训练平台

1.主界面 2.选择数据集路径 里面包含两个文件夹 train和val 3.选择类别标签 以txt为结尾 4.训练基本设置 包括输入图像大小、batch size、轮次、学习率等 5.训练高级设置 是否进行标签平滑、图像增强操作 6.选择训练日志输出地址 为一个文件夹 7.选择训练好的模…

2023.11.25 关于 MyBatis 的配置与使用

目录 引言 MyBatis 介绍 掌握两个点 在框架中的定位 创建数据库 配置 MyBatis 引入依赖 配置文件 创建实体类 构建 Mapper 层代码实现 添加 mapper 接口 添加 UserMapper.xml 实现 Service 层 实现 Controller 层 最终测验 阅读下面文章之前建议了解并创建…

新手如何对一个web网页进行一次渗透测试

新手如何对一个web网页进行一次渗透测试 文章目录 新手如何对一个web网页进行一次渗透测试什么是渗透测试?渗透测试和红蓝对抗的区别那么拿到一个网站后如何进行一次优雅的渗透测试呢 什么是渗透测试? 在获得web服务运营的公司书面授权的情况下&#xff0c;模拟攻击者的行为…

二进制编辑器hexedit的安装及使用

Hexedit 同时以 ASCII 和十六进制显示文件 安装 终端输入hexedit回车&#xff0c;如果没安装&#xff0c;会提示让输入 sudo apt-get install hexedit 照着输入命令&#xff0c;安装。安装完成后&#xff0c;cd到一个有二进制文件的目录下&#xff0c;输入hexedit命令回车 再…

Java核心知识点整理大全16-笔记

Java核心知识点整理大全-笔记_希斯奎的博客-CSDN博客 Java核心知识点整理大全2-笔记_希斯奎的博客-CSDN博客 Java核心知识点整理大全3-笔记_希斯奎的博客-CSDN博客 Java核心知识点整理大全4-笔记-CSDN博客 Java核心知识点整理大全5-笔记-CSDN博客 Java核心知识点整理大全6…

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

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

SpringCloud微服务网关Gateway:gateway基本实现、断言工厂、过滤器工厂、浏览器同源策略、跨域问题解决方案

Gateway网关 Spring Cloud Gateway 是 Spring Cloud 的一个全新项目&#xff0c;该项目是基于 Spring 5.0&#xff0c;Spring Boot 2.0和Project Reactor 等响应式编程和事件流技术开发的网关&#xff0c;它旨在为微服务架构提供一种简单有效的统一的 API路由管理方式 为什么…

虚拟人物视频

背景 大家好&#xff0c;我是小欣&#xff0c;是这个博客的虚拟助手。在这里&#xff0c;我将为大家提供各种有趣、实用、甚至是意想不到的信息。作为一个年轻的语言模型&#xff0c;我的目标是为你们呈现出最有趣和有深度的内容。 我喜欢与大家分享知识、解答问题&#xff0…

视频格式转换:将MP4轻松转MKV格式,高效便捷

随着科技的发展&#xff0c;数字媒体已经深入到生活中&#xff0c;视频格式的转换也成为了许多人的日常要求。MP4和MKV是两种常见的视频格式&#xff0c;它们各有优点。MP4以其高效的压缩比和广泛的兼容性被广泛使用&#xff0c;而MKV则因其强大的封装能力和无损压缩而受到喜爱…

提升逼格,自己搭建博客网站不求人

背景 对于一个热爱分享知识和经验的大佬来说&#xff0c;搭建一个自己的个人博客是十分必要的。因为各个免费写博客平台都会有每天写博客限制&#xff0c;比如我现在这篇文章的限制&#xff0c;就是每天最多发表3篇&#xff0c;同时还给我的博客添加一大波广告&#xff0c;真是…

网络编程基本概念

网络编程基本概念 为什么需要网络编程&#xff1f; 用户在浏览器中&#xff0c;打开在线视频网站&#xff0c;如优酷看视频&#xff0c;实质是通过网络&#xff0c;获取到网络上的一个视频资源。 与本地打开视频文件类似&#xff0c;只是视频文件这个资源的来源是网络。 相…

人工智能_机器学习051_支持向量机SVM概念介绍_理解support vector machine---人工智能工作笔记0091

在出现深度学习,神经网络算法之前,支持向量机已经可以解决很多问题了,我们自然界中的问题,无非就是可以转换为回归问题和分类问题. 然后从现在开始我们来看支持向量机,首先看一下这几个字 support 是支持 vector是向量的意思,然后 machine指的是机器 那么我们之前用到的模型…

【Java】实现一个自己的定时器

上文讲了怎样使用Java自带的定时器【Java】定时器的简单应用 这篇博客就来讲如何来编写一个自己实现的定时器 1、代码框架 由定时器的使用方法得知&#xff0c;我们在使用定时器的时候会添加一个任务timerTask类&#xff0c;而timer类则是我们行使任务的类&#xff0c;因此可…

深入解析:如何开发抖音票务小程序

当下&#xff0c;开发抖音票务小程序成为了吸引年轻用户群体的一种创新方式。本文将深入解析如何开发抖音票务小程序&#xff0c;探讨关键步骤和技术要点。 1.确定需求和功能 考虑到抖音的用户特点&#xff0c;可以加入与短视频相关的票务功能&#xff0c;如在线购票、观影记录…

vim+xxd编辑十六进制的一个大坑:自动添加0x0a

问题描述 今天在做一个ctf题&#xff0c;它给了一个elf文件&#xff0c;我要做的事情是修复这个elf文件&#xff0c;最后执行它&#xff0c;这个可执行文件会计算它自身的md5作为这道题的flag。我把所有需要修复的地方都修复了&#xff0c;程序也能成功运行&#xff0c;但是fl…

百度 Comate 终于支持 IntelliJ IDEA 了

大家好&#xff0c;我是伍六七。 对于一直关注 AI 编程的阿七来说&#xff0c;编程助手绝对是必不可少的&#xff0c;除了 GitHub Copilot 之外&#xff0c;国内百度的 Comate 一直是我关注的重点。 但是之前&#xff0c;Comate 还支持 VS code&#xff0c;并不支持 IntelliJ…