Typescript & React常用方法
2022-12-11 14:37 前端小白的江湖路 閱讀(55) 評論(0) 收藏 舉報本章主要搞清楚TS以下幾種容易混淆的概念
1.implements & extends 的區別
2.泛型的用法
3.函數重載
4.ReactNode & React.Element & JSX.Element
1.implements & extends 的區別
1.類可以extends 類,無需實現父類方法
2.類可以implements接口,但是需要實現所有方法和屬性
3.接口可以extends類,和類可以extends類并沒有什么本質區別
2.泛型的用法
3.函數重載
4.ReactNode & React.Element & JSX.Element
簡單來說,如果你需要children定義,一般用ReactNode,適應的范圍更廣。
如果你想用React.Element, 需要留意數組節點React.Element[]
函數組件返回的是React.Element
type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> { props: P; type: T; key: Key | null; } namespace JSX { interface Element extends React.ReactElement<any, any> { } interface ElementClass extends React.Component<any> { render(): React.ReactNode; }
浙公網安備 33010602011771號