TypeScript学习|青训营笔记

38 阅读3分钟

这是我参与「第五届青训营」伴学笔记创作活动的第4天

一、本堂课重点内容: d1485fbc91afbf17d1ace79710be0d0.png

二、详细知识点介绍:

  • TypeScript优势解读 3e463a0e71d18d585cd769877449f93.jpg 动态语言:在执行代码时对代码进行编译检验

    静态语言:提前对代码进行编译,纠错后运行代码

    静态语言的优点:1、增强了可读性与可维护性; 2、在多人合作的大型项目中有更好的稳定性和开发效率

      可读性增强:基于语法解析TSDoc,ide增强,编写代码相当于编写文档,便于后续阅读和理解;
      
      可维护性增强:指编译阶段可以暴露大部分错误
    

    弱类型语言:指类型转换时对格式的要求不强,eg.字符串1和数字1可以相加

    总结:TS相当于JS的超集,其支持JS共存和渐进式引入与升级

  • 编译器

    Visual Studio Code

  • 基本语法

    1、基础数据类型

    2、对象类型

      一般大写I表示类型   关键字: interface
      特殊需要:
          
          只读属性:约束属性不可在对象初始化外赋值
          
          可选属性:定义该属性不存在
          
          任意属性:约束所有对象属性都必须是该属性的子类型
    
      数组类型
      
      表示方式
          
          类型+方括号表示
          
          泛型表示
          
          元组表示
          
          接口表示
    

    3、函数类型

    声明函数类型方式:

      直接在函数上进行类型补充
      
      给函数变量赋值一个函数的类型声明(入参&出参 - 主要指参数的类型)
    

    4、函数重载 通过重载实现函数基于不同输入,输出不同内容

    5、泛型 - 变量指代

    主要特征:不预先制定具体的类型,而是在使用的时候再指定类型的一种特性

    使用情景:

      函数 - 在函数定义的括号前使用尖括号表示
      
      类;泛型接口;类型别名 - 类型名后使用尖括号表示
    

    常用语法:

      泛型约束:限制泛型必须符合字符串
      
      泛型参数默认类型
    

    6、类型别名&类型断言

    类型别名:通过type关键字定义某个别名或变量来承载比较复杂的类型

    类型断言:通过as关键字的方式进行默认类型推断

    7、字符串/数字 字面量

    通过 “|” 指定字符串/数字必须的固定值

  • 高级类型

    1、联合/交叉类型

    联合类型: A|B 表示一个值可以是几种类型之一

    交叉类型: A&B 表示多种类型叠加到一起成为一种类型,包含了所需的所有类型的特性

    2、类型保护与类型守卫

    类型保护:联合类型 + 类型保护 = 自动类型推断

    类型守卫:定义一个函数,返回值是一个类型谓词,生效范围为子作用域

    3、索引类型

    关键字:

      keyof - 相当于取值对象中所有key组成的字符串字面量
      
      in - 相当于取值 字符串字面量 中的一种可能,配合泛型P,即表示每个key
      
      ? - 通过设定对象可选选项,即可自动推导出子集类型
    

    4、函数返回类型(借用泛型)

    关键字:

      extends - 跟随泛型出现时,表示类型推断,表达可类比三元表达式
      
      infer - 出现在类型推荐中表示定义类型变量,用于指代类型
    
  • 工程应用

    webpack