前端面试热点题目——typescript篇

news/2024/9/19 12:06:33/ 标签: javascript, typescript

在TypeScript面试中,面试官通常会考察你对TypeScript特性的理解、类型系统的掌握、以及在实际项目中的应用能力。以下是一些热点题目及其相应的代码示例,旨在帮助你准备TypeScript相关的面试。

1. 类型别名与接口的区别及使用场景

问题:请解释类型别名(Type Aliases)和接口(Interfaces)之间的主要区别,并给出使用场景。

答案

  • 类型别名:用于给类型起一个新名字,可以是基本类型、联合类型、交叉类型、数组类型等。它更灵活,但不能被extends或implements(仅当类型别名是对象或类类型时,可以用在extends或implements的右侧)。
  • 接口:主要用于定义对象的形状,它可以包含方法(抽象或具体)、属性等。接口可以被extends和implements。

代码示例

// 类型别名  
type Name = string;  
type UserInfo = {  name: Name;  age: number;  
};  // 接口  
interface IPerson {  name: string;  greet(phrase: string): void;  
}  class Person implements IPerson {  name: string;  constructor(name: string) {  this.name = name;  }  greet(phrase: string) {  console.log(`${phrase}, ${this.name}!`);  }  
}  // 使用场景:当你需要一个简单的类型引用时,使用类型别名;当需要定义对象形状或继承时,使用接口。

2. 泛型(Generics)的使用

问题:请解释什么是泛型,并给出一个使用泛型的函数示例。

答案:泛型是一种在编译时定义类型但在运行时保持灵活性的方法。它允许你编写灵活、可重用的函数、类或接口。

代码示例

// 泛型函数示例  
function identity<T>(arg: T): T {  return arg;  
}  let output = identity<string>("myString");  // 类型参数为string  
let outputNum = identity(42);               // 类型参数为number,TypeScript会自动推断  // 泛型接口示例  
interface GenericIdentityFn<T> {  (arg: T): T;  
}  let myIdentity: GenericIdentityFn<number> = identity;

3. 枚举(Enumerations)与常量(Constants)的区别

问题:请阐述枚举(Enumerations)与常量(Constants)之间的主要区别。

答案

  • 枚举:是一种特殊的类,它包含了一组命名的常量。枚举成员可以是数字、字符串甚至是计算值(只要成员之间有明确的差异)。枚举提供了一种描述一组命名常量的方法,使得代码更加清晰。
  • 常量:通常使用const关键字定义,表示其值在初始化之后不可更改。它可以是任何类型。

代码示例

enum Color {Red, Green, Blue};  
let c: Color = Color.Green;  const PI = 3.14;  
// PI = 3.15; // 这会引发编译错误

4. TypeScript中类属性的初始化时机

问题:在TypeScript中,类属性的初始化时机是怎样的?

答案

  • 类属性可以在声明时直接初始化(称为实例属性初始化器)。
  • 也可以在构造函数中初始化。
  • 如果类属性是静态的,则它可以在类体内部直接初始化。

代码示例

class Person {  // 实例属性初始化器  name: string = "John";  age: number;  // 静态属性  static staticProperty = "I am static";  constructor(age: number) {  this.age = age;  }  
}  console.log(new Person(30).name); // John  
console.log(Person.staticProperty); // I am static

5.解释一下 TypeScript 中的 interface 和 type 有什么区别?

答案概述

  • interface 通常用于定义对象的形状,可以被多次声明并合并,支持继承其他接口。
  • type 更为灵活,支持联合类型、元组、字面量类型等复杂类型,但不能被多次声明(除非使用类型别名)。

示例代码

// Interface 示例  
interface User {  name: string;  age: number;  
}  interface UserWithEmail extends User {  email: string;  
}  const user: UserWithEmail = {  name: 'John Doe',  age: 30,  email: 'john@example.com'  
};  // Type 示例  
type Name = string;  
type Age = number;  
type UserType = {  name: Name;  age: Age;  email?: string; // 可选属性  
};  const anotherUser: UserType = {  name: 'Jane Doe',  age: 25  
};

4. TypeScript 中如何声明一个模块?

答案概述
在 TypeScript 中,模块是用来封装变量、函数、类、接口等对象的容器。

