TypeScript 完整篇,考前必看,一网打尽所有的面试题

其实 ts 相关的面试题目很少,常问的就那么几个,但是呢,有这么个问题。就是如果面试官问我范型是什么,可能我还能说上几句,但是如果他直接说,说说你对 ts 的理解?为什么要用 ts 这样以来就有点迷茫了,一时之间竟然不知道怎么回到。

我承认是我的原因,总结完这篇博客,如果再有面试题目没有回答上来那我就。。。。

对,没错,我还没找到工作。

ts 相关的面试题都是概念相关的,我是没有遇到过写代码的,所以一定要组织好自己的语言,尤其是我这种表达能力差的。

一、为什么

1.1 为什么要使用 ts

一句【ts】提供了类型检查,肯定是不够的,可以对应着 js 的功能来想 ts 改进的点。 

  1. ts 是 js 的超集
  2. ts 提供静态类型检查,有利于减少错误
  3. ts 可以提高代码的可读性和可维护性
  4. ts 提供了多种开发工具,类型推断等,可以提高开发效率
  5. ts 有强大的类型系统,比如 interface、type、和范型
  6. ts 中的类 class 相对于 js 增加了范型,访问控制符private、public、protected
  7. ts 有类型体操,比如 pick 、omit、Partial 等【类型体操这个概念要记住】
  8. ts 编译后成为 js 代码

要用自己的话总结一下,多罗列几个 ts 有而 js 中没有的功能。

1.2 ts 相对于 js 有什么优点,ts 有哪些新增加的功能

我觉得这个问题和上一个问题的答案是差不多的,重点罗列一下 ts 中的重要功能

  1. ts 中可以使用范型定义接口、函数、类
  2. ts 中有接口 interface 的概念,可以用来描述一个对象、函数、类
  3. ts 中可以使用 type 来定义一个对象、函数和变量
  4. ts 中的类相对于 js 增加了范型,访问控制符private、public、protected
  5. ts 提供枚举类型 enum
  6. ts 提供方法重载功能,定义同名但是不同参数数量/类型和返回值的名函数签名,然后在后面定义一个实体函数涵盖不同签名的情况。可以是函数的使用更加灵活。

二、怎么用

2.1 接口你一般是怎么用的

ts 中的接口的定义使用的是 interface 这个关键字,作用

  1. 用来定义对象结构和类型的抽象方式,不具体实现
  2. 可以用在函数参数,类等各种地方
  3. 可以用于类的属性和方法检查,class 使用 implements 关键字来应用接口
  4. 接口可以使用 extends 关键字继承
  5. 重复定义的同名接口可以进行属性的合并
  6. interface Animal {name: string;speak(): void;
    }class Dog implements Animal {name: string;constructor(name: string) {this.name = name;}speak() {console.log(`${this.name} barks.`);}
    }
    

2.2 keyof 关键字怎么用

一句话,keyof 用于把一个【对象类型】的健组成一个联合类型。【记住联合类型这个单词】,keyof 作用域一个类型上面,返回的也是一个类型。

keyof 用于返回一个对象类型键组成的联合类型,有点类似于 Object.keys, 只不过前者作用在类型上,返回的是一个联合类型;后者作用在对象上,返回的是数组。

可以使用 keyof 访问对象的属性,还可以用于范型约束,最常用在函数的参数中,除此之外还可以创建各种联合类型。

这个时候就需要举一个例子,可以举 keyof 作为函数参数在范型约束中的应用,看下面的代码,用自己的话说一下。

function fn<T, K extends keyof T>(obj: T, key: K):T[K] {return obj[key]
}
  1. 比如我我们要实现一个函数,用于访问一个对象的值
  2. 可以定一个一个函数,传入两个参数,第一个参数是对象,第二个参数是 key
  3. 这个时候我们就需要使用范型约束一下,保证第二个参数时key 时第一个参数对象的key 的类型集合
  4. 定义对象为T,定义K extends keyof T
  5. 这样在函数中就可以使用两个参数和方括号,访问对象的属性了

详情可以参考这篇文章。

2.3 is 操作符怎么用

is 操作符是用于类型保护的,不能用在条件判断语句中,通常用在函数的返回值,用于判断一个对象是否属于某个类型。

  1. 左操作符是对象
  2. 右操作符是类型
  3. 用在函数的返回值
  4. 显式的指定返回值类型是一个布尔值

2.4 ts 中的命名空间和模块怎么用

ts 中模块和 js 模块用途一样,都是可以使用 exports / import 关键字进行变量或者类型的导出。只不过在 ts 中还可以导入、导出类型!

