ts学习3

接口:抽象类（有抽象的也有非抽象的） 接口必须都是抽象的，没有具体的是实现

接口的概念： 就是描述数据的结构或者形状 定义好结构 去针对结构进行实现

type 和interfac 区别

一般情况下描述对象 类 我们采用interface 更多一些 interface 无法声明联合类型 type 可以快速声明类型 联合类型 工具类型只能采用type type不能重名

type 用的更多 能用type 就type 不能用就用interface 复杂类型采用type

interface Iperson{
userName:sting,
age:number
}

let person:Iperson={
userName:'cxk'
age:30,
adderss:'jilong'//这里会报错
}
因为是声明对象，要保证声明对象跟接口保持一致

可以通过赋值来取消报错
通过赋值完成兼容

let obj={
userName:'cxk'
age:30,
adderss:'jilong'
}
let person:Iperson=obj


类似于

class Per{
user!:string;
}
class Chi exteds Per{
address!:string;
}
let person:Per=new Chi()

可以看成在父类的基础上增加属性


但是取值的时候person.adderss 会提示安全性问题



接口可以描述函数

interface ICounter{
():number,
count:number
}
或者
type ICounter{
():number,
count:number
}


let counter:()=>number =()=>{ //这样会报错
 return counter.count  

}
counter.count=0;

改成这样解决
const counter:ICounter =()=>{
 return counter.count  

}
counter.count=0;

例子：

interface IVeg{
name :string
taste:string
size:number
color:string
}
const evg:IVeg={
name:'西红柿',
taste:'舔',
size：50
}

这里会报错缺少color 属性

解决方案
interface IVeg{
name :string
taste:string
size:number
color？:string
} 


或者断言
const evg:IVeg={
name:'西红柿',
taste:'舔',
size：50
} as IVeg

例子

interface IVeg{
name :string
taste:string
size:number

}
const evg:IVeg={
name:'西红柿',
taste:'舔',
size：50，
color：'RED'
}
//提示红色多余

断音方式解决 
或者
使用接口的合并（不推荐 混乱代码）
interface IVeg{
name :string
taste:string
size:number

}
interface IVeg{
color：string

}

或者
使用借口的继承
interace Ivegetable extens IVeg{
    color?:'string'
}

const evg:Ivegetable={
name:'西红柿',
taste:'舔',
size：50，
color：'RED'
}


借口任意值

interace Ivegetable extens IVeg{
    color?:'string',
    [key：string]：any
    
    
}

索引接口 某些场景下使用

interface IArray{
[key:number]:any,
push():void//这里入股加了push 用于数组 没加用与map 下标为数字的对象
}





interface ResponseData{
username:string,
token:string
}
interface ReturnVal{
code:number,
data:ResponseData
}
通过索引访问付，取值
type Iusername=ReturnVal['data']['username'];


type Ikeys=ReturnVal[keyof ReturnVal];
相当于联合类型
Ikeys=[number|  ResponseData]

接口的实现都可以通过类来实现

interface Speakble{
speak():void 实现的是原型方法
speak:()=>{} 实现的是实例方法

}

class Speaker implement Speakable{


}

implement是实现的意思

这里的代码就是告诉 接口可以继承类 并没有什么叼用

class Dog{
constructor(public name:string){}
}
class Cat{
constructor(public name:string){}
}
function createInstance(clazz:typeof Dog|typeof Cat){
return new clazz
}

const instance=createInstance(Cat)

这里类的类型需要通过typeof 来获取类型

如果根据传入的是啥返回的是啥的实例类型引入泛型
泛型 ：泛型坑位（函数的形参） 刚开始时候不确定，通过使用来确定类型



①

function createInstance<T>(clazz:{new ():T}){
    return new clazz
    }
    
②
    
    
    
function createInstance<T>(clazz:new ()=>T){
return new clazz }

    
    
    ③
    

interface:IClazz<T>{
    new(name:sring):T
    }
    
    function createInstance<T>(clazz:new IClazz<T>,name:string){  return new clazz(name ) }
    
    
    ④
    
    
    type IClazz<T>=new (name:string)=>T
    
    function createInstance<T>(clazz:IClass<T>,name:string){
    return new clazz(name)
    }
  
    


泛型可以用于 函数 接口 类 type
    
    
    const createArr=<T>(times:number,val:T):T[]=>{
    return Array.from({length:times}).fill(val) as T[]
    
    
    }
    
    console.log(createArr(3,'abc'))



    写辅助函数的时候可以写多个泛型用于保存值
    
    
    function swap<T,K>(tuple:[T,K]:[K,T]){
    return [tuple[1],tuple[0]]
    }


    const r=swap['12',1]
    
    
    
    
    const forEach=(arr:any[],callback:(val:any)=>void)=>{
    for(let i=0;i<arr.length,i  ){
                           callback(arr[i])
                                   }
    
    
    }
                                   
                                   
                                   
    改
                                   
 const forEach=<T>(arr:<T>[],callback:(val:T)=>void)=>{
    for(let i=0;i<arr.length,i  ){
                           callback(arr[i])
                                   }
    
    
    }
                                   
                                   
      forEach([1,2,3],funttion(val){console.log(val)})
                                   
                                   
                                   改
                                   
//IForEach<T> 表示使用接口的时候绑定类型
//<T>():viod 在使用这个函数的函数传入类型    
interface IForEach{
<T>(arr:T[],callback:(val:T)=>void):void
                                 
}                              
const forEach:IForEach=(arr,callback)=>    {
    for(let i=0;i<arr.length,i  ){
                           callback(arr[i])
                                   }
    
    
    }

    
    
                                   
 type            IForEach      =<T>(arr:T[],callback:(val:T)=>void):void;                 
    
    






type ICallback= <T>(val:T)=>void  //函数执行传入泛型
type IForEach=<T>(arr:T[],callback:ICallback):void;
  const forEach:IForEach=(arr,callback)=>    {
    for(let i=0;i<arr.length,i  ){
                                   //ts 并没有真正的执行内部的callback(arr[i]) 而是类型推导    ts 不会深入执行并这例子代码出类型推导
                                   callback(arr[i])
                                   }
    
    
    }  
    
    但是下面这种能推导出类型，上面是错误写法，虽然都不会报错
    
    

type ICallback<T>= (val:T)=>void //使用接口传入泛型
type IForEach=<T>(arr:T[],callback:ICallback<T>):void;   
       

这篇好文章是转载于：学新通技术网