TypeScript 入门|青训营笔记

46 阅读2分钟

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

课堂重点知识

  1. TypeScript发展与基本语法
  2. TypeScript高级数据类型

知识总结及实例

TypeScript与基本数据类型

  • TypeScript与JavaScript区别

image.png

image.png

  • 数据类型

定义: 变量 变量名:变量类型=值

基本数据类型:

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

对象数据类型:

image.png

注: 只读属性(readonly):约束属性不可在对象初始化外赋值 可选属性(?):定义该属性可以不存在 任意属性([]):约束所有对象属性都必须是该属性的子类型

函数类型:

image.png

函数重载:根据函数参数的不同,加载不同的方法

数组类型:

image.png

其他类型:

空类型:void

任意类型:any

枚举类型:支持枚举到枚举名的正、反向映射

image.png

泛型:

主要特征:不预先指定数据类型,在函数执行过程中根据传入参数的类型才确定类型 image.png

泛型约束:限制泛型必须符合字符串。使用extends来实现

泛型参数默认类型。使用=实现

image.png

类型别名:通过type关键字定义了一个对象的别名类型

类型断言 :通过as关键字

image.png

| 表明是其中的一个

TypeScript高级数据类型

  • 联合类型: IA|IB;表示一个值可以是几种类型之一
  • 交叉类型: IA&IB 表示多种类型叠加到一起成为一种类型,他包含了所需的所有类型的特征

image.png

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

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

  • merge函数类型

image.png

  • 函数返回值类型

image.png

TypeScript工程应用

  • web
  1. 配置webpack loader相关配置
  2. 配置tsconfig.js文件
  3. 运行webpack启动/打包
  4. loader处理ts文件时,会进行编译与类型检查
  • node

image.png

相关扩展

TypeScript官网: www.tslang.cn/docs/handbo…

个人总结

学习了TypeScript与JavaScript的区别,以及相关的发展史,掌握相关数据类型和语法,可以熟练使用泛型及泛型约束还有相关的高级数据类型。