有没有声明 typescript 类型的好办法以及前端样式的健壮性问题

2023-11-23 20:55:29 +08:00
 rizon

我在学习 react ,看到给一个 div 添加 onMouseDown 事件时,
这个事件本身的声明是:onMouseDown?: MouseEventHandler<T> | undefined; 写它的实现类时为

  const handleMouseDown = (event:React.MouseEvent<HTMLDivElement,MouseEvent>) => {

  }

event 的类型为 MouseEvent ,这个是可以看代码看出来的,但是里面的泛型HTMLDivElement,我这上哪猜去,,,

  1. 虽然不写这么严格也没问题,但是我的问题是基于想要最完整严格的使用 type 的前提。
  2. 这只是举个例子说明我的问题,我核心问题是,typescript 中,编辑器依然不能自动推测出所有的字段类型,对于编辑器无法推测的情况下,我该如何去更好的面对和解决这个问题呢。
  3. 前端样式有什么好的规范文档吗,我是自学的,虽然能写出样式来,但是代码的健壮性、优雅等各方面差太多了,有什么更系统的学习材料吗
1931 次点击
所在节点    TypeScript
7 条回复
thinkershare
2023-11-23 21:48:09 +08:00
为什么需要猜了,HTML 的 DIV 元素的接口类型就是 HTMLDivElement 。
ragnaroks
2023-11-23 22:46:39 +08:00
另外,type MouseEventHandler<T> = (event:MouseEvent<T>)=>void
molvqingtai
2023-11-24 00:32:31 +08:00
你还可以直接写 tag 名称
import React from "react";

const onChange: React.ComponentProps<"input">["onChange"] =
(e) => {
console.log(e);
};

<input onChange={onChange} />;
molvqingtai
2023-11-24 00:37:32 +08:00
如果不确定那种 DOM 触发的事件,可以使用 SyntheticEvent
magicdawn
2023-11-24 02:17:22 +08:00
Al0rid4l
2023-11-24 15:26:43 +08:00
因为他默认你一看这名字就知道这是 Web API 的接口, 所以

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement

其他 DOM API/Web API 都在 MDN 查就完事了
rizon
2023-11-26 12:46:39 +08:00
@magicdawn #5 嘿,这是个好玩意,可以给出不少指导建议。nice ~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/994647

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX