前端面试题精心整理(一)-TypeScript

2023-10-26

TypeScript相关问题及知识点

Q1: ts中type和interface的区别?

A1: 有相同点与不同点,具体内容如下。

1. 相同点
(1) 两者都可以定义对象和函数。

interface:

 interface Person{
  name: string;
  age: number;
}
interface SetPerson {
  (name: string, age: number): void;
}

type:

type Person= {
  name: string;
  age: number
};
type SetPerson = (name: string, age: number)=> void;

(2) 都可以继承。
interface 定义的对象用extends继承,type&继承。二者之间可以用前面提到的自己的语法互相继承。

2. 不同点:
(1)interface可以声明合并,即声明了多个同样名称的接口可以合并成一个,而type不行。

interface Pesron{
  name: string;
  age: number;
}
interface Person{
  sex: string;
}
/*
Person接口为 {
  name: string;
  age: number;
  sex: string ;
}
*/

(2) type可以声明:基本类型的别名、联合类型、元组等类型,而interface不行。

 // 别名
type Empty=null;
// 联合类型
interface Person1{
	sayHi();
}
interface Person2{
	eat();
}
type Person = Person1 | Person2;
type ex = number | string;
// 元组 数组中元素的数据类型都一般是相同的(any[] 类型的数组可以不同),如果存储的元素数据类型不同,则需要使用元组。
type tuple=[1,'good'];
//type 语句中可以使用 typeof 获取实例的类型进行赋值
let tem = new Number();
type B = typeof tem;

(3)还有其他复杂操作,泛型等。

Q2: ts中interface和class的区别? 分别什么时候使用?

A2: interface和class都能定义数据模型。区别:……

区别:interface只是用来声明对象类型或方法,不做实现;而class是类的声明并实现。

  • 简单的数据模型,直接用于展示的,用 interface 进行定义;
  • 比较复杂的数据模型,有字段属性定义以及一些方法,就需要使用 class 。里面还有constructor构造函数。
  • interface 只在编译时用于类型检查,class 编译完成之后实际上就是 javascript 中的原型(prototype)。
    接口可以通过extends继承类,类可以通过implements去实现接口。有个很好的例子帮助理解。

Q3: ts中的泛型有什么了解?

A3: 案例

1. 不用泛型的话,这个函数可能是下面这样:

function identity(arg: number): number {
    return arg;
}

或者,我们使用any类型来定义函数:

function identity(arg: any): any {
    return arg;
}

any的情况,可以是任何类型。因此,我们需要一种方法使返回值的类型传入参数的类型是相同的。 这时,就用到了T,类型变量,它是一种特殊的变量,只用于表示类型而不是值。

function identity<T>(arg: T): T {
    return arg;
}

这样就可以跟踪函数里使用的类型信息

2. 泛型的使用方法有两种:

此处参考官方文档改写。
(1) 尖括号的形式:
let output = identity< string> (“myString”);// type of output will be ‘string’
这里明确的指定了Tstring类型,并做为一个参数传给函数,使用了<>括起来。

(2) 利用了类型推论,即编译器会根据传入的参数自动地帮助我们确定T的类型:
let output = identity(“myString”); // type of output will be ‘string’

