这篇文章将简单的演示怎么在react中加上ts，从一个简单的icon组件说起。普通react环境下是这样的。
icon.tsx
import React from 'react';
const Icon = ({ name, ...restProps}) => {
return (
<svg {...restProps}>
<use xlinkHref={`#${name}`}/>
</svg>
);
};
export default Icon;
index.tsx
import * as React from 'react';
import ReactDom from 'react-dom';
import Icon from './icon/icon';
const fn = (e) => {
console.log((e))
};
ReactDom.render(
<Icon name='wechat'/>,
document.getElementById('root')
);
然后对传入的name进行类型确定
icon.tsx
import React from 'react';
interface IconProps{
name: string;
}
const Icon: React.FunctionComponent<IconProps> // React.FunctionComponent为对icon组件的类型测试，后面是传入的值的类型
=({ name, ...restProps})=> {
return (
<svg {...restProps}>
<use xlinkHref={`#${name}`}/>
</svg>
);
};
export default Icon;
当然在传值的过程不只传个静态数据，还可能会传个事件，事件的类型判断和静态数据的不一样， 事件的类型判断如下
interface IconProps extends React.SVGAttributes<SVGElement> {
name: string;
onClick: React.MouseEventHandler<SVGElement>
}
当然，传入的事件也需要进行一下类型判断
const fn: React.MouseEventHandler<SVGAElement | SVGUseElement> = (e) => {
console.log((e.target as HTMLDivElement))
};
一个简单的ts+react例子就写好了。
