”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 【面试精要】常见TypeScript面试题

【面试精要】常见TypeScript面试题

发布于2024-11-01
浏览:125

【Interview Essentials】ommon TypeScript Interview Questions

github:https://github.com/Jessie-jzn
网站:https://www.jessieontheroad.com/

1. 为什么使用 TypeScript?

1。静态类型检查

TypeScript 的核心优势是其静态类型检查,这有助于在编译阶段而不是运行时捕获常见错误。这增强了代码的可靠性和稳定性。

2.增强的代码编辑体验

TypeScript 的类型系统可以在编辑器中实现更准确的代码补全、重构、导航和文档功能,从而显着提高开发效率。

3.提高代码可维护性

类型声明使理解代码意图和结构变得更容易,这在团队开发环境中特别有益。

4。高级语言功能

TypeScript 支持 JavaScript 中不存在的高级功能,例如接口、枚举和泛型,有助于开发更加结构化和可扩展的代码。

5。更好的工具支持

TypeScript 提供了各种编译器选项来优化生成的 JavaScript 代码,并通过将 TypeScript 编译为兼容的 JavaScript 来支持不同的 JS 环境。

2. TypeScript 与 JavaScript

TypeScript JavaScript
类型系统 带有编译时类型检查的静态类型。可以为变量、函数参数和返回值指定类型。 带有运行时类型检查的动态类型,这可能会导致与类型相关的运行时错误。
类型注释 支持类型注释来显式定义类型。例如,让 name: string = "Alice"; 没有类型注释。类型在运行时确定。
汇编 需要编译为 JavaScript。 TypeScript 编译器检查类型错误并生成等效的 JavaScript 代码。 直接在浏览器或 Node.js 中运行,无需编译步骤。
面向对象编程 更丰富的 OOP 功能,例如类、接口、抽象类和访问修饰符。 具有基于原型的继承的基本 OOP 功能。
高级功能 包括所有 ES6 和 ES7 功能,以及泛型、枚举和装饰器等附加功能。 支持 ES6 及更高版本的标准,但缺少 TypeScript 提供的一些高级功能。

3. TypeScript 中的基本数据类型

  • 布尔值:代表真或假值。
  • 数字:表示整数和浮点数。
  • String:表示文本数据,使用单引号或双引号。
  • Array:表示指定类型的值的集合,使用type[]或Array.
  • 元组:表示一个包含固定数量指定类型元素的数组。
  • Enum:表示一组命名常量。
  • Any:表示任意类型的值。不提供类型检查。
  • Void:表示没有值,常用作不返回值的函数的返回类型。
  • Null 和 Undefined:分别表示没有值和未初始化状态。
  • Never:表示永远不会出现的值,例如抛出错误或无限期运行的函数。
  • Object:表示非原始类型。

4. TypeScript 中的泛型是什么?它们是如何使用的?

泛型允许函数、类和接口与任何类型一起使用,同时仍然强制执行类型安全。

例子:

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

const numberIdentity = identity(42);
const stringIdentity = identity("Hello");

在此示例中,恒等函数使用通用 ,允许它接受和返回任何类型的值。

5. TypeScript中unknown和any的区别

  • any Type:表示任意类型的值并绕过所有类型检查。它可以被赋予任何值,无需类型检查。
  • unknown Type:表示未知类型。未知类型的值在使用之前必须进行检查,这提供了一种更安全的方法来处理类型不确定的值。
let anyVar: any;
let unknownVar: unknown;

anyVar = 5;
anyVar.toUpperCase(); // No compile-time error, but might cause runtime error

unknownVar = "Hello";
if (typeof unknownVar === "string") {
  unknownVar.toUpperCase(); // Type check ensures safety
}

6. readonly修饰符与const关键字的区别

  • readonly 修饰符:用于对象属性,使其在初始化后不可变。
  • const 关键字:用于声明具有不可变引用的变量。对象的属性仍然可以修改。
const obj = { name: "John" };
obj.name = "Doe"; // Allowed

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "John" };
user.name = "Doe"; // Allowed
user.id = 2; // Error, `id` is readonly

7. TypeScript 中的装饰器

装饰器是一种特殊的 TypeScript 功能,允许添加元数据或修改类、方法、属性或参数。

类型:

  • 类装饰器:应用于类构造函数以修改类行为或添加元数据。
  • 方法装饰器:应用于方法以更改其行为或添加元数据。
  • 访问器装饰器:用于获取或设置访问器以修改其行为。
  • 属性装饰器:应用于类属性以添加元数据或修改其行为。
  • 参数装饰器:应用于方法参数以添加元数据。

示例:

  • 类装饰器:
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return `Hello, ${this.greeting}`;
  }
}

  • 方法装饰器:
function logMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyName} called with args: ${JSON.stringify(args)}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a   b;
  }
}

用法:

装饰器通过在 tsconfig.json 中将experimentalDecorators设置为 true 来启用。

8. 接口和类型的区别

interfacetype都是用来定义对象类型的,但是它们有一些区别:

