TepeScript 问题记录

  1. 问题 对object的所有属性赋值或清空,提示类型错误不能赋值
type VoiceParams = {
    _id?: string | undefined;
    name: string;
    sex: string;
    vc_id: string;
    model_url: string;
    preview_url: string;
    isPrivate: boolean;
    visible: boolean;
}

const formData = reactive<VoiceParams>({
	_id: '',
	name: '',
	sex: '',
	vc_id: '',
	model_url: '',
	preview_url: '',
	isPrivate: true,
	visible: false,
});

const editVoice = async (row: VoiceParams | null) => {
	dialogVisible.value = true;
	if (row) {
		for (const key in formData) {
			if (Object.prototype.hasOwnProperty.call(formData, key)) {
				// formData[key] = row[key]; // 将表单中的值复制
				formData[key] = row[key];
			}
		}
	}
};

报ts错误
row[key]上提示

(parameter) row: VoiceParams
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'VoiceParams'.
  No index signature with a parameter of type 'string' was found on type 'VoiceParams'.ts(7053)

formData[key] 上提示

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ _id?: string | undefined; name: string; sex: string; vc_id: string; model_url: string; preview_url: string; isPrivate: boolean; visible: boolean; }'.
  No index signature with a parameter of type 'string' was found on type '{ _id?: string | undefined; name: string; sex: string; vc_id: string; model_url: string; preview_url: string; isPrivate: boolean; visible: boolean; }'.ts(7053)

报错信息

  1. 解决
    找了好些地方,都没搞定,chatgpt都…
const editVoice = async (row: VoiceParams | null) => {
	dialogVisible.value = true;
	if (row) {
		for (const key in formData) {
			if (Object.prototype.hasOwnProperty.call(formData, key)) {
				const validKey = key as keyof VoiceParams;
				// 非string类型 单独赋值
				if (validKey === '_id') formData['_id'] = row['_id'];
				else if (validKey === 'isPrivate') formData['isPrivate'] = row['isPrivate'];
				else if (validKey === 'visible') formData['visible'] = row['visible'];
				else formData[validKey] = row[validKey];
			}
		}
	}
};

// 监听新增编辑弹框
watch(
	() => dialogVisible.value,
	(val) => {
		if (!val) {
			// 清空表单
			for (const key in formData) {
			if (Object.prototype.hasOwnProperty.call(formData, key)) {
				// 将表单中的值重置为初始状态
				const validKey = key as keyof VoiceParams;
					if (validKey === 'isPrivate') formData['isPrivate'] = true;
					else if (validKey === 'visible') formData['visible'] = false;
					else formData[validKey] = '';
			}
		}
		}
	}
);

重点:非string类型 单独赋值

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Minecraft】Fabric Mod开发完整流程2 - 创造模式物品栏与第一个方块

创造模式物品栏 添加到当前已有物品栏 再添加自定义的创造模式物品栏之前&#xff0c;请确保你的确有这个需求&#xff01;否则建议直接添加到当前已有的物品栏内部 创建新文件&#xff1a;com/example/item/ModItemGroup.java package com.example.item;import net.fabricmc.…

出于网络安全考虑,印度启用本土操作系统”玛雅“取代Windows

据《印度教徒报》报道&#xff0c;印度将放弃微软系统&#xff0c;选择新的操作系统和端点检测与保护系统。 备受期待的 "玛雅操作系统 "将很快用于印度国防部的数字领域&#xff0c;而新的端点检测和保护系统 "Chakravyuh "也将一起面世。 不过&#xf…

2024考研408-计算机网络 第五章-传输层学习笔记

文章目录 前言一、传输层提供的服务1.1、传输层的功能1.2、传输层的两个协议&#xff08;TCP、UDP&#xff09;1.3、传输层的寻址与端口&#xff08;常见端口介绍&#xff09; 二、UDP协议2.1、认识UDP功能和特点2.2、UDP首部格式2.3、UDP伪首部字段分析2.4、伪首部校验UDP用户…

【24择校指南】南京大学计算机考研考情分析

南京大学(A) 考研难度&#xff08;☆☆☆☆☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分数人数统计&#xff09;、院校概况、23初试科目、23复试详情、参考书目、各科目考情分析、各专业考情分析。 正文2178字&#xff0c;预计阅读&#xff1a;6分…

网络原理(JavaEE初阶系列11)

目录 前言&#xff1a; 1.网络原理的理解 2.应用层 2.1自定义协议的约定 2.1.1确定要传输的信息 2.1.2确定数据的格式 3.传输层 3.1UDP 3.1.1UDP报文格式 3.2TCP 3.2.1确认应答 3.2.2超时重传 3.2.3连接管理 3.2.3.1三次握手 3.2.3.2四次挥手 3.2.4滑动窗口 3.…

【JavaEE】Spring Boot - 配置文件

【JavaEE】Spring Boot 开发要点总结&#xff08;2&#xff09; 文章目录 【JavaEE】Spring Boot 开发要点总结&#xff08;2&#xff09;1. 配置文件的两种格式2. .properties 文件2.1 基本语法2.2 注释2.3 配置项2.4 主动读取配置文件的键值2.5 数据库的连接时的需要的信息配…

ChatGPT访问流量下降的原因分析

