在react中的ts使用教程

icon.tsximport React from 'react';const Icon = ({ name, ...restProps}) => {    return (            );};export default Icon;

index.tsximport * as React from 'react';import ReactDom from 'react-dom';import Icon from './icon/icon';const fn =  (e) => {  console.log((e))};ReactDom.render(  ,  document.getElementById('root'));

然后对传入的name进行类型确定icon.tsximport React from 'react';interface IconProps{   name: string;} const Icon: React.FunctionComponent  // React.FunctionComponent为对icon组件的类型测试，后面是传入的值的类型 =({ name, ...restProps})=> {    return (            );}; export default Icon;

当然在传值的过程不只传个静态数据，还可能会传个事件，事件的类型判断和静态数据的不一样， 事件的类型判断如下interface IconProps extends React.SVGAttributes {    name: string;    onClick: React.MouseEventHandler}

当然，传入的事件也需要进行一下类型判断const fn: React.MouseEventHandler = (e) => {  console.log((e.target as HTMLDivElement))};