0

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

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

2019-06-12 提问
1 个回答
0

已采纳

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

对于 ref,由于两个标签元素 HTMLInputElementHTMLTextAreaElement 彼此不兼容,因此无法使用 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

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

撰写答案

推广链接