​自从OpenAI的ChatGPT于11月问世以来&#xff0c;这款聪明的人工智能聊天机器人就席卷了全世界&#xff0c;人们在试用该工具的同时也好奇该技术到底将如何改变我们的工作和生活。 但近期Similarweb表示&#xff0c;自去ChatGPT上线以来&#xff0c;该网站的访问量首次出现下…

面试热题(路径总和II)

给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 在这里给大家提供两种方法进行思考&#xff0c;第一种方法是递归&#xff0c;第二种方式使用回溯的方式进行爆…

Linux文件属性与权限管理(可读、可写、可执行)

Linux把所有文件和设备都当作文件来管理&#xff0c;这些文件都在根目录下&#xff0c;同时Linux中的文件名区分大小写。 一、文件属性 使用ls -l命令查看文件详情&#xff1a; 1、每行代表一个文件&#xff0c;每行的第一个字符代表文件类型&#xff0c;linux文件类型包括&am…

Javascript 正则

基本语法 定义 JavaScript种正则表达式有两种定义方式 构造函数 var regnew RegExp(<%[^%>]%>,g);字面量 var reg/<%[^%>]%>/g;g&#xff1a; global&#xff0c;全文搜索&#xff0c;默认搜索到第一个结果接停止i&#xff1a;ingore case&#xff0c;忽略…

小程序如何设置电子票

电子票是一种方便快捷的票务管理方式&#xff0c;可以帮助商家实现电子化的票务管理&#xff0c;提升用户体验。下面介绍&#xff1a;如何在小程序内&#xff0c;设置电子票以及用电子票购买商品。 1. 设置电子票套餐。可以新建一个商品&#xff0c;商品标题写&#xff1a;XX电…

UDP通信实验、广播与组播、本地套接字

文章目录 流程函数应用广播应用 组播&#xff08;多播&#xff09;本地套接字应用 流程 函数 返回值&#xff1a; 成功&#xff0c;返回成功发送的数据长度 失败&#xff0c;-1 返回值&#xff1a; 成功&#xff0c;返回成功接收数据长度 失败&#xff0c;-1 应用 广播 应用 …

android APP内存优化

Android为每个应用分配多少内存 Android出厂后&#xff0c;java虚拟机对单个应用的最大内存分配就确定下来了&#xff0c;超出这个值就会OOM。这个属性值是定义在/system/build.prop文件中. 例如&#xff0c;如下参数 dalvik.vm.heapstartsize8m #起始分配内存 dalvik.vm.…

搭建servlet服务

目录 servlet的生命周期 配置tomcat环境 创建web后端项目 配置web.xml http请求 get和post 其他请求 http响应 Servlet是Server Applet的简称&#xff0c;意思为用Java编写的服务器端的程序&#xff0c;它运行在web服务器中&#xff0c;web服务器负责Servlet和客户的通…

5.利用matlab完成 符号矩阵的转置和 符号方阵的幂运算(matlab程序)

1.简述 Matlab符号运算中的矩阵转置 转置向量或矩阵 B A. B transpose(A) 说明 B A. 返回 A 的非共轭转置&#xff0c;即每个元素的行和列索引都会互换。如果 A 包含复数元素&#xff0c;则 A. 不会影响虚部符号。例如&#xff0c;如果 A(3,2) 是 12i 且 B A.&#xff0…

【PDF密码】PDF文件不能打印,为什么?

正常的PDF文件是可以打印的&#xff0c;如果PDF文件打开之后发现文件不能打印&#xff0c;我们需要先查看一下自己的打印机是否能够正常运行&#xff0c;如果打印机是正常的&#xff0c;我们再查看一下&#xff0c;文件中的打印功能按钮是否是灰色的状态。 如果PDF中的大多数功…

谷粒商城第十天-获取分类属性分组(前端组件抽取父子组件交互)

目录 一、总述 1.1 前端思路 1.2 后端思路 二、前端部分 2.1 将分类树前端代码抽取成一个组件 2.2 使用elementUI的组件实现左右组件功能 2.3 使用事件机制进行组件通信 三、后端部分 四、总结 一、总述 说一下今天需要实现一个什么样子的功能&#xff1a; 很简单&am…

数据结构(c++语言版) 邓俊辉 第五章:二叉树学习笔记

5.1二叉树及其表示 树是由节点和边组成的。 1.有根树 树是由顶点(vertex)和边(edge)组成。树的每个顶点也叫节点(node)。 2.深度与层次 由树的连通性&#xff0c;每一节点与根都有一条路径相连&#xff1a;根据树的无环性&#xff0c;由根通往每个节点的路径必然唯一。 节点v…

数据结构——双向链表

双向链表实质上是在单向链表的基础上加上了一个指针指向后面地址 单向链表请参考http://t.csdn.cn/3Gxk9 物理结构 首先我们看一下两种链表的物理结构 我们可以看到&#xff1a;双向在单向基础上加入了一个指向上一个地址的指针&#xff0c;如此操作我们便可以向数组一样操作…

STM32 4G学习

硬件连接 ATK-IDM750C模块可直接与正点原子 MiniSTM32F103开发板板载的ATK模块接口&#xff08;ATK-MODULE&#xff09;进行连接。 功能说明 ATK-IDM750C是正点原子&#xff08;ALIENTEK&#xff09;团队开发的一款高性能4G Cat1 DTU产品&#xff0c;支持移动4G、联通4G和…