ts学习第三天

js内置对象 1.ECMA Number Date RegExp Error XMLHttprequest 2.dom queruSelect MouseEvent 3.bom promise cookie location localstorage

一、规则-new什么实例就是什么类型

let num:Number = 123
let date:Date = new Date()
let reg:RegExp = new RegExp(/\w/)
let error:Error = new Error('错了')
let xhr:XMLHttpRequest = new XMLHttpRequest()

二、一些dom类型

let div:HTMLDivElement = document.querySelector('div')
let ul:HTMLUListElement = document.querySelector('ul')
let canvas:HTMLCanvasElement = document.querySelector('canvas')
let section:HTMLElement = document.querySelector('section')
let footer = document.querySelector('footer') as Element
// HTML(元素名称)Element
// 有一些普通的元素类型就是HTMLElement,也可以直接断言为Element
let divs:NodeList = document.querySelectorAll('div')
集合可以定义为NodeList NodeList类型支持forEach遍历
let divs:NodeListOf<HTMLDivElement | HTMLElement> = document.querySelectorAll('footer') 
// 可以传div 也可以传footer

三、一些bom类型

let local:Storage = localStorage
let lo:Location = location
let promise:Promise<string> = new Promise(res => res('c'))
promise.then(res => {
	res.
})
// 这里res.后面就会提示字符串相关方法了。同理字符串可以设置为数值类型，布尔类型...
let cookie:string = document.cookie
// cookie返回是一个字符串

class类 1.基本用法 继承 类型约束 2.修饰符 readonly private protected public 3.super原理 4.静态方法 5.get set

一、es5构建实例 new一个function,es6通过class + 名字构建类，比如 new Vue{}

interface Options{
	el:string | HTMLElement
}
interface VueCls{
	options:Options
	init():void
}
class Vue implements VueCls{
	options: Options
	constructor(options:Options) {
		this.options = options
	}
	init(): void {
		throw new Error("Method not implemented.")
	}
	
}
new Vue({
	el: '#app'
})
// implements就是用来约束class类的

抽象类(基类) abstract abstract所定义的方法都只能描述不能进行实现

abstract class Vue{
	constructor(name?:string) {
		this.name = name
	}
	getName():string {
		return this.name
	}
	abstract init(name:string):void
}
new Vue() // 实例化会报错，基类无法被实例化，但是可以被继承的类实例化
// 抽象类无法实例化
class React extends Vue{
	constructor() {
		super()
	}
	init(name:string){}
	setName(name:string) {
		this.name = name // 基类定义过了，所以可以直接使用
	}
}
const react = new React()
react.setName('xm')
console.log(react.getName())

元组类型——数组变种 let arr:(number | boolean)[] = [1, false] 一般写法 let arr1:[number, boolean] = [1, false] 元组写法

readonly用法

let arr1:readonly[number, boolean] = [1, false]
arr1[0] = 3 // 此时arr[0]不可修改

命名变可选

let arr1:readonly[x:number, y?:boolean] = [1, false]