前言
在我学习typescript时，想在react中使用typescript写代码，从头开始的时候是懵逼的，因为官方文档并没有使用typescript的教程，多是自己在网上查，自己看定义摸索
所以今天把我用过的，总结归纳一下，希望能帮助到同样在摸索的同学
以下代码react版本为16.13.1，在create-react-app官方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>
interface AppProps {
value: string;
}
interface AppState {
count: number;
}
class App extends React.Component<AppProps, AppState> {
static defaultProps = {
value: "",
};
state = {
count: 0,
};
}
复制代码
React.Component<P,S>这里的P是props的类型，S是state的类型，可以写为React.Component<AppProp>,因为state的类型会自己推断
在上面PureComponent中还有个SS，这个SS是getSnapshotBeforeUpdate的返回值
函数组件
函数组件定义的方式简单来看有两种，一种是使用React.FC，一种是直接给props写上定义
interface AppProps {
value?: string;
}
const App: React.FC<AppProps> = ({ value = '', children }) => {
// ...
};
复制代码
React.FC的意思是FunctionComponent，如果使用了React.FC，它在定义里就已经规定好了children的类型和函数的返回值，所以可以直接用children
如果是直接给props写上定义，就需要自己定义children的类型
interface AppProps {
value?: string;
children?: React.ReactNode; // 自己定义children的类型
}
function App({ value = "", children }: AppProps) {
return <>{children}</>;
}
复制代码
使用function来定义而不是箭头函数的优点是可以使用泛型组件
Hooks声明
hooks的声明如果不知道如何用ts定义可以直接点进去看看
useState
useState可以使用泛型传参或者自动推断
const [state, setState] = useState(''); // state的类型为string，自动推断
const [state, setState] = useState<string>(); // state的类型为 string | undefined
// 给初值
const [state, setState] = useState<string | null>(null); // state的类型为 string | null
复制代码
useRef
useRef同样也会自动推断
const ref = useRef(""); // ref.current的类型为 string
// 泛型
type Value = { value: string };
const ref = useRef<Value>({ value: "" });
// ref为html元素
const ref = useRef<HTMLDivElement>(null);
return <div ref={ref} />;
复制代码
需要注意的是如果ref为元素，那么初始值得写个null才不会报错
useReducer
useReducer相对来说要写的更多一点，可以自动推断，所以不需要手动写泛型类型（其实我也不知道手动写怎么写Orz）
// state类型
interface ReducerState {
value: string;
}
// action类型
interface AnyAction {
type: string;
[key: string]: any;
}
// reducer函数
const reducer: React.Reducer<ReducerState, AnyAction> = (state, action) => {
switch (action.type) {
default:
return state;
}
};
// 初始值
const initialState: ReducerState = { value: "" };
const [state, dispatch] = useReducer(reducer, initialState);
// state 的类型为 ReducerState
// dispatch 的类型为 React.Dispatch<AnyAction>
复制代码
Action也可以是多个不同的Action的联合类型
useImperativeHandle
useImperativeHandle这个钩子可以把内部方法通过ref暴露出去，用ts也是要写多一点，类型都需要标注清楚
所以需要使用到React.forwardRef，可以先看下一节
// props
interface AppProps {
value: string;
}
// useImperativeHandle获取到ref的类型
interface Handle {
get: () => string;
}
const App = React.forwardRef<Handle, AppProps>(({ value }, ref) => {
// 定义
useImperativeHandle(ref, () => ({
get: () => `handle get value : ${value}`,
}));
return null;
});
// 使用
const handleRef = useRef<Handle>(null);
// handleRef.current?.get();
return <App value="hello" ref={handleRef} />;
复制代码
自定义hook需要注意的
有如下钩子
const useCustomHook = () => {
const [state, setState] = useState("");
const set = (value: string) => {
if (!value) return;
setState(value);
};
return [state, set];
};
// 使用
const [state, setState] = useCustomHook();
setState('hello') // This expression is not callabl
复制代码
自定钩子还需要定义返回值才行
- const useCustomHook = () => {
+ const useCustomHook = (): [string, (value: string) => void] => {
复制代码
React.forwardRef
React.forwardRef<T, P = {}>只需要传props的类型和ref的类型，第一个T是ref的类型，P是props的类型
const App = React.forwardRef<HTMLDivElement, AppProps>(({ value }, ref) => {
return <div ref={ref} />;
});
// 使用
const ref = useRef<HTMLDivElement>(null);
return <App value="hello" ref={ref} />;
复制代码
React.ForwardRefRenderFunction
定义为该类型的函数可以放进React.forwardRef函数中作为参数
// 定义
const forwardRender: React.ForwardRefRenderFunction<
HTMLDivElement,
AppProps
> = ({ value }, ref) => {
return <div ref={ref} />;
};
const App = React.forwardRef(forwardRender);
// 使用
const ref = useRef<HTMLDivElement>(null);
return <App value="hello" ref={ref} />;
复制代码
React.createContext
泛型有自动推断的功能，所以useContext就不需要再写上类型了
interface ContextType {
getPrefixCls: (value: string) => string;
}
const context = React.createContext<ContextType>({
getPrefixCls: (value) => `prefix-${value}`,
});
const App = () => {
const { getPrefixCls } = useContext(context);
getPrefixCls("App"); // prefix-App
return null;
};
复制代码
React.cloneElement
如果使用的React.FC定义的组件，它的children类型默认是React.ReactNode，需要显式转为React.ReactElement
const App: React.FC = ({ children }) => {
return React.cloneElement(children as React.ReactElement, { value: "hello" });
};
// 也可以覆写定义
const App: React.FC<{ children: React.ReactElement }> = ({ children }) => {
return React.cloneElement(children, { value: "hello" });
};
复制代码
React.ComponentType
通过React.ComponentType<P>定义的组件可以将变量名传入组件，在组件内调用，高阶组件通常会使用
interface AppProps {
value: string;
}
const App: React.FC<AppProps> = (props) => {
return null;
};
// React.ComponentType定义组件
function HOC<T>(Component: React.ComponentType<T>) {
return function (props: T) {
return <Component {...props} />;
};
}
const WrappedComponent = HOC(App);
// 调用
<WrappedComponent value="hello" />
复制代码
泛型参数的组件
泛型参数的组件是typescript2.9版本新增的，第一次看见是在ant-deisgn里
一个很简单的例子就是Select组件
<Select<number>>
<Select.Option value={1}>1</Select.Option>
<Select.Option value={2}>2</Select.Option>
</Select>
复制代码
类组件的定义
// 定义泛型参数的组件
class GenericComponent<P> extends React.Component<P> {
internalProp: P;
constructor(props: P) {
super(props);
this.internalProp = props;
}
render() {
return null;
}
}
type Props = { a: number; b: string };
<GenericComponent<Props> a={10} b="hi" />; // OK
<GenericComponent<Props> a={10} b={20} />; // Error
复制代码
函数组件的定义
function GenericComponent<P>(props: P) {
const internalProp = useRef(props)
return null;
}
复制代码
函数组件写起来可简洁太多了…
事件处理
也是多种多样
const App = () => {
// React.MouseEventHandler
const onClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
console.log(e.currentTarget.value);
};
// React.ChangeEventHandler
const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
console.log(e.currentTarget.value);
};
// React.FocusEventHandler
const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
console.log(e.currentTarget.value);
};
return <input onClick={onClick} onChange={onChange} onFocus={onFocus} />;
};
复制代码
如果有事件不清楚该如何定义类型，可以点组件上的事件名去看看定义
需要注意的是只有e.currentTarget才会有对应的元素类型，e.target是没有的，它的类型是EventTarget
总结
想不出还有啥了，想起来再补充
ts自带了一些工具泛型，比如Omit、Pick，在开发的时候还是有帮助，可以看看我以前的总结
最后，祝大家身体健康，工作顺利！
太惨了，tsx连代码高亮都没有，只能说还是prismjs好使，highlightjs不太行
作者：ZHANGYU
链接：https://juejin.im/post/5ed36b616fb9a047fa04f112
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
