TS+WebStorm 小技巧: 如何快速找到一个变量的类型?

举个例子: 我想给svg元素添加一个onClick点击事件.

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


interface IconType {
    icon: string
    onClick?:  //如何确定onClick的类型?
}

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

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

}
export default Icon;

1. 先乱填写一个明显错误的类型:

interface IconType {
    icon: string
    onClick?:  string // 乱填写的
}

2. 查看并且复制IDE报错

根据IDE的报错来修改:

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;