在react中的ts使用教程

1、icon.tsx

import React from 'react';const Icon = ({ name, ...restProps}) => {    return (        <svg {...restProps}>            <use xlinkHref={`#${name}`}/>        </svg>    );};export default Icon;

2、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'));

3、然后对传入的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;

4、当然在传值的过程不只传个静态数据，还可能会传个事件，事件的类型判断和静态数据的不一样， 事件的类型判断如下

interface IconProps extends React.SVGAttributes<SVGElement> {    name: string;    onClick: React.MouseEventHandler<SVGElement>}

5、当然，传入的事件也需要进行一下类型判断

const fn: React.MouseEventHandler<SVGAElement | SVGUseElement> = (e) => {  console.log((e.target as HTMLDivElement))};