首页 > 其他分享 >[Typescript] handle event.target type in Form

[Typescript] handle event.target type in Form

时间:2024-07-29 20:30:30浏览次数:9  
标签:Typescript handle target HTMLFormElement EventTarget const null type

The error we encountered in this challenge was that the EventTarget | null type was incompatible with the required parameter of type HTMLFormElement. The problem stems from the fact that these types don't match, and null is not permitted:

const data = new FormData(e.target); // red squiggly line under e.target

// hovering over e.target shows:
Argument of type 'EventTarget | null' is not assignable to parameter of type 'HTMLFormElement | undefined'.
Type 'null' is not assignable to type 'HTMLFormElement | undefined'.

Resolving the Error

First and foremost, it's necessary to ensure e.target is not null.

We can use the as keyword to recast e.target to a specific type.

However, if we recast it as EventTarget, an error will continue to occur:

const data = new FormData(e.target as EventTarget); // red squiggly line under `e.target as EventTarget`

The error message states that the argument of type EventTarget is not assignable to the parameter of type HTMLFormElement:
Since we know that the code works at runtime and has tests covering it, we can force e.target to be of type

const data = new FormData(e.target as HTMLFormElement);

Optionally, we can create a new variable, target, and assign the casted value to it:

const target = e.target as HTMLFormElement;
const data = new FormData(target);

Either way, this change resolves the error and target is now inferred as an HTMLFormElement and the code functions as expected.

标签:Typescript,handle,target,HTMLFormElement,EventTarget,const,null,type
From: https://www.cnblogs.com/Answer1215/p/18331008

相关文章

  • SSM整合Web工程报错Unable to locate Spring NamespaceHandler for XML schema namesp
    博主在启动Tomcat后报错这个 org.springframework.beans.factory.parsing.BeanDefinitionParsingException:Configurationproblem:UnabletolocateSpringNamespaceHandlerforXMLschemanamespace[http://www.springframework.org/schema/tx]Offendingresource:cl......
  • [Typescript] Restrict available operations on values using value objects
    ValueObjectsareanotherpatterninDomain-drivenDesignthatprovidemorestructurearoundwhatyoucanandcannotdowithatype.InTypeScriptwecreateValueObjectswithclassesthatwilldefinewhatoperationscanbeperformedtothevalueonthec......
  • 可靠地获取当前进程的TargetData
    在llvmlite中,需要TargetData的实例来获取对象的ABI大小。这是有道理的,因为对象的大小取决于字的大小和对齐方式。如果我想立即编译并使用当前进程中的代码,那么除了当前进程的目标数据之外,我不需要任何其他东西。文档似乎表明这将可靠地获取当前进程的目标数据。import......
  • typescript: vscode create project
       npmcreatevue@latestcdvue-projectnpmi-Dtypescriptnpminstall-gtypescriptts-nodenpminstallwebpack-gnpminstall-g@vue/clinpminstall-gtypescripttsc--versionnpminstall--gcreate-vueornpminstall--g@vue/clinp......
  • netty入门-6 Handler和Pipeline
    前言书上讲服务器客户端创建三个要点,线程模型(Group),IO模型(NioSocketChannel),处理逻辑。这篇的Handler和Pipeline,就是我们IO操作的处理逻辑。然后下篇说ByteBuf这个Netty自己实现的数据封装组件。Handler和Pipeline我们主要谈论ChannelHandler和ChannelPipeline。前......
  • UOS系统部署KingbaseES V8R6 java故障“InvocationTargetException”
    案例说明:在UOS系统下部署KingbaseESV8R6数据库时,出现Java错误,部署失败。系统版本:kingbase@srv01:~$cat/etc/os-releasePRETTY_NAME="UnionTechOSServer20"NAME="UnionTechOSServer20"VERSION_ID="20"VERSION="20"ID=UOSHOME_URL="h......
  • 如何在 vercel 部署中路由 python 和 typescript 无服务器函数
    我从一个带有Next.js和Typescript前端以及python后端的全栈应用程序开始。由于我们想在vercel上部署,因此我们将所有后端功能迁移到/api文件夹中的typescript函数中,可通过以下方式访问:fetch('api/**foldername**)问题是我有一个简单的pytorch模型,因此......
  • React+TypeScript 组件库开发全攻略:集成Storybook可视化与Jest测试,一键发布至npm
    平时我除了业务需求,偶尔会投入到UI组件的开发中,大多数时候只会负责自己业务场景相关或者一小部分公共组件,极少有从创建项目、集成可视化、测试到发布的整个过程的操作,这篇文章就是记录组件开发全流程,UI组件在此仅作为调试用,重点在于集成项目环境。组件我们使用React+TypeScri......
  • TypeScript与面向对象编程
    引言TypeScript简介TypeScript是JavaScript的一个超集,由微软开发,它在JavaScript的基础上添加了类型系统和对ES6+的新特性的支持。TypeScript最终会被编译成纯JavaScript代码,以便在任何支持JavaScript的环境中运行。面向对象编程(OOP)概念面向对象编程是一种编程范式,它使用“......
  • TypeScript体操(一):从基础到进阶
    目录前言UtilityTypes是什么?常用UtilityTypes前置知识`typeof``keyof``typeof`和`keyof`的区别`never`关键字`extends`关键字结合条件判断`infer`类型推断(模式匹配)判断是与非判断两个类型是否相等或兼容循环递归嵌套字符串数组协变(Covariance)逆变(Contravarian......