1回答

张轩

2020-04-01

已采纳

同学你好 你的问题问的非常好 弄清楚这个问题需要稍微高一点的 typescript 水平，所以在这一节并没有讲的非常清楚，让同学先学会这么用即可。

1 首先使用 React.ButtonHTMLAtrribute 必须添加范型，不添加会报错。那么他最终用在哪里呢？如果你打开定义文件一层一层的往下找（要仔细，有很多层），最终它用到了各种事件回掉上面，比如：onFocus，onClick 等等，再往下找，发现它扩展到了 eventTarget 上面

//这个 T 就是我们传入的范型
interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}

最后我们发现它应用到了 currentTarget 上面，下面这个 C 就是交叉类型。

interface BaseSyntheticEvent<E = object, C = any, T = any> {
   currentTarget: C;
}

那么最终我们有什么好处呢，就是当我们写事件会调的时候, 这个时候 e.currentTarget 就有了 EventTarget 和 HTMLElment 的类型，你可以快捷的点出它们所有的属性，你可以自己试试看欧

<Button onClick={(e) => {e.currentTarget}}>

2 对于第二个问题，我只能说是靠看文档和经验了。关注 typescript 内置对象 https://github.com/Microsoft/TypeScript/tree/master/src/lib， 没事多看看React/@types 定义，了解它都定义了哪些类型

希望我这么长的回答能让你满意，谢谢！

7

3

Neolu4ever

进入泛型的学习后，学习难度曲线就几何上升了。我觉得后期的学习更多要依赖于对 ts 内置对象的探究（即一层层点开看到最基础的定义），明白该泛型设计的意义，比如 Partial 就是让输入的类型属性全部变为可选。总得来说还是 多写代码 + 学习深层次的 ts 知识。

2022-11-19

共3条回复