界面 类型
基本用法 定义对象的形状,包括属性和方法。 定义基本类型、对象类型、联合类型、交集类型等
扩大 支持声明合并。同一接口的多个声明会自动合并。 不支持声明合并。
并集和交集类型 不支持。 支持联合(`
基本类型别名 不支持。 支持基本类型别名。
映射类型 不支持。 支持映射类型。
类实现 使用 Implements 支持类实现。 不支持直接类实现。

这些问题和答案应该涵盖基本概念和实际用法,有助于为 TypeScript 面试做好准备。

版本声明 本文转载于:https://dev.to/jessie_chen_4d333540e0c71/interview-essentials-8-common-typescript-interview-questions-4jki?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    postgresql:为每个唯一标识符在postgresql中提取最后一行,您可能需要遇到与数据集合中每个不同标识的信息相关的信息。考虑以下数据:[ 1 2014-02-01 kjkj 在数据集中的每个唯一ID中检索最后一行的信息,您可以在操作员上使用Postgres的有效效率: id dat...
    编程 发布于2025-03-15
  • 如何从Google API中检索最新的jQuery库?
    如何从Google API中检索最新的jQuery库?
    从Google APIS 问题中提供的jQuery URL是版本1.2.6。对于检索最新版本,以前有一种使用特定版本编号的替代方法,它是使用以下语法:获取最新版本:未压缩)While these legacy URLs still remain in use, it is recommended ...
    编程 发布于2025-03-15
  • Python读取CSV文件UnicodeDecodeError终极解决方法
    Python读取CSV文件UnicodeDecodeError终极解决方法
    在试图使用已内置的CSV模块读取Python中时,CSV文件中的Unicode Decode Decode Decode Decode decode Error读取,您可能会遇到错误的错误:无法解码字节 在位置2-3中:截断\ uxxxxxxxx逃脱当CSV文件包含特殊字符或Unicode的路径逃...
    编程 发布于2025-03-15
  • 为什么Microsoft Visual C ++无法正确实现两台模板的实例?
    为什么Microsoft Visual C ++无法正确实现两台模板的实例?
    在Microsoft Visual C 中,Microsoft consions用户strate strate strate strate strate strate strate strate strate strate strate strate strate strate strate st...
    编程 发布于2025-03-15
  • 我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    将我的加密库从mcrypt升级到openssl 问题:是否可以将我的加密库从McRypt升级到OpenSSL?如果是这样,如何?答案:是的,可以将您的Encryption库从McRypt升级到OpenSSL。可以使用openssl。附加说明: [openssl_decrypt()函数要求iv参...
    编程 发布于2025-03-15
  • 在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异?
    在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异?
    For Each Loop vs. Iterator: Efficiency in Collection TraversalIntroductionWhen traversing a collection in Java, the choice arises between using a for-...
    编程 发布于2025-03-15
  • 如何使用FormData()处理多个文件上传?
    如何使用FormData()处理多个文件上传?
    )处理多个文件输入时,通常需要处理多个文件上传时,通常是必要的。 The fd.append("fileToUpload[]", files[x]); method can be used for this purpose, allowing you to send multi...
    编程 发布于2025-03-15
  • 如何在JavaScript对象中动态设置键?
    如何在JavaScript对象中动态设置键?
    在尝试为JavaScript对象创建动态键时,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号: jsobj ['key''i] ='example'1; 在JavaScript中,数组是一...
    编程 发布于2025-03-15
  • 为什么我的CSS背景图像出现?
    为什么我的CSS背景图像出现?
    故障排除:CSS背景图像未出现 ,您的背景图像尽管遵循教程说明,但您的背景图像仍未加载。图像和样式表位于相同的目录中,但背景仍然是空白的白色帆布。而不是不弃用的,您已经使用了CSS样式: bockent {背景:封闭图像文件名:背景图:url(nickcage.jpg); 如果您的html,css...
    编程 发布于2025-03-15
  • 如何干净地删除匿名JavaScript事件处理程序?
    如何干净地删除匿名JavaScript事件处理程序?
    删除匿名事件侦听器将匿名事件侦听器添加到元素中会提供灵活性和简单性,但是当要删除它们时,可以构成挑战,而无需替换元素本身就可以替换一个问题。 element? element.addeventlistener(event,function(){/在这里工作/},false); 要解决此问题,请考虑...
    编程 发布于2025-03-15
  • 如何在Java字符串中有效替换多个子字符串?
    如何在Java字符串中有效替换多个子字符串?
    在java 中有效地替换多个substring,需要在需要替换一个字符串中的多个substring的情况下,很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    编程 发布于2025-03-15
  • HTML格式标签
    HTML格式标签
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    编程 发布于2025-03-15
  • 如何使用替换指令在GO MOD中解析模块路径差异?
    如何使用替换指令在GO MOD中解析模块路径差异?
    在使用GO MOD时,在GO MOD 中克服模块路径差异时,可能会遇到冲突,其中可能会遇到一个冲突,其中3派对软件包将另一个带有导入套件的path package the Imptioned package the Imptioned package the Imported tocted pac...
    编程 发布于2025-03-15
  • 可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    [2这里: https://webthemez.com/demo/sticky-multi-header-scroll/index.html </main> <section> { display:grid; grid-template-...
    编程 发布于2025-03-15
  • 为什么我会收到MySQL错误#1089:错误的前缀密钥?
    为什么我会收到MySQL错误#1089:错误的前缀密钥?
    mySQL错误#1089:错误的前缀键错误descript [#1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度,可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-03-15

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3