ts 接口interface笔记

基础

interface obj{
    id:number,
    name:string|null,
    checked?:boolean,
    fun?:()=>string
}
var userObj:obj={
    id:1,
    name:null
}
for(var i in userObj){
    console.log(`userObj[${i}]=${(userObj as any)[i]}`)
    // console.log(`userObj[${i}]=${(<any>userObj)[i]}`)// 类型断言，两种都可以
}

 联合类型

interface obj{
    fun?:(()=>string)|string|string[];
}
var userObj:obj={
   fun:["ss"],
}
console.log(userObj.fun)
userObj={
    fun:()=>{return "111"}
}
console.log((userObj as any).fun())

继承

单继承

interface CYC{
    x:number;
    y:string
}
interface Child extends CYC{
    z?:boolean
}
var arr:Child[]=[{x:1,y:"2"},{x:2,y:"3",z:true}]
for(var i in arr){
    console.log(`arr[${i}]=${arr[i].z}`)
}

interface CYC{
    x:number;
    y:string
}
interface Child extends CYC{
    z?:boolean
}
var obj=<Child>{};
obj.x=1;
obj.y="2";
obj.z=true;

多继承

interface CYC{
    x:number
}
interface BOX{
    y:number
}
interface Child extends CYC,BOX{
    z?:boolean
}
var obj=<Child>{};
obj.x=1;
obj.y=3;
obj.z=true;
console.log(obj);

 

只读readonly

interface cyc{
    readonly a:string
    b:number
}
var obj:cyc={a:"4",b:5}
console.log(obj.a);
// obj.a=5;//会报错
obj.b=6
console.log(obj.b)

数组属性

interface log{
    date:string,
    log:string
}
interface params{
    id:number,
    name:string,
    arr:Array<log>
}
var obj:params={
    id:1,
    name:"你好",
    arr:[{date:"2025/06/04",log:"迟到"}]
}
console.log(obj)
console.log(<string>obj.arr[0].date)

任意类型属性

格式       [propName:string]:any,

[key:string]:any;//代表可以添加添加任意数量，任意类型参数  那个key你可以改成paramsName啊，随便命名，不重要

interface cyc{
    id:number;
    [key:string]:any;//代表可以添加添加任意数量，任意类型参数  那个key你可以改成paramsName啊，随便命名，不重要
}
var obj:cyc={
    id:1,
    name:"小白",
    name1:"小白1"
}
console.log(obj)
console.log(obj.name1)

类型断言绕过接口必填项和未声明项

interface cyc{
    id:number;
}
var obj:cyc={width:10} as any; 
console.log(obj)

接口描述函数类型

这里注意，我因为只有一个变量，才id=>,如果你有2个变量你就得(id,name)=>

interface cyc{
    (id:number):number;
}
var search:cyc=id=>{
    return id*2;
}
console.log(search(3))

 接口声明数组

interface cyc{
    [key:number]:string,
    length:number//这里要定义，不然数组的默认属性length读不到
}
var a:cyc=["2","bbb","3"]
console.log(a);
console.log(a.length);

类类型

interface cyc{
  ids:string;
  log():void;
}
class BOX implements cyc{
    ids:string;
    log(){
        console.log(this.ids);
    };
    constructor(idArr:Array<number>){
        this.ids=idArr.join(",")
    }
}
var arr:Array<number>=[1,2,34,5];
var box=new BOX(arr);
box.log()

利用接口返回类的实例。

var a=new A(),  这个new A()是获取A的实例，以下案例实现的是怎么把new抽出来公共。全靠你的悟性了，孩子。  

interface a{
    new (x:number):b;
}
interface b{
    tick():void;
    hover():void;
}
function create(A:a,x:number):b{
    return new A(x);
}
class c implements b{
    constructor(x:number){

    }
    tick(): void {
        console.log("C")
    }
    hover():void{
        console.log("D")
    }
}
var ss=create(c,1);
ss.tick();
ss.hover();

混合类型

interface cyc{
    (start:number):string;
    interval:number;
    reset():void;
}
function box():cyc{
    let a=<cyc>function(start:number){ console.log(start);}
    a.interval=123;
    a.reset=function(){
        console.log(this)
        debugger
    };
    return a;
}
let c=box();
c(10);
c.interval=5;
c.reset()
debugger

 

接口继承类

class cyc{
    public state:number=1;
}
interface box extends cyc{
    getSome():void;
}
class A extends cyc implements box{
    getSome() {
        console.log(this.state);
    }
}
var a=new A();
a.getSome();