ts 中的模块和 js 中的模块一样,任何包含顶级import 或者export的文件都会当成一个模块,如果不带import或者export, 那么他的内容就会被视为全局的。

请看代码

关键是这行代码

Object.defineProperty(exports, "__esModule", { value: true });

这行代码通常出现在 TypeScript 编译后生成的 JavaScript 代码中,它的作用是标记一个模块为 ES 模块。

具体来说:

  • Object.defineProperty 是 JavaScript 中用来定义对象属性的方法之一。
  • exports 是 CommonJS 模块系统中的一个对象,用于导出模块中的内容。
  • "__esModule" 是一个特殊的属性名,用于指示当前模块是否为 ES 模块。
  • { value: true } 是一个对象字面量,表示将 "__esModule" 属性的值设置为 true

在 TypeScript 中,当你使用 ES 模块的语法(如 exportimport)导出和导入模块时,编译器会自动在输出的 JavaScript 代码中添加这行代码,以确保该模块被正确地标记为 ES 模块。这样做是为了在使用 CommonJS 模块系统加载 ES 模块时能够正确识别和处理它们。

这个时候就会问到 esm 和 commonjs 的区别了

  1. 语法不同 cjs 使用 modules.export / require
  2. esm 使用的是 import 、export 语法
  3. esm 导出值的引用,cjs 导出值的拷贝
  4. esm 是静态语法,编译的时候就知道哪些模块被使用,所以支持tree-shaking
  5. cjs 是动态语法,执行的时候才知道哪些模块被使用,不支持tree-skaking
  6. 具体参考这篇文章

命名空间,用于解决重名问题,不通命名空间之间的变量互不影响,同名也不会发生冲突。

  1. 可以使用命名空间名调用空间内的各种属性、类型、函数等
  2. 需要在外部使用命名空间的的属性,需要加上 export ,意味着导出当前命名空间
  3. 命名空间本质是一个对象,将一些列变量映射到一个对象的属性上
  4. 正常项目中很少用命名空间,多用于在.d.ts 文件中标记js库类型的时候使用,主要作用是给编译器编写代码的时候参考使用

还有一个常用的关键字是 declare,也是比较常用于 js 库,常用在 d,ts 文件中,为了编辑器不报错。

在 TypeScript 中,declare 关键字用于告诉编译器关于某些实体(通常是变量、函数、类、接口等)的类型信息,但它并不会真正创建这些实体。通常情况下,declare 用于描述一些已经存在于你的代码运行环境中的实体,比如全局变量、函数、或者库的类型定义。

2.5 ts 中的范型怎么用

这个是考的最多的题目,能回答上来是提高函数的复用性,但是不够,我们需要举个例子。

先说范型可以用在什么地方,然后再说怎么用,然后说有什么好处,最后一定要举个实际的例子,用自己的话总结一下。

  1. 我们在定义变量、函数、接口和类的时候都可以使用范型【用在什么地方】
  2. 在定义的时候不确定具体类型如 number 之类的,而是用一个占位符来指代某个类型,使用紧跟着函数名的【尖括号】来声明范型,【怎么用】
  3. 在实际使用函数、类或者类的时候才确定,参数、返回值、或者变量的类型,这样我们就不用重复声明多个类型不同的函数。
  4. 除了普通用法,还可以使用 extends +  keyof 来做范型约束【怎么用】
  5. 使用范型可以减少代码的重复性,提高代码的可复用性【有什么好处】
  6. 比如说我们有一个针对数组排序的方法,数组可能是字符串数组,也可以是数字数组,那么我门在定义这个方法的时候就可以使用范型,不预先定义数组元素的内容.这样针对不同类型的数字,我们可以只定义一个方法即可,减少很多工作量。
  7. function sortArray<T>(arr: T[]): T[] {return arr.slice().sort();
    }

这个范型每次都觉得说的挺好的,但是每次感觉面试官都不满意,愁死了。

2.6 元组是什么,怎么用

元组相当于一个可以装不同类型的数据的数组,可以使用数组的各种方法,但是元组和数组有以下不同点

  1. 对元组进行赋值或初始化的时候,要提供所有类型的项,而且位置要和类型的位置相对应
  2. 元组在初始化的时候,所有的类型和长度就确定了的
  3. 元组使用push 等方法扩展的时候,必须是已有类型的联合类型

三、区别

ts 中第二常见的面试题目就是问区别,因为 ts 中两个相似的关键字比较多,一定要注意。

3.1 ts 和 js  的区别

这个内容和第一章的答案一样,主要是说一下 ts 的好处,和ts 新增加的特性即可,不再赘述!

3.2 type 和 interface 的区别

