TS 小技巧: 如何快速找到要需要继承的父类?

需求: 如下图所示代码: 如果我想为我的Icon组件添加, onClick, onMouseMove, onMouseLeave ...等属性, 我总不能一个个自己添加把?! 我需要找到适合我的父类来继承这些方法.

import * as React from 'react';
import './importAllIcons';
import './icon.scss'


interface IconType {
    icon: string
    onClick?: ((event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void) | undefined
}

const Icon: React.FC<IconType> =({icon, onClick})=>{

    return<svg className='sweetui-icon' onClick={onClick}>
            <use xlinkHref={ `#${icon}` }></use>
        </svg>

}
export default Icon;

问题来了: 我该如何找到合适父类?

1. 先确定自己找的类的范围, 这里我们想继承鼠标点击, 移动各种事件, 我们直接去react声明里面找

2. 找到自己库的声明文件, 对着react , 鼠标右键-> go to -> Declaration or Usages

3. 在申明文件中 搜索自己需要的属性, 这里以搜索onClick为例

4. 找到 onClick 属于 interface DOMAttributes<T>,

5. 然后声明文件中搜索,DOMAttributes, 搜索结果如下

6. 从名字看, 我选择SVGAttributes做我的父类

7.最后将代码改为:

import * as React from 'react';
import './importAllIcons';
import './icon.scss'


interface IconType extends React.SVGAttributes<SVGSVGElement>{
    icon: string
}

const Icon: React.FC<IconType> =(props)=>{

    return<svg 
        className='sweetui-icon' 
        {...props}
    >
            <use xlinkHref={ `#${props.icon}` }></use>
        </svg>

}
export default Icon;