首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Web前端面试敲重点知识,14个TypeScript核心基础面试题和答案

6、TypeScript 声明变量有哪些不同关键字? 7、如何书写带有类型注释函数 ? 8、如何在 TypeScript 创建对象 ? 9、如何在 TypeScript 中指定可选属性 ?...10、说说枚举TypeScript 是如何工作 ? 11、什么是参数解构 ?...image.png 6、TypeScript 声明变量有哪些不同关键字? image.png 7、如何书写带有类型注释函数 ?...它们类似于数组,有时也称为关联数组 但是,数组使用数字来索引值,而对象允许使用任何其他类型作为 image.png 9、如何在 TypeScript 中指定可选属性 ? 通过添加 ?...枚举允许我们创建命名常量,这是一种为数字常量值赋予更友好名称简单方法 枚举由关键字 enum 定义,后跟其名称和成员。 image.png 11、什么是参数解构 ?

11.4K10

深入理解 TypeScript Keyof 运算符,让你代码更安全、更灵活!

一、如何定义 KeyOf 运算符 在 TypeScript ,keyof 运算符用于获取用户定义值。它主要用于泛型,格式类似于联合运算符及其属性。keyof 运算符会检索用户指定索引。...这种运算符可以用于集合和类等对象,通过键值对来存储和检索数据。使用 map 实例对象 object.keys() 方法,我们可以获取存储在内存。...这个模式在实际开发中非常有用,特别是在需要根据某些状态(枚举)来确定显示样式或标签时。...通过使用 TypeScript 实用类型, Record 和 Pick,我们可以轻松地重构和简化类型定义。结合 keyof 运算符,我们可以确保类型灵活性和安全性。...在本文中,我们探讨了如何在 TypeScript 泛型、映射类型、显式、索引签名、条件映射类型和实用类型中使用 keyof 运算符。

10010
您找到你想要的搜索结果了吗?
是的
没有找到

【TS 演化史 -- 13】字符串枚举 和 弱类型(Weak Type)探测

