深入浅出TS | 青训营

78 阅读3分钟

1.为什么学习TS

TS相较于JS的区别 TypeScript是javascript的超集,用于解决大型项目的代码复杂性。 强类型,支持静态和动态类型。
可以在编译时发现错误
不允许改变变量的数据类型

TS带来了什么

  类型安全
  下一代JS特性
  完善的工具链
  不仅仅是一门语言,更是生产力工具!
   

2.TS基础

  数据类型:1.booleannumberstring
           2.枚举enum
           3.ant,unknow,void
           4.never
           5.数组相关类型
           6.元组类型tuple
   函数类型:
           
           定义: TS定义函数类型时要定义输入参数类型和输出类型
           输入参数:参数支持可选参数和默认参数
           输出参数:输出可以自动推断,没有返回值时,默认为void类型
           函数重载:名称相同但参数不同,可以通过重载支持多种类型
   接口:
           定义:接口是为了定义对象类型
           特点:
           -可选属性: ?
           -只读属性: readonly
           -可以描述函数类型
           -可以描述自定义属性
           总结:接口非常灵活duck typing
   类:
           定义:写法和JS差不多,增加了一些定义,
           特点:
           -增加了publicprivateprotected修饰符
           -抽象类:
           -只能被继承,不能被实例化
           -作为基类,抽象方法必须被子类实现
           - interface约束类,使用implements关键字
  
     

TS进阶

 高级类型:
         1.联合类型|
           数据类型的或运算符
         2.交叉类型&
           数据类型的交运算符
         3.类型断言
         4.类型别名(type VS interface)
                 定义:给类型起个别名
                 相同点:
                  1.都可以定义对象或函数
                  2.都允许继承
                 差异点:
                  1. interface是TS用来定义对象,type是用来定义别名方便使用;
                  2. type可以定义基本类型,interface不行;
                  3. interface可以合并重复声明,type不行;
          5.泛型T
                基本定义:
                 1.泛型的语法是<>里面写类型参数,一般用T表示;
                 2.使用时有两种方法指定类型:
                      1.定义要使用的类型
                      2.通过TS类型推断,自动推导类型
                 3.泛型的作用是临时占位,之后通过传来的类型进行推导;
                 操作符:
                 typeof:获取类型
                 keyof:获取所有的键
                 in:便利枚举类型
                 T[K]:索引访问
                 extends:泛型约束
                 常用工具类型:
                 ●Partial<T>:将类型属性变为可选
                 ●Required<T> :将类型属性变为必选
                 ●Readonly<T> :将类型属性变为只读
                 ●Pick、 Record...
                 

TS实战

声明文件:
  ●declare:三方库需要类型声明文件
  ●.d.ts: 声明文件定义
  ●@types: 三方库TS类型包
  ●tsconfig.json:定义TS的配置
泛式艺术后端接口类型

TS感悟

TypeScript对比JavaScript:

TypeScript的使用场景:

  1. 大型项目:TS的类型系统和模块化特性使得它非常适合大型项目的开发。类型检查可以帮助捕获错误并提供更好的代码提示,模块化能力使得项目结构更清晰、易于维护。
  2. 团队合作:TS的类型系统可以充当代码文档,提高团队成员之间的沟通效率。类型注解可以明确函数参数和返回值的类型,减少误用和错误。
  3. 前端框架:许多流行的前端框架(如Angular)都使用TS作为主要开发语言。TS提供了更丰富的工具和特性,可以更好地支持框架的开发和扩展。
  4. 第三方库和工具:TS拥有庞大的类型定义文件(Type Declarations)社区,可以为许多现有的JS库和工具提供完善的类型支持。这使得使用第三方库时能够获得更好的开发体验和代码可靠性。

JavaScript的使用场景:

  1. Web开发:JS是Web开发的标准语言,几乎所有的现代浏览器都原生支持JS。对于简单的网页交互、动态内容和前端特效,JS是首选语言。
  2. 快速原型开发:JS的动态特性使得它非常适合快速原型开发。不需要编译步骤,可以直接在浏览器中运行和调试代码。
  3. 跨平台开发:JS可以用于开发跨平台应用程序,例如使用Electron开发桌面应用程序、使用React Native或Ionic开发移动应用程序等。
  4. 小型项目和脚本:对于简单的小型项目和脚本,JS提供了简洁的语法和灵活性。不需要引入额外的类型系统或编译步骤。