在我学习
typescript
时,想在react
中使用typescript
写代码,从头开始的时候是懵逼的,因为官方文档并没有使用typescript
的教程,多是自己在网上查,自己看定义摸索
所以今天把我用过的,总结归纳一下,希望能帮助到同样在摸索的同学
以下代码react
版本为17x
,在UmiJS官方typescript
模版中无报错
类型简述
一些React
的内置类型
React.ReactElement
—— 使用React.createElement
创建的,可以简单理解为React
中的JSX
的元素React.ReactNode
——<div>xxx</div>
xxx的合法类型React.CSSProperties
—— 组件内联的style
对象的类型React.RefObject
——React.createRef
创建的类型,只读不可改React.MutableRefObject
——useRef
创建的类型,可以修改- ...
组件声明
组件声明分为类组件和函数组件
类组件
类组件使用的定义主要为React.Component<P,S>
和React.PureComponent<P,S,SS>
// 自定义样式
const divStyle: React.CSSProperties = {
padding: '0 30px',
textAlign: 'left',
};
interface AppProps {
value: string;
}
interface AppState {
count: number;
}
class Index extends React.Component<AppProps, AppState> {
constructor(props: any) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div className={styles.div} style={divStyle}>
<div>关于我们</div>
</div>
);
}
}
export default Index;
React.Component<P,S>
这里的P
是props
的类型,S
是state
的类型,可以写为React.Component<AppProp>
,因为state
的类型会自己推断(建议写全,否则可能会报错)
在上面PureComponent
中还有个SS
,这个SS
是getSnapshotBeforeUpdate
的返回值,这个暂时没用到,有需要的可自行研究一下。