【ts】的 接口和函数的约束

一、声明接口

接口 描述对象的属性 通过 interface 来说明

 interface Iobj {
     name : String 
     age : Number
 }
 let obj:Iobj = {
     name : '大耳朵图图' ,
     age : 6
 }
// console.log(obj);

二、接口的属性

1.接口的 可选属性 在属性名称 ？

// interface Itus {
//     name : String 
//     age : Number
//     wu? : String
// }

// let obj:Itus = {
//    name : '' ,
//    age : 1 ,
// }

2. 任意添加 【 ：类型 】：any

// interface Itus {
//     name : String 
//     age : Number 

// }

// let obj:Itus = {
//    name : '' ,
//    age : 1 ,
// }

3.只读属性 readonly

// interface Itus {
//     name : String 
//     age : Number 

// }

// let obj:Itus = {
//    name : '' ,
//    age : 1 ,
// }

三、接口约束数组

interface Iarr {
    [ prop:number ]:string
}

let arr:Iarr = [ '1' ,  '2'  ]

console.log(arr);

四、函数的约束

1.函数 约束 是对输入（参数） 和 输出（返回值） 约束

// function fn(  a:number , b:number  ):number {
//    return a+b
// }

2.函数的可选参数 参数?:类型 注意：可选参数后面一定不能有必填参数

// function addNum(x:number,y?:number,z?:number):number{
//     return x + y
// }

//  console.log(addNum(1,2))


// addNum(1,2,3)
// addNum(1,2)

3.函数的默认参数 变成可选参数，但是不受可选参数的限制

// function addNum(x:number,y:number=2,z:number):number{
//     return x + y
// }
// addNum(1,2,3)
// addNum(1,10)

4. 剩余参数

// function addNum(x:number,...args:number[]):number{
//     let _sum = x
//     for(let i in args){
//         _sum += args[i]
//     }
//     return _sum
// }

// addNum(1)
// addNum(1,2,3,4,5,65,7,'')

5.函数约束 ajax 小案例

function fn(url: string, meth?: string, pae?: any) {
    let xhr = new XMLHttpRequest()
    xhr.open(meth || 'GET', url)
    xhr.send(pae)
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 || xhr.status == 200) {
            console.log(xhr.response);

        }
    }
}
fn('')

6.函数约束 axios

function axios(url: string, meth?: string, pae?: any) {
    new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest()
        xhr.open(meth || 'GET', url)
        xhr.send(pae)
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 || xhr.status == 200) {
                console.log(xhr.response);
                resolve( xhr.response )
            }
        }
    })
}