这个是出现频率极高的题目,主要区别是

  1. interface 一般用来定义对象类型,且重复定义内容会合并,class 可以使用 implements 引用接口,使用 extends 关键字进行扩展
  2. type 可以定义任何数据类型,重复定义不会合并,会报错,使用&来创建联合类型和交叉类型
  3. 具体的区别可以参考这篇文章

3.3 never 和 void  的区别

没有返回类型 vs 永远不会发生,二者都常用于声明函数的返回值。

  1. never 表示永远不会发生,通常用于【抛出异常】或者【无限循环】,never可以赋值给任意类型,但是要给一个 never 类型的变量赋值,只能使用函数返回值的形式。
  2. void 代表没有返回任何类型,常用于函数没有返回值的情况,可以将 void 赋值给变量,但是这个变量只能接受 null 和 undefined或者any; 可以给 void 类型初始化赋值为 undefined
  3. 具体参考这篇文章。

3.4 any 和 unknown 的区别

  1. any 代表不做任何类型检查,类似写 js 代码,任何类型都可以赋值为any,any 也可以给任何类型赋值.
  2. unknown 代表未知类型, 任意类型都可以赋值为 unknown,但是 unknown 不能赋值给已知类型
  3. 具体参考这篇文章。

3.5 模块和命名空间的区别

ts 中的模块和 js 中的 esm 模块类似,都可以使用import / export 来导入导出,但是 ts 除了可以导出变量,也可以导出类型。

命名空间常用于避免命名冲突,使用命名空间来达到作用域隔离的效果,命名空间内的变量如果要在外部使用需要使用 export 进行导出,具体可以参照2.4的内容。

四、总结

内容不是很多,可能也不全面,但是还是记不住,特别是区别那块,可能会记住一部分,但是表达不清楚,这就需要多下功夫了。

内容仅供参考,如果有问题欢迎指出,因为我也还没有找到工作。

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

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

相关文章

第十四章大数据和数据科学4分

14.1 引言 14.1.3 科学理念 1.数据科学 数据科学将数据挖掘、统计分析和机器学习与数据集成整合&#xff0c;结合数据建模能力&#xff0c;去构建预测模型、探索数据内容模式。 数据科学依赖于&#xff1a; 1&#xff09;丰富的数据源。具有能够展示隐藏在组织或客户行为中不…

Swift 周报 第四十九期

文章目录 前言新闻和社区苹果公司公布重大调整143亿&#xff01;苹果这个瓜真的有点大啊 提案通过的提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编辑组自主整理周报的第四十九期&#xff0c;每个模块已初步成型。各位读者如果有好的提议&#x…

