typescript逻辑复用问题

Question

代码地址： https://codesandbox.io/s/clev...

textarea想复用input组件逻辑时，ts会因为类型不一致报错，这种情况应该怎么写才能复用逻辑并不报错呢

Answer 1

typescript 中关于类型上的复用，最好还是一一对应，所以你这里其实应该是分别声明两个 ref 以及 handleFocus。

对于 ref，由于两个标签元素 HTMLInputElement 和 HTMLTextAreaElement 彼此不兼容，因此无法使用 Union Types。为啥不兼容呢，看这里（从 .d.ts 文件中获取）：

function useRef<T>(initialValue: T): MutableRefObject<T>;

这里的泛型你传什么就是什么，是唯一的，也就是排它的（除非是它的子类）。

对于 handleFocus，由于回调函数签名的类型声明为：

interface FocusEvent<T = Element> extends SyntheticEvent<T, NativeFocusEvent> {
    relatedTarget: EventTarget;
    target: EventTarget & T;
}

这里的泛型 T 只要是继承于 Element 就可以，因此这里可以通过 Union Types 来提供类型声明，如下：

event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>

当然了，如果你嫌这种写法比较麻烦，可以使用 type alias。

另外，其实出现这种情况的最主要原因是，两个不相干的或者需要分开的组件或者元素耦合在一起造成的，因此根本的解决办法就是，不要将 input 和 textarea 放在一起处理，因为它们在类型系统上，确实是两种类型，非要放在一起，必然会涉及到必要的类型断言和 Union Types 的使用。