本文为原创文章,转载请注明出处。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端面试题精心整理(一)-TypeScript 的相关文章

  • 裁剪响应式全宽图像

    我必须剪辑跨越整个宽度的图像 以下事情对我不起作用 剪辑 这需要绝对位置 因此块元素不会堆叠在下面 背景位置 缩放时无法正确剪辑 放大时剪辑的部分会增加 反之亦然 包装器 包装器高度取决于浏览器宽度 因此其值应该是动态的 我使用了 seti
  • 是否有正确的方法将自定义 Javascript 添加到 ASP.NET MVC 5 页面?

    目前 我已将 jQuery 源文件添加到 ASP NET 项目的 Scripts 文件夹中 在 Layout cshtml 页面中 我包含了 Scripts jquery 2 1 1 min js 现在 我可以在我制作的每个页面上包含 jQ
  • 如何在 Angular 中实现全局加载器

    我有一个全局加载器 其实现如下 核心模块 router events pipe filter x gt x instanceof NavigationStart subscribe gt loaderService show router
  • Nightmare.js 截图缓冲区长度 0

    我正在运行一个 night js 脚本 我试图在其中截取页面上多个元素的屏幕截图 The first元素被捕获得很好 但折叠下方的所有其他元素都以零长度捕获 我正在努力调试这个问题 任何帮助将非常感激 基本上这个脚本会遍历一个页面并选择al
  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单
  • 如何根据本地存储中的另一个数据响应推迟 XMLHttpRequest [重复]

    这个问题在这里已经有答案了 function to download pps compress txt from cloud server for global parameter set PPs function get pps para
  • 对 UPDATE 行的 POST 请求

    我是 javascript 的新手 所以我正在寻找一些帮助来创建一种拖放地理编码标记的方法 以允许交互式更改地址 我相信通过更新 LOCATION 列行可以实现这一点 第一步是 发送 POST 请求 对吧 好吧 所以我想问是否有人可以给我看
  • jQuery/JavaScript“this”指针混淆

    当函数时 this 的行为bar被称为让我困惑 请参阅下面的代码 当从单击处理程序调用 bar 时 有什么方法可以将 this 安排为普通的旧 js 对象实例 而不是 html 元素 a class with a method functi
  • 谷歌colab录音,如何实现更精确的方式告诉用户开始对着麦克风说话

    我正在尝试创建一个为机器学习项目录制音频的程序 我想使用 google colab 这样人们就不必在他们的系统上安装或运行任何东西 我在网上找到了这个录制和播放音频的示例 单元格 1 包含用于录制音频的 js 代码和用于将其转换为字节对象的
  • Meteor:即使设置了 ANDROID_HOME 也未设置

    操作系统 Ubuntu 14 04 框架 流星1 1 0 2 应用名称 Songofy 这是输出meteor install sdk android meteor install sdk android Found Android bund
  • ajax调用后如何停止刷新页面?

    ajax 调用后我无法停止刷新页面 我尝试过放置 e preventDefault 并返回 false 但我的页面又刷新了 我不知道代码有什么问题或者什么 请帮助我在ajax调用后停止刷新页面 解决这个问题对我来说会有很大的帮助 提前致谢
  • 防止 Firefox Web 通知自动关闭

    我已经在 Firefox 中将 Web 通知与服务器发送的 DOM 事件结合使用 不幸的是 通知在大约两到三秒后消失 我更喜欢 Chrome 的方法 即让消息保持可见 在任何给定时间最多显示三个 直到用户单击通知 这是我所拥有的 windo
  • 将 ngModel 绑定到自定义指令

    所以我已经在这个问题上工作了一个星期了 但我似乎无法理解整个指令的事情 我读了很多帖子 揭秘指令 http www toptal com angular js angular js demystifying directives 指令 ht
  • 如何在vuetify中设置固定工具栏?

    在 vuetify 中我使用工具栏
  • 如何将多个画布元素放入一个画布元素中?

    我有多个由 JavaScript 创建的画布元素 我的问题是 如何将多个画布元素放入一个画布元素 干得好 JSfiddle http jsfiddle net Allendar UqxCY 它会抓取每个画布并将它们做成 PNG 的 访问缓冲
  • 电子节点集成不起作用,也普遍奇怪的电子行为[重复]

    这个问题在这里已经有答案了 我是 Electron 的新手 我一直在努力让它工作 我遇到了无法解释的行为 所以这里有一个总结 我无法让 Electron 和 html 之间的通信正常工作 即使我有nodeIntegration true 网
  • 如何比较 JavaScript 表格中的单元格并测试是否相等? indexOf 是如何工作的?

    我在 HTML 代码中创建了一个表格 它有 9 列和 13 行 它被 JavaScript 循环完全填满 该循环用几个数组中的人名填充它 但是 我想添加一个验证步骤 确保一行中没有两个单元格具有相同的值 并且每个单元格的值不会在其正下方的单
  • 如何在不接受焦点的元素上捕获键盘事件?

    我知道要处理输入字段中的键盘事件 您可以使用 input keyup function e var code e keyCode and 13 is the keyCode for Enter 但是 现在 我有一些div and li元素
  • iOS 上 Safari 中的 shift 键

    有没有办法在javascript中判断手机键盘上是否按下了shift键 并将其与大写锁定 按两次shift键 区分开来 一些事实 首先 让我们看一下有关 iOS 键盘的一些事实 我假设您已经知道了 当您进入键盘模式时 shift键始终处于激
  • 阻止 Chrome 扩展程序的 popup.html 自动打开

    我正在创建一个 Chrome 扩展程序 其中包含background html每分钟从 API 请求一次信息的文件 收到信息后 它会发送消息popup html弹出窗口使用 JSON 信息将新的 HTML 元素附加到弹出窗口的主体上 问题是

