TypeScript中的keyof、typeof、in

news2024/12/28 2:24:46

概览

TypeScript中的keyof、typeof、in在我们日常工作中经常用到,但也容易遗忘,现详细梳理其用法及使用场景

一. 抛出问题

const getFormatData = (initData) => {  
    const data = [];
    // 部分字段取值需保留小数点后两位
    const formatKeys = ['priceUntax','packageCoast','transfeCoast','manageCoast','profitReal','totalCoast'];  
    initData.forEach(item => {  
      const tempDataItem = {} ;  
      // 遍历 tableMapKeyValue 对象的每个键值对  
      for (const [key, value] of Object.entries (tableMapKeyValue)) {  
        if(!item[value]) {
          tempDataItem[key] = ''
        } else {
          tempDataItem[key] = formatKeys.includes(key)? Number(item[value]).toFixed(2): item[value]
        }
      }  
      data.push(tempDataItem);  
    });  
    return data;  
  };

在vue项目中,这段代码有编译报错,代码可能看得不清楚,上图片
在这里插入图片描述

修复代码1

const getFormatData = <T extends { [K in keyof typeof tableMapKeyValue]: any }>(initData:any[]): T[] => {  
    const data: T[] = [];
    // 部分字段取值需保留小数点后两位
    const formatKeys = ['priceUntax','packageCoast','transfeCoast','manageCoast','profitReal','totalCoast'];  
    initData.forEach(item => {  
      const tempDataItem: T = {} as T;  
      // 遍历 tableMapKeyValue 对象的每个键值对  
      for (const [key, value] of Object.entries (tableMapKeyValue)) {  
        if(!item[value]) {
          tempDataItem[key] = ''
        } else {
          tempDataItem[key] = formatKeys.includes(key)? Number(item[value]).toFixed(2): item[value]
        }
      }  
      // 将 tempDataItem 添加到 data 数组中  
      data.push(tempDataItem);  
    });  
    return data;  
  };

修复代码2

const getFormatData = (initData:any[]) => {  
    const data:ItableMapKeyValue[] = [];
    // 部分字段取值需保留小数点后两位
    const formatKeys = ['priceUntax','packageCoast','transfeCoast','manageCoast','profitReal','totalCoast'];  
    initData.forEach(item => {  
      const tempDataItem: ItableMapKeyValue = {} as ItableMapKeyValue;  
      // 遍历 tableMapKeyValue 对象的每个键值对  
      for (const [key, value] of Object.entries (tableMapKeyValue)) {  
        if(!item[value]) {
          tempDataItem[key] = ''
        } else {
          tempDataItem[key] = formatKeys.includes(key)? Number(item[value]).toFixed(2): item[value]
        }
      }  
      data.push(tempDataItem);  
    });  
    return data;  
  };

相关调用代码如下:

const importExcel = (params:any[]) => {
    const formatData = getFormatData(params);
    data.value.details = formatData;
  }

相关引用代码

export interface ItableMapKeyValue {
  goodsNo: string,
  descr: string,
  number: string,
  unit: string,
  priceUntax: string,
  packageCoast: string,
  transfeCoast: string,
  manageCoast: string,
  profitReal: string,
  totalCoast: string,
  remarks: string
}

export const tableMapKeyValue:ItableMapKeyValue = {
  goodsNo:'物料编号',
  descr:'描述',
  number:'数量',
  unit:'单位',
  priceUntax:'单价(未含税)',
  packageCoast:'包装费用(元)',
  transfeCoast:'运输费用(元)',
  manageCoast:'管理服务费用(元)',
  profitReal:'毛利率(%)',
  totalCoast:'总价(未含税)(元)',
  remarks:'备注'
}

二. keyof

keyof 可以获取一个类型所有键值,返回一个联合类型

type Person = {
    name:string;
    age:number;
}

type PersonKey = keyof Person; // 'name'|'age'

三. typeof

typeof 可以获取一个对象/实例的类型

const person = {
    name:'xiaobai',
    age:3
}

const p1:typeof person = {
    name:'xiaohong',
    age:2
}

// typeof person 输出 {name:string, age:number}

三. in 操作符

遍历枚举的类型, 可以和keyof配合使用,作类型转换等

type Person = {
    name:string;
    age:number;
}

type PersonToString<T> = {
    [k in keyof T]:string
}

const p1:PersonToString<Person> = {
    name:'xiaobai',
    age:"10"
}
// {name:string, age:string}

四. 使用示例

1. 实现 Partial

Partial是一个ts内置工具类型,用于将传入的类型所有属性设置为可选的

type User = {
    id:number,
    phone:number,
    pwd:string,
    name:string
}

const u1:Partial<User> = {
    id:1,
    name:'小白'
}
// 自己实现
type MyPartial<T> = {
    [k in keyof T]?: T[k]
}

