一、前言单独使用typescript不会导致学习成本高，但大多数前端开发者的项目都依赖于该框架。比如结合vue和react框架，使用TypeScript写react代码会有一定的门槛，除了typescript库，还需要安装@types/react，@types/react-domnpmi@types/react-snpmi@types/react-dom-s。上面使用@types库的原因是，目前很多javascript库都没有提供自己的关于TypeScript的声明文件。所以ts并不知道这些库的类型和对应的导出内容。这里的@types其实就是社区中的DefinitelyTyped库，它定义了目前市面上的绝大多数类型。大多数JavaScript库声明所以当你下载相关javascript对应的@types声明时，你可以使用库对应的类型定义。2.用法在写react项目时，最常用的组件有：statelesscomponentsStatefulcomponentsControlledcomponentsstatelesscomponents的主要功能是显示UI。如果使用js声明，会是这样：import*asReactfrom'react'exportconstLogo=props=>{const{logo,className,alt}=propsreturn()}但是此时ts会报错，因为没有定义porps类型。这时候可以使用interface接口来定义porps，如下：import*asReactfrom'react'interfaceIProps{logo?:stringclassName?:stringalt?:string}exportconstLogo=(props:IProps)=>{const{logo,className,alt}=propsreturn()}但是我们都知道props里面有children属性，我们不可能再定义一个每个porps界面中的children，如下：interfaceIProps{logo?:stringclassName?:stringalt?:stringchildren?:ReactNode}比较规范的写法是使用React中定义的FC属性，已经定义了children类型，如下：exportconstLogo:React.FC=props=>{const{logo,className,alt}=propsreturn()}React.FC明确定义了返回类型，其他方式是隐式派生的。React.FC为静态属性提供类型检查和自动完成：displayName、propTypes、defaultProps。React.FC为孩子提供隐式类型(ReactElement|null)。有状态组件可以是类组件，并且有props和state属性。如果你使用typescript声明，它将看起来像这样：:1,}publicrender(){return(Helloworld
)}}上述类型通过泛型定义props和state，然后在使用它们时可以在编译器中得到更好的结果SmartTip为Component泛型类的定义，可以参考React类型定义文件node_modules/@types/react/index.d.ts，如下：classComponent{readonlyprops:Readonly<{children?:ReactNode}>&Readonly；状态：只读；从上面从上面可以看出，state属性也定义了一个可读类型，目的是防止直接调用this.state来更新受控组件的状态。合成事件不等同于本机事件。例如，输入组件修改内部状态。常用定义如下：privateupdateValue(e:React.ChangeEvent){this.setState({itemText:e.target.value})}常用Event事件对象类型：ClipboardEvent剪贴板事件对象DragEvent拖动事件对象ChangeEvent变化事件objectKeyboardEvent键盘事件objectMouseEvent鼠标事件objectTouchEvent触摸事件objectWheelEvent滚轮事件objectAnimationEvent动画事件objectTransitionEventtransitioneventobjectTreceivingADOMelementtype3.总结以上只是简单的在react项目中使用typescript，但是在写react的时候project，还有hooks，defaultparameters，store等等。。。在framework中使用typescript的学习成本会相对高一些，需要不断的写才能熟练
