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

映射类型的Typescript类型推断不能正常工作

映射类型是Typescript中的一种高级类型,它允许我们根据现有类型创建新类型。然而,有时候在使用映射类型时,类型推断可能无法正常工作。

类型推断是Typescript的一个重要特性,它可以根据变量的使用上下文自动推断出变量的类型。但是,在使用映射类型时,由于类型的变换和操作,Typescript可能无法准确地推断出映射后的类型。

为了解决这个问题,我们可以使用类型断言来明确告诉Typescript映射后的类型。类型断言可以通过在变量后面添加as关键字来实现,例如:

代码语言:txt
复制
type MyMappedType = {
  [K in keyof MyOriginalType]: string;
};

const myVariable = {} as MyMappedType;

在上面的例子中,我们使用类型断言将myVariable声明为MyMappedType类型,这样Typescript就能正确地推断出映射后的类型。

另外,如果映射类型的变换逻辑比较复杂,导致类型推断无法正常工作,我们还可以使用显式的类型注解来指定映射后的类型。例如:

代码语言:txt
复制
type MyMappedType = {
  [K in keyof MyOriginalType]: string;
};

const myVariable: MyMappedType = {};

在上面的例子中,我们使用显式的类型注解将myVariable声明为MyMappedType类型,这样Typescript就能准确地知道映射后的类型。