示例代码

math.ts

export function add(a: number, b: number): number {  return a + b;  
}  export function subtract(a: number, b: number): number {  return a - b;  
}

main.ts

import { add, subtract } from './math';  console.log(add(1, 2)); // 输出 3  
console.log(subtract(5, 3)); // 输出 2

http://www.ppmy.cn/news/1523323.html

相关文章

react js 笔记 3

起因&#xff0c; 目的: 专注。 学习 react js 的时候&#xff0c; 就专注这一方面 &#xff0c;其他都不要碰。 比如&#xff0c; python, C语言&#xff0c; R, 都不看。 只看 js.专注&#xff0c;减少来回切换。 重复。 自己写的笔记&#xff0c;需要反复多看几遍&#xff…

java开发后端

1.BeanUtils.toBean 方法 它是一个常见的 Java 工具方法&#xff0c;用于将一个 JavaBean 对象转换为另一个 JavaBean 对象 FlowOrderDO flowOrder BeanUtils.toBean(createReqVO, FlowOrderDO.class); 这行代码使用了 BeanUtils.toBean 方法&#xff0c;它是一个常见的 Ja…

MySQL笔记2(DQL查询语言【条件、分组、排序、限制、子查询、左右连接、内连接、联合查询】)

DQL数据查询语言与项目高级查询实战 先安装数据库并创建一个库 并创建以下数据 /*创建部门表*/CREATE TABLE dept( deptnu INT PRIMARY KEY comment 部门编号, dname VARCHAR(50) comment 部门名称, addr VARCHAR(50) comment 部门地址 );/*某个公司的员工表*/ CREATE TABLE…

html备忘录

备忘录 网站收藏数据&#xff1a; 网站收藏.js const webLinks [{ title: "智能翻译", src: "https://fanyi.baidu.com" },{ title: "哔哩哔哩", src: "https://www.bilibili.com" },{ title: "百度一下&#xff0c;你就知道&…

漫谈设计模式 [9]:外观模式

引导性开场 菜鸟&#xff1a;老鸟&#xff0c;我最近在做一个项目&#xff0c;感觉代码越来越复杂&#xff0c;我都快看不懂了。尤其是有好几个子系统&#xff0c;它们之间的调用关系让我头疼。 老鸟&#xff1a;复杂的代码确实让人头疼。你有没有考虑过使用设计模式来简化你…

微信支付开发避坑指南

1 微信支付的坑 1.1 不能用前端传递过来的金额 订单的商品金额要从数据库获取&#xff0c;前端只传商品 id。 1.2 交易类型trade type字段不要传错 v2版API&#xff0c;不同交易类型&#xff0c;要调用的支付方式也不同。 1.3 二次签名 下单时&#xff0c;在拿到预支付交…

记录深度学习量化操作

0. 简介 深度学习中做量化提升运行速度是最常用的方法&#xff0c;尤其是大模型这类非常吃GPU显存的方法。一般是高精度浮点数表示的网络权值以及激活值用低精度&#xff08;例如8比特定点&#xff09;来近似表示达到模型轻量化&#xff0c;加速深度学习模型推理&#xff0c;目…

MySQL表的操作与数据类型

目录 前言 一、表的操作 1.创建一个表 2.查看表的结构 3.修改表 4.删除一个表 二、 MySQL的数据类型 0.数据类型一览&#xff1a; 1.整数类型 2.位类型 3.小数类型 4.字符类型 前言 在MySQL库的操作一文中介绍了有关MySQL库的操作&#xff0c;本节要讲解的是由库管理的结构——…

TinyWebSever源码逐行注释(三)_ thread_pool.cpp

前言 项目源码地址 项目详细介绍 项目简介&#xff1a; Linux下C轻量级Web服务器&#xff0c;助力初学者快速实践网络编程&#xff0c;搭建属于自己的服务器. 使用 线程池 非阻塞socket epoll(ET和LT均实现) 事件处理(Reactor和模拟Proactor均实现) 的并发模型使用状态机…

python基础语法四-数据可视化

书接上回&#xff1a; python基础语法一-基本数据类型 python基础语法二-多维数据类型 python基础语法三-类 1. plot函数绘制简单折线图 (1)需要的模块&#xff1a;matplotlib.pyplot (2)语法&#xff1a;matplotlib.pyplot.plot(x, y, format_string, **kwargs) x: x轴数…