字符串枚举 TypeScript 2.4 实现了最受欢迎特性之一:字符串枚举,或者更精确地说,带有字符串值成员枚举。...TypeScript 任何其他枚举一样使用: enum MediaTypes { JSON = "application/json", XML = "application/xml" }...字符串值枚举成员没有反向映射 TypeScript 为每个构造映射对象枚举发出一些映射代码。...对于字符串值枚举成员,此映射对象定义到值映射,反之则不是: var MediaTypes; (function (MediaTypes) { MediaTypes["JSON"] = "application...这样,类型错误就出现在咱们(错误地)定义semicolons 属性地方,而不是将prettierConfig参数传递给createFormatter函数

1.6K10

【译】不是 TypeScript TypeScript -- JSDoc 超能力

TypeScript编译器(tsc)以及 VSCode 等编辑器语言支持无需任何编译步骤,就能提供出色开发体验。下面我们来看看如何使用。...目录 带有JSDoc注释TypeScript 激活检查 内联类型 定义对象 定义函数 导入类型 使用泛型 枚举 typeof 从类扩展 带有 JSDoc 注释 TypeScript 在最优情况下,...这样,您就可以在 TypeScript 编写 TypeScript 类型定义,并将它们导入源文件。...`then` is available, and x is a string promise.then(x => x.toUpperCase()) 您可以使用@template注释定义更精细泛型(尤其是带有泛型函数...: 403, notFound: 404, } 枚举与常规 TypeScript 枚举有很大不同, 枚举确保此对象每个都具有指定类型。

3.1K30

掌握 TypeScript:20 个提高代码质量最佳实践

它们就像是对象蓝图,概述了你将要使用数据结构和属性。 在 TypeScript ,接口定义了对象形状约定。它指定了该类型对象应具有的属性和方法,并且可以用作变量类型。...这意味着,当你将一个对象分配给带有接口类型变量时,TypeScript 会检查对象是否具有接口中指定所有属性和方法。...最佳实践11:使用枚举 枚举(Enums)是 TypeScript 定义一组命名常量一种方式。它们可以用于创建更具可读性和可维护性代码,通过给一组相关值赋予有意义名称。...最佳实践13:使用实用类型 实用类型(Utility Types)是 TypeScript 内置一种特性,提供了一组预定义类型,可以帮助你编写更好类型安全代码。...文章还介绍了一些如何使用 TypeScript 高级特性最佳实践,例如使用类型别名和枚举,以提高代码可读性和可维护性。此外,该文章还强调了如何使用可选链操作符来避免一些运行时错误。

4K30

TypeScript 演化史 — 第七章】映射类型和更好字面量类型推断

来看看如何在不使用映射类型情况下在类型系统对其进行编码: interface Point { x: number; y: number; } interface FrozenPoint {...使用映射类型构建 Object.freeze() 来看看 Object.freeze()是如何在 lib.d.ts 文件定义: /** * Prevents the modification of...更多映射类型示例 上面已经看到 lib.d.ts 文件内置 Readonly 类型。此外,TypeScript 定义了其他映射类型,这些映射类型在各种情况下都非常有用。...更好字面量类型推断 字符串、数字和布尔字面量类型(:"abc",1和true)之前仅在存在显式类型注释时才被推断。从 TypeScript 2.1 开始,字面量类型总是推断为默认值。...在 TypeScript 2.0 ,类型系统扩展了几个新字面量类型: boolean 字面量类型 数字字面量 枚举字面量 不带类型注解 const 变量或 readonly 属性类型推断为字面量初始化类型

3.8K40

TypeScript 演化史 -- 7】映射类型和更好字面量类型推断

来看看如何在不使用映射类型情况下在类型系统对其进行编码: interface Point { x: number; y: number; } interface FrozenPoint {...使用映射类型构建 Object.freeze() 来看看 Object.freeze()是如何在 lib.d.ts 文件定义: /** * Prevents the modification...此外,TypeScript 定义了其他映射类型,这些映射类型在各种情况下都非常有用。...更好字面量类型推断 字符串、数字和布尔字面量类型(:"abc",1和true)之前仅在存在显式类型注释时才被推断。从 TypeScript 2.1 开始,字面量类型总是推断为默认值。...在 TypeScript 2.0 ,类型系统扩展了几个新字面量类型: boolean 字面量类型 数字字面量 枚举字面量 不带类型注解 const 变量或 readonly 属性类型推断为字面量初始化类型

2.8K10

细数这些年被困扰过 TS 问题

,下面我们来开始介绍第一个问题 —— 如何在 window 对象上显式设置属性。...除了 T 之外,以下是常见泛型变量代表意思: K(Key):表示对象类型; V(Value):表示对象值类型; E(Element):表示元素类型。...而在 TypeScript 利用枚举,你也可以自定义相似的类型: enum NoYes { No, Yes, } No 和 Yes 被称为枚举 NoYes 成员。...如果枚举某个成员值使用显式方式赋值,但后续成员未显示赋值, TypeScript 会基于当前成员值加 1 作为后续成员值。...TypeScript 可访问性修饰符( public 或 private); 私有字段不能在包含类之外访问,甚至不能被检测到。

15.1K73

Angular实战之使用NG-ZORRO创建一个企业级后台框架(进阶篇)

前言:   上一篇文章我们讲了如何在创建Angular项目中快速引入ng-zorro-antd企业台组件库,并且快速构建后台管理页面框架模板。...// 用于测试TypeScript配置文件 |-- tslint.json // TypeScript代码静态扫描配置 |-- src目录 |-- app // 工程源码目录 |-- assets...它允许你做以下这些事情: 创建一个新 Angular 应用程序 运行带有 LiveReload 支持开发服务器,以便在开发过程预览应用程序 添加功能到现有的 Angular 应用程序 运行应用程序单元测试...2、配置首页组件路由(多模块路由完美解决): 首先,我们博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件配置多个模块路由...自定义页面Layout布局(动态菜单栏配置): 一般情况下我们页面动态菜单都是从后台读取,然后遍历绑定在【app.component.html】页面,我们这里没有展示没有涉及到后台就是用固定式路由

3.9K20

TypeScript 演化史 — 第八章】字面量类型扩展 和 无类型导入

现在来看看非扩展字面量类型,名所示,它们不会自动地扩展。...} } 更好地检查表达式操作数 null/undefined 在TypeScript 2.2,空检查得到了进一步改进。TypeScript 现在将带有可空操作数表达式标记为编译时错误。...从TypeScript 2.2开始,增加了对 ES6 混合类(mixin class)模式。接下来讲讲 mixin 是什么,然后举例说明了如何在 TypeScript 中使用它们。...在函数体,咱们创建并返回一个派生自Base新类。这种语法乍一看可能有点奇怪。咱们创建是类表达式,而不是类声明,后者是定义更常用方法。...继承多个基类在 JS 不行,因此在 TypeScript也不行。

4.5K10

TypeScript】学会这些TS面试题,再也不用怕了

在面试时,通常会考察您对 TypeScript 基本概念、高级特性以及如何在项目中应用了解。以下是一些可能涉及 TS 面试题,以及它们详细解释: 什么是 TypeScript?...代码提示: 使用 TypeScript,您可以在开发过程获得更多代码提示和文档。 TypeScript 基本类型有哪些?...如何在 TypeScript 中使用接口? 接口(Interfaces)是一种用于定义对象结构和类型方式。在 TypeScript ,接口可以用来声明对象属性和方法。...如何在 TypeScript 中使用泛型? 泛型(Generics)是一种在编写可重用、灵活代码时使用工具。在 TypeScript ,泛型可以用来创建适用于多种类型函数、类和接口。...您可以为组件数据、方法、生命周期钩子等明确指定类型,并在组件定义中使用 TypeScript 高级特性。详细内容可以参考前面我提供 "TS 在Vue3使用" 部分。

67930

听GPT 讲Rust源代码--compiler(12)

在该文件,Entry 结构体表示哈希一个键值对引用,其中 'a 是和值有效期。Entry 提供了对和值访问和修改方法。...它作用是提供一个通用机制,让开发者能够在不同进制之间进行转换。 在这个文件定义了一个名为Base::Custom枚举类型,用于表示任意进制。...在Base::Custom枚举类型实现定义了相关方法,用于将给定数字转换为指定进制字符串,或将字符串转换为对应数字。...这个文件定义了与指针相关数据结构和trait,用于在Rust实现带有标签指针。 首先,Pointer trait定义了一个泛型指针类型,并提供了一些操作该指针方法。...总的来说,tagged_ptr.rs文件在Rust定义了一些相关trait和enum,用于实现带有标签指针。这些标签可以让编译器在编译时对指针进行更加精确类型检查和优化。

11210

TypeScript 枚举类型

使用枚举我们可以定义一些带名字常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字和基于字符串枚举。...一、数字枚举TypeScript 可以通过 enum 关键字来定义枚举,比如: enum RequestMethod { Get, Post, Put, Delete, Options...利用这个特性,在确保不出现冲突提前下,我们还可以合并在不同文件定义相同名称枚举或分开定义枚举。...当一个表达式满足下面条件之一时,它就是一个常量枚举表达式: 一个枚举表达式字面量(主要是字符串字面量或数字字面量); 一个对之前定义常量枚举成员引用(可以是在不同枚举类型定义); 带括号常量枚举表达式...版本,引入了一个众人期待特性 —— 字符串枚举

1.4K10

TypeScript keyof 操作符

keyof 操作符是在 TypeScript 2.1 版本引入,该操作符可以用于获取某种类型所有,其返回类型是联合类型。...对象上不同属性,可以具有完全不同类型,我们甚至不知道 obj 对象长什么样。 那么在 TypeScript 如何定义上面的 prop 函数呢?...obj[key]; } 在以上代码,我们使用了 TypeScript 泛型和泛型约束。...请记住,如果我们定义一个带有数值属性对象,那么我们既需要定义该属性,又需要使用数组语法访问该属性, 如下所示: class ClassWithNumericProperty { [1]: string...首先定义了一个 Currency 枚举用于表示三种货币类型,接着定义一个 CurrencyName 对象,该对象使用数值属性作为,对应值是该货币类型名称。

8K40

听GPT 讲Rust源代码--librarystd(16)

它有一个泛型参数K表示类型,一个泛型参数V表示值类型,一个泛型参数S表示用于哈希计算哈希函数类型。 Iter:哈希不可变(immutable)迭代器。...IntoIter:哈希所有权迭代器。它允许以所有权方式遍历哈希元素,并将其消耗。 Keys:哈希迭代器。它允许以不可变引用方式遍历哈希。...IntoKeys:哈希所有所有权迭代器,它允许以所有权方式遍历哈希。...HashSet是一个无序、不重复集合实现,HashMap是一个键值对映射实现。 在定义HashSet和HashMap时,使用了BuildHasher trait定义哈希器来生成哈希码。...这样可以允许用户自定义不同哈希算法和种子。此外,还实现了一些与哈希表相关方法,插入、查询、删除、迭代等。

23530

听GPT 讲Rust源代码--compiler(5)

StackCount: 该枚举类型用于表示查询系统堆栈轨迹计数方式,计算查询使用次数、计算循环依赖深度等。...Alias: 该枚举类型用于表示查询系统别名处理方式,禁止使用别名、允许使用别名等。 这些枚举类型用于指定不同处理方式和选项,以便在错误处理中使用。...它包括以下部分: K: 是一个泛型参数,表示用于唯一标识节点类型。 EdgeHeader: 用于描述依赖边元信息,源节点、目标节点等。...该文件主要结构体是NormalizingHashMap,它是一个带有增量编译哈希哈希表。它将一系列Hir节点作为输入,根据节点类型和内容计算出哈希值,并将其存储在哈希。...在实现哈希计算过程,该文件还使用了一些辅助类型和方法,StableHashingContext和hash_stable。

10510

我为什么不再用 Vue,而改用 React?

存储在 store 目录。中间件则在 middleware 目录里,依此类推。 所有注入都是透明。所有配置都在 nuxt.config.js 里。太棒了!...下面是我眼中 React 一些最明显优势。 1. 对 ES6 和 TypeScript 友好 开发人员掌控类、接口和枚举。...所以我很容易就能理解 React 组件工作机制,并知道该如何将其集成到应用程序。 你也可以在 Vue 中使用 ES6 语法,但是 React 比 Vue 设计得更好。...在 Vue 这边,我们仍然需要一些带有定义装饰器和特性第三方包来创建一个真正完善 TypeScript 应用程序,并且它官方文档并未包含入门所需所有信息。 2. JSX JSX 并非恶魔。...有时,我会为很多 Nuxt 问题而挣扎许久,搜索解决方案过程还会发现很多 Next(React)主题。 看看 Github 仓库,数字可以说明一切。 ? ? 或它们各自框架: ? ?

3.5K20
领券