这是我参与「第五届青训营」伴学笔记创作活动的第4天
一、本堂课重点内容:
二、详细知识点介绍:
-
TypeScript优势解读
动态语言:在执行代码时对代码进行编译检验
静态语言:提前对代码进行编译,纠错后运行代码
静态语言的优点: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