总结一下,当映射类型的Typescript类型推断不能正常工作时,我们可以通过类型断言或显式的类型注解来解决这个问题。这样可以确保我们的代码在使用映射类型时能够正确地推断和使用类型。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

    . ---- 为了保证可读性,本文采用意译而非直译。 TypeScript 2.1 引入了映射类型,这是对类型系统一个强大补充。本质上,映射类型允许w咱们通过映射属性类型从现有类型创建新类型。...对于希望在应用程序中冻结每种类型对象,咱们就必须定义一个包装器函数,该函数接受该类型对象并返回冻结类型对象。没有映射类型,咱们就不能以通用方式静态地使用 Object.freeze()。...这次咱们使用 Point 类型为例来粗略解释类型映射如何工作。...请注意,以下只是出于解释目的,并不能准确反映TypeScript使用解析算法。...此外,TypeScript 定义了其他映射类型,这些映射类型在各种情况下都非常有用。

    2.8K10

    TypeScript-自动类型推断

    自动类型推断概述不用明确告诉编译器具体是什么类型, 编译器就知道是什么类型根据初始化值自动推断:如果是先定义在初始化, 那么是无法自动推断let value;value = 123;value = false...;value = 'abc';如果是定义同时初始化, 那么 TS 就会自动进行类型推断let value = 123;value = 456;value = false;value = 'abc';图片如上...let value = 123; TS 会自动推断为 let value: number = 123; 所以如上 value 变量只能存储 number 类型数据,如上是单个数据类型推断,接下来在来看一个...联合类型 推断:let arr = [1, 'a'];arr = ['a', 'b', 'c', 1, 3, 5, false];如上 let arr = [1, 'a']; TS 会自动推断为...根据上下文类型自动推断window.onmousedown = (event) => { console.log(event.target);}当我在编译器当中编写了如上代码之后编译器在函数入参当中参数后面给了一个提示如下

    22920

    TypeScript-映射类型

    映射类型概述 根据 旧 类型创建出 新 类型, 我们称之为映射类型 假如如下 TestInterface1 是旧类型: interface TestInterface1 { name:...string, age: number } 那么这个时候根据 TestInterface1 创建出来类型就称之为映射类型,例如如下 TestInterface2: interface...将原有类型 部分 内容映射到新类型中 interface TestInterface { name: string, age: number } type MyType = Pick...Record 映射类型 他会将一个类型所有属性值都映射到另一个类型上并创造一个新类型 type Animal = 'person' | 'dog' | 'cat'; interface TestInterface...由映射类型进行推断 对于 Readonly,Partial 和 Pick 映射类型, 我们可以对映射之后类型进行拆包 还原映射之前类型, 这种操作我们称之为 拆包 interface MyInterface

    21720

    TypeScript映射类型

    TypeScript映射类型 TypeScript 官方文档早已更新,但我能找到中文文档都还停留在比较老版本。所以对其中新增以及修订较多一些章节进行了翻译整理。...映射类型(Mapped Types) 有的时候,一个类型需要基于另外一个类型,但是你又不想拷贝一份,这个时候可以考虑使用映射类型。...映射类型建立在索引签名语法上,我们先回顾下索引签名: // 当你需要提前声明属性类型时 type OnlyBoolsAndHorses = { [key: string]: boolean |...(Mapping Modifiers) 在使用映射类型时,有两个额外修饰符可能会用到,一个是 readonly,用于设置属性只读,一个是 ?...(Key Remapping via as) 在 TypeScript 4.1 及以后,你可以在映射类型中使用 as 语句实现键名重新映射: type MappedTypeWithNewProperties

    66810

    《现代Typescript高级教程》类型推断

    现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 类型推断 TypeScript通过类型推断可以自动推导出变量和表达式类型,提高代码可读性和可维护性。...类型推断 类型推断TypeScript 在编译时根据上下文自动推导变量和表达式类型。它根据变量赋值、函数返回值、表达式操作等信息来确定变量或表达式最佳类型。 1....最佳公共类型推断 当我们将不同类型值赋给一个变量或数组时,TypeScript会根据这些值类型推断出一个最佳公共类型。...上下文类型推断 TypeScript会根据上下文中预期类型推断变量类型。这种上下文可以是函数参数、赋值语句等。...类型推断和泛型 在使用泛型时,TypeScript会根据传入参数类型推断泛型类型具体类型

    16130

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

    TypeScript 2.1 引入了映射类型,这是对类型系统一个强大补充。本质上,映射类型允许w咱们通过映射属性类型从现有类型创建新类型。根据咱们指定规则转换现有类型每个属性。...转换后属性组成新类型。 使用映射类型,可以捕获类型系统中类似 Object.freeze() 等方法效果。冻结对象后,就不能再添加、更改或删除其中属性。...对于希望在应用程序中冻结每种类型对象,咱们就必须定义一个包装器函数,该函数接受该类型对象并返回冻结类型对象。没有映射类型,咱们就不能以通用方式静态地使用 Object.freeze()。...这次咱们使用 Point 类型为例来粗略解释类型映射如何工作。...请注意,以下只是出于解释目的,并不能准确反映TypeScript使用解析算法。

    3.8K40

    TypeScript系列教程九《类型转换》-- 映射类型

    类型转换是TS最好玩也是语言灵魂,想玩好需要熟练各种手段和工具,下面一一介绍类型转换一些常用手段。...Mapped Types ---- 有时候对象属性类型重复或者一个类型基于另一个了类型时候 映射类型基于索引签名语法构建,用于声明尚未提前声明属性类型: type OnlyBoolsAndHorses...有两个附加修饰符可以在映射期间应用:readonly和?...在TypeScript 4.1及更高版本中,您可以使用映射类型as子句重新映射映射映射类型键: type MappedTypeWithNewProperties = { [...,例如,这里有一个使用条件类型映射类型,该类型根据对象属性pii是否设置为文本true返回true或false: type ExtractPII = { [Property in keyof

    1.3K10

    索引类型映射类型与条件类型_TypeScript笔记12

    y = x; } 条件类型类型推断 在条件类型extends子句中,可以通过infer声明引入一个将被推断类型变量,例如: type ReturnType = T extends (......R : any; 上例中引入了类型变量R表示函数返回类型,并在True分支中引用,从而提取出返回类型 P.S.特殊,如果存在重载,就取最后一个签名(按照惯例,最后一个通常是最宽泛)进行推断,例如:...TypeScript 还内置了一些常用条件类型: // 从 T 中去掉属于 U 类型部分,即之前示例中 Diff type Exclude = T extends U ?...R : any; (摘自TypeScript/lib/lib.es5.d.ts) 具体示例见Predefined conditional types 四.总结 除类型组合外,另2种产生新类型方式是类型查询与类型映射...类型查询: 索引类型:取现有类型一部分产生新类型 类型映射映射类型:对现有类型映射得到新类型 条件类型:允许以类型兼容关系为条件进行简单三目运算,用来表达非均匀类型映射 参考资料 Advanced

    1.7K10

    TypeScript 类型体操:合并映射类型处理结果为联合类型

    索引类型TypeScript常见类型,它是聚合多个元素类型,对象、类、元组等都是索引类型。...: TypeScript 也内置了很多基于映射类型实现工具类型,比如 Partial、Required 等。...总之,会了映射类型就能够对索引类型做各种变换了。 但是,这些都是对索引类型整体做变换,变换结果依然是一个索引类型。 有的时候是想把它们分开。比如这种需求: 希望能把每个索引给分开。...外层映射类型 [Key in keyof Obj] 就是对每个 Key 做处理,它值也是一个映射类型,而 Key2 来自于刚才 Key,那么这样映射完之后类型就是这样: 这时你取 name 值就是这样...总结 索引类型TypeScript常见类型,可以通过映射类型语法来对它做一些修改,生成新索引类型

    1.7K40

    TypeScript 官方手册翻译计划【十】:类型操控-映射类型

    因为我也是 TypeScript 初学者,所以无法保证翻译百分之百准确,若有错误,欢迎评论区指出; 翻译内容:暂定翻译内容为 TypeScript Handbook,后续有空会补充翻译文档其它部分;...项目地址:TypeScript-Doc-Zh,如果对你有帮助,可以点一个 star ~ 本章节官方文档地址:Mapped Types 映射类型 有时候我们不想重复编写代码,这时候就需要基于某个类型创建出另一个类型...索引签名用于为那些没有提前声明属性去声明类型,而映射类型是基于索引签名语法构建。...在 TypeScript4.1 或者更高版本中,你可以在映射类型中使用 as 子句实现键重新映射: type MappedTypeWithNewProperties = { [...映射类型也可以和本章(类型操控)介绍其它特性搭配使用。

    77750

    TypeScript 5.5 ,即将支持自动推断类型守卫!

    TypeScript 带来了强大类型谓词(type predicates)自动推断能力,预计会在 TypeScript 5.5 版本中推出。...,它类型推断是这样: 然后在这个 PR 被发布后,类型推断将会变成这样: 这个变化有啥用呢?...相比之下,在 TypeScript 中,try-catch 则存在很多限制 — 你既不能根据抛出异常原型定义不同 catch 块,也不能确定抛出到底是不是一个异常实例。...换句话说,类型保护可以保证一个字符串是一个字符串,尽管它值也可以是一个数字。 实际上它就是告诉 TypeScript 编译器给定值是就是我们给定那个类型。...const nums: number[] 毫不夸张说,我认为这是 TypeScript 最几个版本中我觉得最有用一个特性,其实算是修复了 TypeScript 类型推断一个长期存在缺陷,可以让捕获函数中类型收窄逻辑变得更加简单

    23710

    TS 类型体操:索引类型映射映射

    TypeScript 给 JavaScript 加了套静态类型系统。其中,JavaScript 中数组、对象等聚合多个元素类型TypeScript 中对应是索引类型。...: number; gender: boolean; } 我们知道,TypeScript 支持类型编程,也就是对类型参数(范型)做各种运算,产生新类型: type IsString = T...true: false; 那么对于索引类型,如何做运算并产生新类型呢? 答案是映射类型映射类型 映射类型就是用于构造新索引类型。...修饰符。内置 Record、ReadOnly、Required、Partial 等类型都是映射类型。 但是,现在映射类型还是有局限性不能对索引名做修改、过滤等操作,功能还不够强。...总结 TypeScript 通过索引类型来表示有多个元素聚合类型,比如数组、对象等。 TS 支持类型编程,也就是对类型参数做各种运算然后返回新类型

    97810

    【TS】1294- 搞懂 TypeScript映射类型(Mapped Types)

    本文会和大家详细介绍 TypeScript映射类型(Mapped Type),看完本文你将学到以下知识点: 数学中映射和 TS 中映射类型关系; TS 中映射类型应用; TS 中映射类型修饰符应用...这样就能很好实现映射过程复用。 二、TypeScript映射类型是什么? 1....概念介绍 TypeScript映射类型和数学中映射类似,能够将一个集合元素转换为新集合元素,只是 TypeScript 映射类型是将一个类型映射成另一个类型。...Readonly 只读属性 用来将所有属性类型设置为只读类型,即不能重新分配类型。...,详细介绍 TypeScript 映射类型(Mapped Type)并介绍映射类型应用和修饰符应用。

    2.3K10

    TypeScript函数类型

    { return x+y; }; 这是可以通过编译,不过事实上,上面的代码只对等号右侧匿名函数进行了类型定义,而等号左边 mySum,是通过赋值操作进行类型推论而推断出来。...{ return x+y; }; 注意不要混淆了 TypeScript => 和 ES6 中 =>。...在 TypeScript 类型定义中,=> 用来表示函数定义,左边是输入类型,需要用括号括起来,右边是输出类型。...else if (typeof x==='string'){ return x.split('').reverse().join(''); } } 然而这样有一个缺点,就是不能够精确表达...在编辑器代码提示中,可以正确看到前两个提示。 注意,TypeScript 会优先从最前面的函数定义开始匹配,所以多个函数定义如果有包含关系,需要优先把精确定义写在前面。

    2K30
    领券