Springboot+Vue项目-基于Java+MySQL的非物质文化网站设计与实现(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

【Elasticsearch】Elasticsearch 从入门到精通(二):基础使用

《Elasticsearch 从入门到精通》共包含以下 2 2 2 篇文章&#xff1a; Elasticsearch 从入门到精通&#xff08;一&#xff09;&#xff1a;基本介绍Elasticsearch 从入门到精通&#xff08;二&#xff09;&#xff1a;基础使用 &#x1f60a; 如果您觉得这篇文章有用 ✔️ 的…

python来实现nmap扫描

今天分享一个用python实现nmap扫描的方法&#xff0c;以下是实现步骤 代码如下&#xff1a; import subprocessmissing_ips {166.139.144.163, 31.47.8.35, 58.242.86.191, 212.178.135.62, 103.1.35.114} port "7" for missing_ip in missing_ips:# 构造nmap命令…

web项目运行时,报了500错误(HTTP Status 500 – Internal Server Error)

web项目运行时&#xff0c;报了500错误&#xff08;HTTP Status 500 – Internal Server Error&#xff09; 文章目录 web项目运行时&#xff0c;报了500错误&#xff08;HTTP Status 500 – Internal Server Error&#xff09;前言一、 解决方法&#xff1a;Project Structure…

SpringMVC中的文件上传和中英文名称文件下载

一、文件上传 前端&#xff1a; <% page language"java" contentType"text/html;charsetUTF-8"pageEncoding"UTF-8"%> <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4…

指令和界面【Linux】

指令和界面 前言一、指令 vs 界面交互的需求满足需求的第一阶段——指令满足需求的第二阶段-界面时间 二、指令和界面交互区别为什么要学命令行总结 前言 Linux操作系统提供了丰富的命令行界面和图形用户界面工具&#xff0c;用户可以根据自己的需求选择适合的界面进行操作。命…

【编程Tool】小熊猫C/C++的安装使用及配置保姆级教程

目录 1.软件介绍 2.软件下载地址 3.安装 3.1.下载得到可执行文件 3.2. 双击可执行文件等待下载 3.3. 选择语言 3.4. 阅读协议并点击我接受 3.5. 组件保持默认并点击下一步(N) 3.6. 更换安装路径 3.7. 等待安装 3.8. 点击完成 4.配置及使用 4.1. 选择主题及语言 4.2. 进入默认界…

拼多多面试题——力扣版测试用例纠错

最近我看到力扣上这个题目&#xff0c;用了三种方法&#xff0c;结果没有一种正确&#xff0c;我就纳闷儿了&#xff0c;为何总有一个测试用例过不了&#xff0c;结果我发现这个测试用例确实有问题啊。。。。。 题目&#xff1a; 表&#xff1a;Logs ----------------------…

架构师系列-MYSQL调优(八)- 索引多表优化案例

用户手机认证表 该表约有11万数据,保存的是通过手机认证后的用户数据关联字段: user_id CREATE TABLE mob_autht (id int(11) NOT NULL AUTO_INCREMENT COMMENT 标识,user_id int(11) NOT NULL COMMENT 用户标识,mobile varchar(11) NOT NULL COMMENT 手机号码,seevc_pwd varc…

图像处理技术与应用(一)

图像处理技术与应用入门 使用skimage进行图像读取和显示 skimage库&#xff08;Scikit-image&#xff09;提供了一个强大的工具集&#xff0c;用于执行各种图像处理任务。以下是如何使用skimage读取和显示图像的基本示例&#xff1a; from skimage import ioimg io.imread(…

LLama的激活函数SwiGLU 解释

目录 Swish激活函数 1. Swish函数公式 LLaMA模型中的激活函数 1. SwiGLU激活函数 2. SwiGLU激活函数的表达式 3. SwiGLU激活函数的优势 Swish激活函数 Swish是一种激活函数&#xff0c;其计算公式如下&#xff1a; 1. Swish函数公式 Swish(x) x * sigmoid(x) 其中&am…

【CMake】CMake从入门到实战系列(十)——CMake中的条件语句和循环语句

文章目录 前言一、条件语句1、if 语句【1】基本语法【2】参数含义【3】示例 二、循环语句1、foreach 循环foreach 循环之 基本用法【1】基本语法【2】参数含义【3】示例 foreach 循环之 RANGE 关键字【1】基本语法【2】参数含义【3】示例 foreach 循环之 IN 关键字【1】基本语法…

什么是大语言模型以及如何构建自己的大型语言模型?

一、关于大语言模型 LLM 对于无数的应用程序非常有用&#xff0c;如果我们自己从头开始构建一个&#xff0c;那我们可以了解底层的ML技术&#xff0c;并可以根据特定需求定制LLM&#xff0c;但是对资源的需求巨大。大型语言模型是一种 ML 模型&#xff0c;可以执行各种自然语言…

Quartz - 任务调度

文章目录 关于 QuartzQuartz的体系结构核心概念设计模式 常用API基本使用 关于 Quartz 官网&#xff1a;https://www.quartz-scheduler.orggithub : https://github.com/quartz-scheduler/quartz文档&#xff1a;https://www.quartz-scheduler.org/documentation/ 相关教程/博…

autodesk系列软件打开提示Flexnet License Finder

错误如图 解决方法如下 打开autoremove&#xff0c;点击扩展功能&#xff0c;输入flex&#xff0c;点击搜索 选择对应的这个按钮&#xff0c;点击&#xff0c;提示修复成功即可尝试打开软件

深入学习Linux中的“文件系统与日志分析”

目录 1.文件系统的组成 1.1inode和block 1.2inode的内容 1.3inode的号码 ​1.4文件存储小结 ​1.5inode大小 1.6inode的特殊作用 2. 链接文件 3.文件恢复 3.1EXT类型文件恢复 3.2磁盘有空间&#xff0c;但是仍然无法写入新文件 3.3恢复XFS类型的文件 3.3.1xfsdump…

Unity 中(提示框Tweet)

using UnityEngine; using UnityEngine.UI; using DG.Tweening; using System; public class Message : MonoBehaviour {public float dropDuration 0.5f; // 掉落持续时间public float persisterDuration 1f; // 持续显示时间public float dorpHeight;public static Message…

vue【vuex状态管理】

1&#xff1a;vuex是什么&#xff1a; vuex是一个状态管理工具&#xff0c;状态就是指的数据&#xff0c;可以将数据存放到vuex中以供其他组件使用时进行调用 2&#xff1a;应用场景&#xff1a; ①&#xff1a;像用户登录客户端&#xff0c;这个用户的数据需要在多个组件中…