typescript 4 学习

// ts4

let root =document.getElementById('root')

let children:HTMLCollection = root!.children

let childNodes:NodeListOf<ChildNode>=root!.childNodes;

//泛型类 用到了泛型的类

class MyArray<T>{

private list:T[];

add(element:T){

this.list.push(element)

}

getMax():T{

let maxVal = this.list[0]

for(let i=1;i<this.list.length;i++){

if(this.list[i]>maxVal){

maxVal = this.list[i]

}

}

return maxVal;

}

}

let arr3 = new MyArray<number>()

arr3.add(1)

arr3.add(2)

arr3.add(3)

console.log(arr3.getMax())

// 泛型的接口 可以用来约束函数

interface Caculate{

<T>(a:T,b:T):T

}

let add:Caculate = function(a,b){

return a;

}

// 多个泛型如何用 //不借助中间变量 交换两个变量的值

// tuple 元组

function swap<A,B>(tuple:[A,B]):[B,A]{

return [tuple[1],tuple[0]]

}

let ret = swap([1,'a'])

// 默认泛型

function createArray<T=number>(length:number,value:T):T[]{

let arr:T[] = []

for(let i=0;i<length;i++){

arr[i]=value

}

return arr

}

// <T=number> 默认泛型

// 泛型约束

function logger<T>(val:T){

}

interface LengthWise{

length:number

}

// 泛型继承一下

function logger2<T extends LengthWise>(val:T){

console.log(val.length)

}

logger2('hello')

logger2(true)//做泛型检查 否则报错

// 泛型接口 在定义接口的时候也可以指定泛型

interface Cart<T>{

list:T[]

}

// 定义Cart 这样的对象

let cart:Cart<number>={list:[1,2,3]}

// 泛型的别名 type定义

type Cart2<T>={list:T[]} | T[];

let c1:Cart2<number> = {list:[1,2,3]}

let c2:Cart2<number> = [1,2,3]

// 结构类型系统

// 接口的兼容性

interface Animal5{

name:string;

age:number

}

interface Person{

name:string;

age:number

gender:boolean

}

function getAnimalName(animal:Animal){

return animal.name

}

let p15:Person = {name:'guozimo',age:10,married:true}

getAnimalName(p15)

// 传入的类型能多不能少 多了可以兼容 少了就报错

// 基本类型的兼容性检查

let num:string|number;

let str:string = 'zhufeng'

num = str

let num2 = {

toString():string

}

let str2:string = 'jiagou'

num2 = str2

class Animals{

public name:string = 'guozimo'

}

class Bird extends Animals{

public age:number = 9

}

class Something extends Animals{

public home:string = '北京'

public name:string = 'guozimo'

public age:number = 9

}

let a:Animals;

a = new Bird();

let b:Bird;

b = new Animals()

b = new Something()// 报错 必须要有name和age属性才行

type sumFunction =(a:number,b:number)=>number;

let sum:sumFunction

function func1(a:number,b:number){

return a + b

}

function func3(a:number,b:number,c:number){

return a + b+ c

}

sum = func1

sum = func3 // 参数多了不行 返回值不一样也不行

// 参数少也是可以的

// 泛型的兼容性

// interface 接口内容为空 可以赋值 不为空不能赋值

// 枚举兼容性

// 数字类型 和枚举类型是兼容的 互相兼容

enum Colors{

Red,

Blue,

Yellow

}

let c:Colors;

c = Colors.Red

c = 0

let num:number

num3 = Colors.Yellow






























 

发布了363 篇原创文章 · 获赞 32 · 访问量 15万+

猜你喜欢

转载自blog.csdn.net/gwdgwd123/article/details/104329545