随机推荐

  • [计算机毕业设计]食品安全数据的关联分析模型的应用

    前言 大四是整个大学期间最忙碌的时光 一边要忙着准备考研 考公 考教资或者实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近几年各个学校要求的毕设项目越来越难 有不少课题是研究生级别难度的 对本科同学来说是充满挑战 为帮助大
  • angular6学习(七):样式设置和调用

    样式调用是在app component ts中调用app component css设置 外置调用 也可内置调用 一 外置调用 在html文件中添加h3标签 在css文件中设置h3样式 显示如下 一 内置调用 在 ts文件中设置h3样式 显
  • 远程计算机已加入AAD凭据不工作

    解决方法 计算机需要加入AAD Azure Active Directory 设置 账户 其他用户 连接工作或学校用户 连接 在下方的 替代操作 中选择 将此设备加入 Azure Active Directory 输入用户名和密码 点击加入
  • 学习日记——STM32CubeMX软件应用(2020.1.31)

    STM32CubeMX的定义 STM32CubeMX是ST公司主动原创的一款代码生成工具 它可以减轻开发时间和费用 相当于一种偷懒的做法 STM32CubeMX集成了一个全面的软件平台 支持STM32每一个系列的MCU开发 STM32Cub
  • 【idea】IDEA常用断点详解

    一 断点条件过滤 场景 过滤条件i lt 10 1 标注断点 点击需要调试的代码行 2 鼠标悬浮在断点上 右击 在condition中输入条件 如 i 10 点击done按钮 3 确认条件是否生效 鼠标悬浮断点 显示所填写的条件 4 点击右
  • 搭建个人网站vm+center os+apache

    如何搭建个人网站 准备的前提 vm cnetos 7 apche 在vm上安装center os的教程就不介绍了这个有很多 1 如何配置一台刚装好了center os 7并且能够使他联网 ping 通百度 ip a查看当前ip地址 如果显示
  • 微信小程序:环形进度条模块

    利用canvas实现微信小程序环形进度条模块 模块下载链接 下载链接 最近开发一款背单词的微信小程序 计划使用环形进度条展示每日背单词进度 效果图如下 可渐变颜色 开发步骤 1 在根目录创建名为components的文件夹 用来放需要引用的
  • java链式编程/级联式编程

    链式编程 也叫级联式编程 调用对象的函数时返回一个this对象指向对象本身 达到链式效果 可以级联调用 链式编程 通过高阶函数以点为连接将多个函数连接在一起完成参数传递和复杂的操作 通俗的说是通过点号 链接在一起成为一句代码 链式编程的优点
  • sqli-labs-less-1完整解析,小白干货

    Less 1 Sql知识点 Limit x y 从x 1行开始输出 共输出y行 Order by 排序 asc升序 默认 desc 降序 Union MySQL执行两条SELECT语句 并把输出组合成单个查询结果集 Group concat
  • Java后端返回前端的日期差9小时?

    当后端返回Date类型到前端的时候 需要在实体中增加 JsonFormat注释 这个可以帮我们处理格式化 很多人都是用下面这种写法 JsonFormat locale zh timezone GMT 8 pattern yyyy MM dd
  • win10蓝牙已配对连接不上_Win10系统蓝牙配对手机连接不成功的解决方法

    Win10系统蓝牙配对手机连接不成功的解决方法 很多的Win10用户都在使用蓝牙连接手机 一些网友在连接时出现win10系统蓝牙已配对但连接不成功 出现在这样的问题怎么解决呢 下面我们来看看Win10镜像官网给大家带来的解决方法 Win10
  • 封装,继承和多态详解

    封装 继承和多态是 C 中三个重要的面向对象编程技术 本文将详细介绍这些技术的概念 原理和用法 以帮助读者更好地理解并应用它们 一 封装 封装是一种面向对象编程的基本概念 它指的是将数据和方法封装在一个对象内部 防止外部通过对象的公共接口直
  • 一文看懂IC芯片生产流程:从设计到制造与封装

    origin http forum esm cn com FORUM POST 1000163993 1201257744 0 HTM ga 1 101949507 338942905 1436813394 芯片制造的过程就如同用乐高盖房子
  • 深度学习和因果如何结合?北交最新《深度因果模型》综述论文,31页pdf涵盖216篇文献详述41个深度因果模型...

    来源 专知 北京交通大学最新 深度因果模型 综述论文 31页pdf涵盖216页pdf详述41个深度因果模型 值得关注 因果关系概念在人类认知中起着重要作用 在过去的几十年里 因果推理在计算机科学 医学 经济学和教育等许多领域都得到了很好的发
  • 关于504报错的解决方法之一

    项目场景 记录一些工作遇见的bug 项目场景 使用命令 npm start 运行代码打开网页 报504 打开失败 问题描述 提示 这里描述项目中遇到的问题 使用命令 npm start 运行代码打开网页 报504 打开失败 原因分析 504
  • 运行java程序报java/lang/NoClassDefFoundError: java/lang/Object

    今天直接将解压后的jre文件放到linux上 执行java命令 报如下错误 Error occurred during initialization of VM java lang NoClassDefFoundError java lan
  • 【头歌】Hadoop开发环境搭建

    本来不想写这个了 就为了搞这实验截图 又得敲一遍这个代码 代码量真的大 我真的是吐了呀 MD 大家反正写过 直接粘贴是最佳选择 没必要自己再做一遍 第1关 配置开发环境 JavaJDK的配置 任务描述 本关任务 配置 JavaJDK 相关知
  • Cadence Allegro 17.4学习记录开始00

    目录 Cadence Allegro 17 4学习记录绪论 第一 先来说说Cadence Allegro 17 4的原因 第二 简单介绍这个EDA软件Cadence Allegro 17 4 第三 学习规划 1 Cadence Allegr
  • java ssh项目 定时任务时,jdbc线程池耗尽问题

    场景 在ssh项目中 用spring自带的schedule创建了个定时任务 服务启动时自动调用任务 在任务执行一段时间后 报了 xxx active 150 maxActive 150错误 原因 spring自带的schedule创建的定时
  • 前端面试题精心整理(一)-TypeScript

    文章目录 TypeScript相关问题及知识点 Q1 ts中type和interface的区别 A1 有相同点与不同点 具体内容如下 Q2 ts中interface和class的区别 分别什么时候使用 A2 interface和class都