Typescript & React常用方法

本章主要搞清楚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;
}