const u2:MyPartial<User> = {
    id:2,
    name:'小红'
}

2. 实现 Readonly
Readonly工具类型可以将传入的类型中所有属性转化为只读

type User = {
    id:number,
    name:string
}
// 自己实现
type MyReadonly<T> = {
   readonly [k in keyof T]: T[k]
}

const u1:MyReadonly<User> = {
    id:3,
    name:'小黄'
}

u1.name = '小黑' 
//Cannot assign to 'name' because it is a read-only property.

3. 实现 Record
Record<Keys, Type>工具类型可以将某个类型的属性映射到另一个类型上,其构造的类型属性名的类型为K,属性值的类型为T

type Page = 'home' | 'about' | 'contact';
interface PageInfo {
    title: string;
}

const x1: Record<Page, PageInfo> = {
    about: { title: 'about' },
    contact: { title: 'contact' },
    home: { title: 'home' },
};

// 自己实现
type MyRecord<Keys extends keyof any, Type> =  {
    [k in Keys]: Type
}
const x2: MyRecord<Page, PageInfo> = {
    about: { title: 'about' },
    contact: { title: 'contact' },
    home: { title: 'home' },
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1461680.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

频段划分学习射频知识的意义

一、射频电路设计与低频电路设计的不同点 随着频率提高&#xff0c;相应电磁波的波长与变得可与分立电路元件的尺寸相比拟时&#xff0c;电阻、电容和电感这些元件的电响应&#xff0c;将偏离他们的理想频率特性。以 WIFI 2.4G 频段为例&#xff0c;当频率为 2437MHz&#xff0…

年收入 100 万,不敢生孩子

原文连接&#xff1a; 年收入 100 万&#xff0c;不敢生孩子 今日热帖&#xff0c;有网友发帖称&#xff1a;互联网大头兵夫妇&#xff0c;两个人都 30 了&#xff0c;老公 xhs 后端年包 80&#xff0c;我私企年薪 20 左右&#xff0c;老家三线城市有房。 本来今年要孩子了&am…

花了钱的ChatGPT4.0在绘画方面的能力如何?Sora也能work吗

花了钱的ChatGPT4.0在绘画方面的能力如何&#xff1f;Sora也能work吗 关注微信公众号 DeepGoAI 计算机杂谈及深度学习记录&分享 众所周知 AI绘图是4.0收费的一大卖点 网上也有许多反复训练ChatGPT的段子视频 让人工智能无语 网友直呼 “未来人工智能统治世界了&…

016—pandas 分析近100年圣诞节日期分布

需求&#xff1a; 利用Pandas 分析近100年圣诞节的星期分布&#xff0c;目的是知道圣诞节都在星期几&#xff0c;哪个星期多些。 思路&#xff1a; 用 pd.date_range 生成 100 年日期数据 筛选出12月25日的所有日期 将日期转换为星期几 统计重复值的数量 绘图 二、…

【JAVA高级面试题】运用锁机制实现一个自定义的阻塞队列

文章目录 前言实战演示写在最后 前言 前几天看见一个高级Java面试题&#xff0c;我觉得很有代表意义。既考察了面试者的基本锁机制运用&#xff0c;也了解了阻塞队列的产生实现原理。先分享出来&#xff0c;以供鉴赏。 面试题&#xff1a;实现一个自定义的阻塞队列&#xff0c…

【C++语法基础】4.分支和循环结构(✨新手推荐阅读)

前言 在C编程中&#xff0c;分支和循环结构是控制程序流程的基本工具。分支结构允许程序根据特定条件执行不同的代码块&#xff0c;而循环结构则允许程序重复执行某个代码块。 分支结构 if 语句 if 语句是最基本的分支结构&#xff0c;它根据条件的真假来决定是否执行某段代…

Linux实验记录:使用LNMP架构部署动态网站环境

前言&#xff1a; 本文是一篇关于Linux系统初学者的实验记录。 参考书籍&#xff1a;《Linux就该这么学》 实验环境&#xff1a; VmwareWorkStation 17——虚拟机软件 RedHatEnterpriseLinux[RHEL]8——红帽操作系统 备注&#xff1a; LNMP动态网站部署架构是一套由&…

Linux 性能分析工具汇总

Linux 性能分析工具汇总 出于对Linux操作系统的兴趣&#xff0c;以及对底层知识的强烈欲望&#xff0c;因此整理了这篇文章。本文也可以作为检验基础知识的指标&#xff0c;另外文章涵盖了一个系统的方方面面。如果没有完善的计算机系统知识&#xff0c;网络知识和操作系统知识…

(done) 两个矩阵 “相似” 是什么意思?

参考视频&#xff1a;https://www.bilibili.com/video/BV1zu411673J/?spm_id_from333.337.search-card.all.click&vd_source7a1a0bc74158c6993c7355c5490fc600 参考资料&#xff1a;https://baike.baidu.com/item/%E7%9B%B8%E4%BC%BC%E7%9F%A9%E9%98%B5/10369874?frge_a…

离线环境解决IDEA连接数据库报需下载驱动的问题 Download missing driverfiles

去外网电脑上把这个目录下的MySQL ConnectorJ文件夹整体拷贝的内网电脑上就ok了&#xff01; C:\Users\like12\AppData\Roaming\JetBrains\IntelliJIdea2021.2\jdbc-drivers 参考&#xff1a;IDEA Download missing driver files 下载失败解决方法-CSDN博客

开发一款招聘小程序需要具备哪些功能?

随着时代的发展&#xff0c;找工作的方式也在不断变得简单&#xff0c;去劳务市场、人才市场的方式早就已经过时了&#xff0c;现在大多数年轻人都是直接通过手机来找工作。图片 找工作类的平台不但能扩大企业的招聘渠道&#xff0c;还能节省招聘的成本&#xff0c;方便求职者进…

7. Qt添加滑动条

前言&#xff1a; 添加一个这样的滑条&#xff0c;双方关联自动修改,也提供代码创建方式 技能&#xff1a; QSpinBox QSlider 方式一 Qt 的图形化编程&#xff08;用ui文件&#xff0c;非常简单&#xff09; 1.Spin Box 首先找到显示数字的这个部分。是input widget->sp…

useGeneratedKeys=“true” keyProperty=“id”

useGeneratedKeys“true” keyProperty“id” 这个注解在xml文件的insert方法中&#xff0c;可以用于返回主键值&#xff1b; 并且useGeneratedKeys参数只针对 insert 语句生效&#xff0c;默认为 false&#xff1b;

【刷题记录】最大公因数,最小公倍数(辗转相除法、欧几里得算法)

本系列博客为个人刷题思路分享&#xff0c;有需要借鉴即可。 1.题目链接&#xff1a; 无 2.详解思路&#xff1a; 题目描述&#xff1a;输入两个正整数&#xff0c;输出其最大公因数和最小公倍数 一般方法&#xff1a;最大公因数&#xff1a;穷加法&#xff1b;最小公倍数&…

小迪安全29WEB 攻防-通用漏洞SQL 注入增删改查盲注延时布尔报错

#知识点&#xff1a; 1、明确查询方式注入 Payload 2、明确查询方式注入产生功能 3、明确 SQL 盲注延时&布尔&报错 #详细点&#xff1a; 盲注就是在注入过程中&#xff0c;获取的数据不能回显至前端页面。 也就是在代码中无echo将sql结果输出出来 此时&#…

Android---Jetpack Compose学习004

CompositionLocal 通常情况下&#xff0c;在 Compose 中&#xff0c;数据以参数形式向下流经整个界面树传递给每个可组合函数。但是&#xff0c;对于广泛使用的常用数据&#xff08;如颜色或类型样式&#xff09;&#xff0c;这可能会很麻烦。 为了支持无需将颜色作为显式参数…

stm32学习总结 FMC 驱动LCD

1&#xff0c; 显示器分类&#xff08;了解&#xff09; 全彩显示&#xff0c;LCD具有更多的优势&#xff0c;适合在单片机上使用 2&#xff0c; LCD简介&#xff08;了解&#xff09; Liquid Crystal Display&#xff0c;即液晶显示器&#xff0c;由&#xff1a;玻璃基板、背…

宝塔面板-安装与卸载

宝塔面板&#xff08;BT Panel&#xff09;是一款在互联网上广泛使用的服务器管理软件&#xff0c;它以其简洁的界面和强大的功能受到了许多站长的喜爱。通过宝塔面板&#xff0c;用户可以轻松地管理服务器上的网站、数据库、FTP、邮箱等服务。本文将详细介绍宝塔面板的安装与卸…

嵌入式产品开发流程全解析

&#xff08;本文为简单介绍&#xff0c;内容来源于网络&#xff09; 嵌入式产品开发是一个涵盖硬件和软件的综合系统工程,其开发流程可以概括为需求分析、系统设计、软硬件开发与调试、产品验证和批量生产几大阶段。 需求分析阶段是开发流程的基础,主要对产品的硬件资源、软…

【企业动态】复工啦,回顾2023,展望2024!东胜物联与您同启新程

这几天相信小伙伴们都已经陆陆续续回归工作岗位了吧&#xff0c;复工后在CSDN发布的第二篇文章带大家来回顾物联网硬件设备及解决方案商东胜物联的2023年总结以及2024年展望&#xff0c;分享给所有对Dusun感兴趣的新老朋友❤️ 2023年&#xff0c;东胜不仅面对了一些挑战&…