帮做动态头像的网站,番禺本地网站,做网站需要的公司,天津 工程 信息环境搭建 我们当然可以先用脚手架搭建React项目#xff0c;然后手动配置成支持TypeScript的环境#xff0c;虽然比较麻烦#xff0c;但可以让你更清楚整个过程。这里比较麻烦#xff0c;就不演示了#xff0c;直接用命令配置好。 npx create-react-app appname --typescri… 环境搭建 我们当然可以先用脚手架搭建React项目然后手动配置成支持TypeScript的环境虽然比较麻烦但可以让你更清楚整个过程。这里比较麻烦就不演示了直接用命令配置好。 npx create-react-app appname --typescript 可以安装一些自己需要的库及其声明文件例如react-router-dom、axios、ant Design等。如果要安装ant design还需要在开发环境库中安装一些依赖库以帮助实现按需加载。 使用 有类型约束的函数组件 import React from react;
import { Button } from antd;interface Greeting {name: string;firstName?: string;lastName?: string;
}// 没有使用React.FC
const HelloOld (props: Greeting) Button你好{props.name}/Button;// 使用React.FC泛型类型
const Hello: React.FCGreeting (props) {return (ButtonHello {props.name}/Button)
};export { Hello, HelloOld }; 定义函数组件时使用React.FC与不使用没有太多区别没有为我们带来明显的好处建议使用常规定义方式。 有类型约束的类组件 import React,{Fragment} from react;
import { Button } from antd;interface Greeting {name: string;firstName?: string;lastName?: string;
}
interface State {count: number
}// 泛型类型第一个传入参数约束属性props第二个约束状态state(内部数据)
class HelloClass extends React.ComponentGreeting, State {state: State {count: 0};static defaultProps { // 属性默认值firstName: ,lastName: ,};render() {return (Fragmentp点击了{this.state.count}次/pButton onClick{(){this.setState({count: this.state.count1})}}Hello{this.props.name}Class/Button/Fragment);}
}export default HelloClass; 有类型约束的高阶组件 import React from react;
import HelloClass from ./HelloClass;interface Loading {loading: boolean;
}function HelloHocP(params?: any) {return functionP(WrappedComponent: React.ComponentTypeP) { // P表示被包装组件的属性的类型return class NewComponent extends React.ComponentP Loading{ // 这里使用交叉类型为新组件增加一些属性,接口Loading定义了新增的属性声明render(){return this.props.loading ? divLoading/div : WrappedComponent {...this.props as P}/}}}
}export default HelloHoc()(HelloClass); 高阶组件在ts中使用会有比较多的类型问题解决这些问题通常不会很顺利而且会存在一些已知的bug这不是高阶组件本身的问题而是React声明文件还没有很好地兼容高阶组件的类型检查更好的方式是使用Hooks 有类型约束的Hooks import React, { useState, useEffect } from react;
import { Button } from antd;interface Greeting {name: string;firstName?: string;lastName?: string;
}const HelloHooks (props: Greeting) {const [ count, setCount ] useState(0); // 设了初值所以不用定义类型const [ text, setText ] useStatestring | null(null);useEffect((){count 5 setText(休息一下);},[count]); // 第二个参数的作用是只有当count改变的时候函数内的逻辑才会执行。return (p你点击了Hooks {count} 次 {text}/pButton onClick{(){setCount(count1)}}{props.name}/Button/);
};export default HelloHooks; 事件绑定 class HelloClass extends React.ComponentGreeting, State {state: State {count: 0};clickHandle (e: React.MouseEvent) { // 事件对象e的类型使用内置的合成事件。在回调函数中e的属性都会无效e.persist(); // 将该事件从池中删除合成事件可以正常使用console.log(e);// this.setState({count: this.state.count1})};inputHandle (e: React.FormEventHTMLInputElement) {// e.persist();console.log(e.currentTarget.value); // 此时编译器报错认为没有value属性需要指定HTMLInputElement泛型类型// console.log(e.target.value); // 仍然不行};render() {return (Fragmentp点击了{this.state.count}次/pButton onClick{this.clickHandle}Hello{this.props.name}Class/Buttoninput onChange{this.inputHandle}//Fragment);}
} 转载于:https://www.cnblogs.com/V587Chinese/p/11520674.html
