课程名称:Vue3 + Typescript 从0到1开发通用基础组件
课程讲师:张轩
课程内容:
今天课程学习的主要知识点内容包括:
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 }