在群里和大家聊天,发现有很多同学对typescript的掌握有点问题
可是我的文章,都会用typescript来写。我就有点郁闷了,辛辛苦苦写出来,一大半的人表示看不懂 ~ 万万没想到,typescript居然成为了大家进步的障碍!这简直不能忍。
于是决定开一个免费的课程,跟大家分享一下如何学习以及使用typescript。帮助大家对typescript有一个正确的认知。也不一篇一篇文章写出来了,这太慢!课程里半个小时能说完的东西,写文章可能都要写好几篇才说得清楚。
进群方式:添加我的微信 Icanmeetu,并备注typescript,我邀请你进群。
内容大概包括:
1.正确认知typescript
2.上手项目
3.学习方法
4.基本使用
5.泛型
6.声明文件
7.结合react
新的文章本来是想跟大家介绍自定义hooks如何解决数据请求的问题,因此封装了如下的代码,如果阅读这样的代码还会因为typescript而感到吃力的话,ts公开课欢迎你来听。
mport { useState, useEffect } from 'react'; export type APIFunc<T, P> = (params: P) => Promise<T> /** * @param {api} —api.ts件中封装的接口请求方法 * @param {defaultData} 页面初始化时接口数据的默认值 * @param {params} 接口所需要的参数 注意,这里请传入接口需要的完整的参数 * @param {delay} 当该值为true时,接口不请求 */ export default function useInitial<T, P>(api: APIFunc<T, P>, defaultData: T, _params: P, delay?: boolean) { const [param, setParam] = useState<P>(_params); const [refreshing, setRefreshing] = useState<boolean>(true); const [errMsg, setErrMsg] = useState<string>(''); const [data, setData] = useState<T>(defaultData); const [loading, setLoading] = useState<boolean>(true); useEffect(() => { if (!refreshing || delay) { return; } if (delay) { return; } getData(param || _params); }, [refreshing, delay]); function getData(params: P) { api(params).then(res => { let data = res.data || defaultData; // @ts-ignore if (Object.prototype.toString.call(data) === '[object Array]' && data.length === 0) { // @ts-ignore data = defaultData || []; } setData(data); setErrMsg(''); setRefreshing(false); setLoading(false); }).catch(e => { setErrMsg(e.message); setRefreshing(false); setLoading(false); }); } function setParams(params: P, refreshing: boolean) { setParam(params); refreshing && getData(params); } return { refreshing, errMsg, data, setData, setRefreshing, setErrMsg, loading, setLoading, params: param || _params, setParams }; }