【金秋打卡】第4天 Vue3 + Typescript 从0到1开发通用基础组件（2-15~2-16）

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
2-15 类型别名，字面量 和 交叉类型
2-16 内置类型

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、类型别名，字面量 和 交叉类型；
2、内置类型；

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：

一、类型别名，字面量 和 交叉类型
1、类型别名：type alias
用type重新定义各种类型的别名

let sum: (x: number, y: number) => number
const result = sum(1, 2)
let sum2: (x: number, y: number) => number
const result2 = sum2(1, 2)

// 当多个变量类型一致时，为了减少代码，可以使用类型别名，将类型抽取出来:
type PlusType=(x:number,y:number)=>number
let sum3:PlusType;
const result4=sum3(2,4);

2、字面量
以常量作为类型写在冒号后面，此时冒号前面的变量只能赋值为该常量；
字面量可以用 | 设置多个，形成固定的赋值范围；

type StrOrNumber=string|number;
let result5:StrOrNumber='123';
//字面量指定类型
const str0:'name'='name';
const number:1=1
type Directions='up'|'Down'|'left'|'Right';
let toWhere:Directions='left'

3、交叉类型
可以理解为是对Interface进行扩展；

interface IName{
  name:string
}
type Iperson=IName&{age:number}
let person:Iperson={name:'123',age:23}

二、内置类型
1、全局对象

//global objects
const a:Array<number>[1,2,3]
const date new Date()
date.getTime()
const reg /abc/
reg.test('abc')

2、内置对象
非构造对象，封装了一系列的静态方法；

//build-in object
Math.pow(2,2)

3、DOM 和 BOM相关的标准对象

//DOM and BOM
let body document.body
let allLis document.querySelectorAll('li')
allLis.keys()
document.addEventListener('click',(e)={
  e.preventDefault()
}

4、功能性/帮助性的类型 Utility Types
Partial 可以快速把某个接口类型中定义的属性变成可选的;

interface IPerson {
  name:string
  age:number
}
let viking:IPerson = { name:'viking',age:20 }
type IPartial Partial<IPerson>
let viking2:IPartial = { name:'viking' }

Omit 让可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型;

type IOmit Omit<IPerson,'name'>
let viking3:Iomit = { age:20 }