C语言程序设计-练习篇

不知道结果仍义无反顾地才是勇士。 三&#xff0c;打印整数二进制的奇数位和偶数位 题目内容&#xff1a; 获取一个整数二进制序列中所有的奇数位和偶数位&#xff0c;分别打印出二进制序列 #include <stdio.h>//打印整数二进制的奇数位和偶数位 int main() {int i 0…

C语言从头学55——学习头文件errno.h、float.h

1、头文件 errno.h 中的变量 errno 的使用 在 errno.h 定义了一个 int 类型的变量 errno&#xff08;错误码&#xff09;&#xff0c;如果发现这个变量出现非零值&#xff0c;表示已经执行的函数发生了错误。这个变量一般多用于检查数学函数运算过程中发生的错误。 …

Vue面试题——项目介绍以及SPA介绍

谈谈你开发的项目背景与、架构和技术栈 项目背景 假设我们正在开发一个名为“智慧旅游助手”的Web平台。该平台旨在为用户提供一站式的旅游服务&#xff0c;包括目的地推荐、酒店预订、行程规划、在线购票&#xff08;如门票、机票&#xff09;、旅游攻略分享以及基于地理位置…

不到200行代码,一键写出简单贪吃蛇网页游戏!附详细代码!快来看看吧!

​哈喽大家好&#xff0c;这里是大白百宝阁&#xff0c;每天分享一段小代码~ 今天要分享的是&#xff0c;不到200行代码&#xff0c;制作html版贪吃蛇&#xff0c;效果如下&#xff1a; 游戏结束后&#xff0c;还会显示&#xff1a; 代码如下&#xff1a; <!DOCTYPE html&g…

传统CV算法——边缘算子与图像金字塔算法介绍

边缘算子 图像梯度算子 - Sobel Sobel算子是一种用于边缘检测的图像梯度算子&#xff0c;它通过计算图像亮度的空间梯度来突出显示图像中的边缘。Sobel算子主要识别图像中亮度变化快的区域&#xff0c;这些区域通常对应于边缘。它是通过对图像进行水平和垂直方向的差分运算来…

基于Java+SpringBoot+Vue+MySQL的美容美发管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于SpringBootVue的美容美发管理系统【附源码文档】、前后…

【Visual Studio 报错】vs 在使用二进制写入文件时弹窗报错:使用简体中文 gb2312 编码加载文件

如以下报错 解决办法 解决方法&#xff1a;文件->高级保存选项->将文件编码形式改为“UTF-8带签名” 若找不到高级保存选项&#xff0c;可以跟着下面路径把该选项调出来 &#xff1a;工具->自定义->命令->菜单栏中改成文件->预览右边点添加命令->类别中…

第二证券:涨停潮!传手机将使用钛金属外壳?

今天早盘&#xff0c;银行股再度重挫&#xff0c;导致上证指数、上证50纷乱创出阶段性新低&#xff0c;上证指数跌破2800点&#xff0c;小盘成长股则大面积反弹&#xff0c;创业板指、科创50等股指飘红。 盘面上&#xff0c;新式烟草、钛金属、锂矿、玻璃基板等板块涨幅居前&a…

全球性“微软蓝屏”事件的深思:网络安全与系统稳定性的挑战与应对

近日&#xff0c;由于微软视窗系统软件更新引发的全球性“微软蓝屏”事件&#xff0c;成为科技领域的热点新闻。这次事件不仅影响了全球约850万台设备&#xff0c;波及航空、医疗、传媒等关键行业&#xff0c;还导致美国超过2.3万架次航班延误。如此规模的系统中断&#xff0c;…

【Shiro】Shiro 的学习教程(三)之 SpringBoot 集成 Shiro

目录 1、环境准备2、引入 Shiro3、实现认证、退出3.1、使用死数据实现3.2、引入数据库&#xff0c;添加注册功能后端代码前端代码 3.3、MD5、Salt 的认证流程 4.、实现授权4.1、基于角色授权4.2、基于资源授权 5、引入缓存5.1、EhCache 实现缓存5.2、集成 Redis 实现 Shiro 缓存…