前端与 HTML | 青训营笔记

用户7905203499293
46 阅读3分钟

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

一、本堂课重点内容：

  • Typescript 学习背景介绍
  • Typescript 基础语法讲解
    • Typescript类型
    • 泛型
    • 类型别名 & 类型断言
  • Typescript 高级类型讲解
    • 联合类型 & 交叉类型
    • 类型守卫 & 类型保护
    • 组合应用实战
  • Typescript 工程应用介绍

二、详细知识点介绍：

  • JS与TS区别

    JS是动态类型（在代码执行过程中才对变量类型进行匹配）

    TS是静态类型（需要先编译，再执行）

  • TS基础数据类型

    变量定义【格式】变量：类型，如：const a:string = 'hi';

    1. 字符串 string
    2. 数字 number
    3. 布尔值 boolean
    4. null
    5. undefined

  • TS对象类型

    一般规则：对象类型的命名要在前面加一个大写的i，用于区分类及其他。

    用关键词interface进行定义

    格式：
interface I对象名{
    // key:类型
    age:number; 
    // 只读属性：约束属性不可在对象初始化外赋值
    readonly pId:number;
    // 可选属性：定义该属性可以不存在
    hobby?:string;
    // 任意属性: 约束所有对象属性都必须是该属性的子类型
    [key:string]:any;//any指任意数据类型均可
}

  • 函数类型

函数类型.png

  • 函数重载

TypeScript函数重载是指为同一个函数提供多个函数类型，它的意义在于让你清晰的知道 传入不同的参数得到不同的结果。如果不是这种情况，那就不需要使用函数重载。

一般函数重载是在原来的函数之前在开头额外进行了一次函数类型定义，在函数执行时，根传入的参数类型不同，进行不同的计算。

具体例子见：blog.csdn.net/bu_leng/art…

  • 数组类型 数组类型.png

  • Typescript补充类型 补充类型.png

  • 泛型

    不预先指定具体的类型，而在使用的时候再指定类型的一种特性

    <>写在前 image.png <>写在后 image.png 泛型约束(extends)&&默认类型(=) image.png

  • 类型别名 image.png

  • 类型断言

    类型断言可以用来手动指定一个值得类型，语法 ：值 as 类型

  • 交叉/联合类型 image.png

  • 类型保护&&类型守卫

    类型保护：访问联合类型时，处于程序安全，仅能访问联合类型中的交集部分 image.png

    类型守卫：用于获取变量类型信息，类型守卫是返回布尔值的常规函数，接受一个类型并告诉TypeScript是否可以缩小到更具体的类型

  • 类型谓词

    格式：xxx变量 is yyy类型 image.png

  • 工程应用

    • 浏览器web image.png
    • node js
      image.png

三、实践练习例子：

对TS高级类型了解不够，因此打算实践联系下高级类型的应用。

四、课后个人总结：

TS是JS的超集，具有高可读性和高可维护性，在目前企业的应用中，也广泛的采用了TS作为编程语言，主流的框架也已经支持了TS，因此，细致且深入学习TS是十分必要的。

五、引用参考：

avatar
文章
阅读
粉丝