Typescript

Typescript

1. 变量声明

• 字符串、number（数值、整数、浮点数）、boolean值

• any值（不确定类型）:

  let a:any = 'jack'
  

• union联合类型（可以是指定类型的任意一种）：

  let u: string|number|boolean = 'rose'
  

• Object对象:

  let p = {name:'jack',age:21}
  

  可以使用p.name，或者p[‘name’]取值

• 类型排序：1.any、unknown类型；2.Object; 3.Number|String|Boolean 4.number|string|boolean 5. 数字1 ‘小满’ false 6.never（当函数抛出异常或者永远不会结束时）

• unknown和any的区别：

  • unknown类型只能赋值给自身或者any，any可以赋值给任意类型
  • unknown类型无法读对象任何属性，方法也不能调用，any可以=》unknown比any安全

• Object和object的区别：

  • Object 类型可以是任何数据类型，类似原型链；object只能是复杂数据类型，不能是简单数据类型；
  • let a:{} 相当于let a:Object，但前者这样声明的对象无法增加属性（修改对象）

2.接口

• 枚举enum（枚举内的变量不需要声明类型）

enum Msg{
	HI = 'Hi'
	HELLO = 'Hello'
}

• 接口interface（接口内的方法不需要function关键字）

interface A {
	say(msg:msg):void
}

1. 接口同名会合并两个接口中的属性

2. 索引签名，任意key：接口中定义了[propName:string]:any后，实现的对象就可以增加任意的key和value

3. 可选值加?，比如age?:number

4. 只读 readonly，比如readonly id:number，此时该id+则不能随意修改。

5. 接口继承，实现继承后的子接口的对象需要有父、子两个接口的属性

6. 定义函数类型，比如 interface Fn{ (name:string):number[]}，则可定义方法

    const fn:Fn = function(name:string):{
    	return [1]
    }

3. 数组类型

function a(...args:any[]){
	let a:any[] = arguments //arguments返回类数组,会报错
	let a:IArguments = arguments //正确做法
}

一维数组：

let a:boolean[] = []
let a:Array<boolean> = []

二维数组：

let arr:number[][] = [[]]
let arr:Array<Array<number>> = [[]]

大杂烩数组

let arr:[number,string,boolean,{}] = [1,'',true,{}]

对象数组：

interface X:{
	name:string,
	age?.number
}
let arr:X[] = [{name:"xiaofu",age:18}]

4. 函数类型

1. 函数参数及返回值

2. 默认值：b:number = 20 ，可选参数，b?: number，两者不可同时存在

function add(a:number = 10, b:number = 20):number{
	return a + b
}

3. 对象参数

interface User{
	name:string,
	age:number
}
function add(user:User){
	return user;
}

4. 函数this的类型（只有ts可以定义）

interface X{
	user:number[]
	add:(this:X,num:number)
}
let obj:X = {
	user:[1,2,3]
	add(this:X,num:number){
		this.user.push(num)
	}
}
obj.add(4)

5. 函数重载

function findNum(ids?:number | number[]):number[]{
	if(typeof ids == 'number'){
		return user.filter(v=>v==ids)
	}
	else if(Array.isArray(ids)){
		user.push(...ids)
		return user
	}else{
		return user
	}
}

5. 联合类型

使用 | 设置多个类型联合，使用&联合两个类型

interface People{
	name:string,
	age:number
}
interface Man{
	sex:number
}
// & 连接两个接口，故参数需要设置三个属性
const xiaoman = (man:People % Man): void => {
	console.log(man)
}

类型断言：

function A(args:number|string):void{
	console.log((args as string).length)
}
或者
// 无法避免运行时错误，比如A(123)，这样会输出undefined
let A = function(args:number | string):void{
	console.log((<string>args).length)
}

临时断言：

console.log(window.abc)	//访问不成功,
console.log((window as any).abc)	

const fn = (type as any):boolean =>{
	return type as boolean
}
let bbb = fn(1)
console.log(bbb)	//输出1

6.内置对象

1. 对象类型为实例名

let num:Number = new Number(1)
let date:Date = new Date()
let reg:RegExp = new RegExp(/\w/)

2. dom元素

let div:HTMLDivElement = document.querySelector("div")
let input:HTMLInputElement = document.querySelector("input")
let input:HTMLElement = document.querySelector("section")	
let div:NodeList = document.querySelectorAll('div')
let div:NodeListOf<HTMLDivElement | HTMLElement> = document.querySelectorAll('div')

3. bom

let local:Storage = localStorage
let lo:Location = location
let promise:Promise<number> = new Promise((r)=>r(1))	//<>定义返回值类型
let cookie:string = document.cookie

7.类

• 类class

class B implements A{
	say(msg:Msg):void{
		console.log(msg + ',I am B')
	}
}
//多态：子类对象定义为父类类型
let a:A = new B()
a,say(Msg.HI)

​ ps:多态中子类对象重写父类的static方法会不成功。

继承: