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

news2024/11/26 22:41:05

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Security 6.1.x 系列(6)—— 显式设置和修改登录态

一、前言 此篇是对上篇 Spring Security 6.1.x 系列&#xff08;5&#xff09;—— Servlet 认证体系结构介绍 中4.9章节显式调用SecurityContextRepository#saveContext进行详解分析。 二、设置和修改登录态 2.1 登录态存储形式 使用Spring Security框架&#xff0c;认证成…

快速解决Navicat连接数据库报错:10061

目录 问题原因&#xff1a; 错误提示&#xff1a; 解决方案&#xff1a; 问题1&#xff1a;如何进入指定目录&#xff1f; 问题2&#xff1a;若出现&#xff1a;“服务名无效” 将MySQL注册到win服务中 问题原因&#xff1a; mysql服务没有开启&#xff08;可能会在更新windows…

337. 打家劫舍III (二叉树)

题目 题解 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def rob(self, root: Optional[TreeNode]) ->…

游戏软件提示xinput1_3.dll缺失如何修复呢?6种常用修复方法总结

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“xinput1_3.dll丢失”。这个问题可能会导致游戏无法正常运行。为了解决这个问题&#xff0c;我们需要了解xinput1_3.dll是什么以及如何找回丢失的文件。本文将详细介绍xinput1_3.dll丢失的解…

鸿蒙HarmonyOS手把手带大家创建第一个项目 并做一个基本的组件结构讲解

上文 鸿蒙HarmonyOS 编辑器 下载 安装带大家了解并下载安装了 HarmonyOS 的编辑器 那么 我们现在双击打开它 在左侧菜单中选择 Create Project 这里有多种模板 我们先选择默认的 点击下一步 这里 我们项目的目录 和 名字可以修改一下 其他的都先用默认的就好了 但是还是要注…

人力资源管理后台 === 组织架构

目录 1.组织架构-树组件应用 2.组织架构-树组件自定义结构 3.组织架构-获取组织架构数据 4.组织架构-递归转化树形结构 5.组织架构-添加子部门-新建弹层组件 6.组织架构-添加子部门-表单结构 7.组织架构-添加子部门-表单基本校验 8.组织架构-添加子部门-表单业务校验 9…

2023.11.25 关于 MyBatis 的配置与使用

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

python回溯求解电话号码组合

给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 输入&#xff1a;digits "23" 输出&#xff1a;["ad&qu…

linux shell操作 - 05 进程 与 IO 模型

文章目录 计算机内存分配进程与子进程流IO模型阻塞IO非阻塞IOIO多路复用异步IO网络IO模型简单的socket并发的socket 计算机内存分配 一个32位&#xff0c;4G内存的计算机&#xff0c;内存使用分为两部分&#xff1a; 操作系统内核空间&#xff1b;应用程序的用户空间使用的操…

3.OpenResty系列之Nginx反向代理

1. Nginx简介 Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器 什么是反向代理&#xff1f; 反向代理&#xff08;Reverse Proxy&#xff09;方式是指以代理服务器来接受 internet 上的连接请求&#x…

力扣373场周赛题解

第一题&#xff1a; 这个题是一个简单题&#xff0c;数据范围也特别小&#xff0c;所以直接使用模拟方式暴力解答。 直接进行行移动的过程&#xff0c;然后检查移动后的结果是否与移动前相同。 代码&#xff1a; ​ public class Solution {// 将指定行循环右移k次pri…

怎样设置field symbol的断点

今天看到一篇Jerry Wang 2016年写的关于设置 conditional break point的文章&#xff0c;正好解决我多年如何设置根据fs值进行调试&#xff0c;因为watch point是不能对fs进行处理。非常感谢&#xff0c;也非常开心&#xff01; Source code breakpoint in ABAP debugger Crea…

以太网通讯协议小结--持续更新中

一、以太网介绍 以太网是一种产生较早&#xff0c;使用相当广泛的局域网技术&#xff0c;局域网就是一个区域的网络互联&#xff0c;可以使办公室也可以是学校等等&#xff0c;大小规模不一。 目前以太网根据速度等级分类大概分为&#xff1a;标准以太网&#xff08;10Mbit/s…

针对无法创建JDK8版本的SpringBoot项目

自从昨日起&#xff0c;JDK突然改版了&#xff0c;不能在使用JDK8来进行创建Spring Boot项目了&#xff0c;导致目前小编的JDK无从下手~~ 因此&#xff0c;在仔细琢磨了一晚之后&#xff0c;想起来了以下几个方法&#xff0c;与大家共勉。希望能够得到大家的认可&#xff01; …

班级管理五步法

亲爱的教师朋友们&#xff01;今天我要和大家分享一个超级实用的班级管理方法——班级管理五步法&#xff01;用这个方法&#xff0c;轻松掌握班级秩序&#xff0c;一起来看看吧&#xff01; 第一步&#xff1a;建立规矩 我们要和孩子们一起建立规矩。规矩要简单明了&#xff…

【Linux】:信号在内核里的处理

信号的发送和保存 一.内核中的信号处理二.信号集操作函数1.一些信号函数2.sigprocmask3.sigpending4.写代码 三.信号在什么时候处理的四.再谈地址空间 一.内核中的信号处理 1.实际执行信号的处理动作称为信号递达(Delivery )2.信号从产生到递达之间的状态,称为信号未决(Pending…

AI视频生成工具——Runway gen2 全功能超详细使用教程(2)

昨天给大家分享了Runway Gen1的使用教程&#xff0c;一篇文章就能让你轻松掌握使用文字和图像从现有视频生成新的视频技能&#xff0c;还没有看过的同学们可以回看过往文章。 Runway视频生成功能有3大核心成品 Gen1&#xff1a;视频转视频工具Gen2&#xff1a;视频生成编辑工…

2023年09月 Scratch(三级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 运行下面程序后,角色的x坐标值是?( ) A:100 B:90 C:110 D:120 答案:C 利用变量值作为条件,控制循环的次数。变量从0~10的过程中每次角色的x坐标都增加了10,当变量值为1…

《霍格沃兹之遗》和《原子之心》技术选型

近期发现很多的精力放在游戏的整体技术选型以及产生的结果上面&#xff0c;所以回顾下几个游戏的选型和结果&#xff1b; 这里一个是自己玩游戏的画面流畅度的直接感受&#xff0c;以及一直非常喜爱的评测“数毛社”&#xff0c;digital foundry 《霍格沃兹之遗》和《原子之心》…

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

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