公开课第二期:Typescript的学习与使用

简介: 里和大家聊天,发现有很多同学对typescript的掌握有点问题可是我的文章,都会用typescript来写。我就有点郁闷了,辛辛苦苦写出来,一大半的人表示看不懂 ~ 万万没想到,typescript居然成为了大家进步的障碍!这简直不能忍。于是决定开一个免费的课程,跟大家分享一下如何学习以及使用typescript。帮助大家对typescript有一个正确的认知。也不一篇一篇文章写出来了,这太慢!课程里半个小时能说完的东西,写文章可能都要写好几篇才说得清楚。

在群里和大家聊天,发现有很多同学对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
  };
}
相关文章
|
7月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
131 0
|
7月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
341 0
|
7月前
|
JavaScript
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
67 0
|
3月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
52 4
|
2月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
56 0
|
2月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
29 0
|
5月前
|
JavaScript 前端开发 安全
如何学习typescript?
【7月更文挑战第9天】1. 了解其为JavaScript超集,增加类型系统和ES6特性,提升代码安全性和效率。 2. 安装 TypeScript 全局 (`npm install -g typescript`),用`tsc -v`验证,或尝试在线的TypeScript Playground。 3. 学习类型注解、基础类型(如number、string、boolean等)、any与unknown,接口和类。 4. 探索高级特性,如泛型、模块&命名空间、装饰器。 5. 实践中巩固知识,如做小项目(如用React或Vue),阅读官方文档,参与社区讨论。持续编码和实践是关键。
38 0
|
7月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
58 0
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
|
7月前
|
JavaScript
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(上)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
76 0
|
7月前
|
JavaScript 前端开发 编译器
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
73 0