typescript interface接口

1.定义一个接口

 interface PersonA {
    pName:string,
    pAge:number,
    pJob:string
}

let person:PersonA = {
    pName:'heson',
    pAge:18,
    pJob:'programe'
}

function printPerson(person) {
    console.log(`我是：${person.pName},我今年：${person.pAge}岁,我的工作是：${person.pJob}`)
}
printPerson(person)

 

2.让接口具备可选属性

 
//输出的
interface Circle {
    color:string,//颜色
    area:number, //面积
}
//输入的
interface CircleConfig{
    color?:string//颜色
    radius?:number//半径
}

function createCircle(config:CircleConfig):Circle {
    // :Circle 是输出限制 
    let newCircle = {color:'green',area:100}
    if(config.color){
        newCircle.color = config.color
    }
    if(config.radius){
        newCircle.area = Math.PI*config.radius*config.radius
    }
    return newCircle
}
let myCircle = createCircle({radius:100})
let myCircle2 = createCircle({radius:100,color:'green'})
console.log(myCircle,myCircle2) 

/* 
好处
1.对某些属性进行预定义
2.捕获错误
*/

 

3.只读属性，只可赋值一次，后面只可读不可写 readonly 标记

 
interface FullName{
    readonly firstName:string
    readonly lastNAme:string
}

let p:FullName = {firstName:'乐',lastNAme:'乐'}
// p.firstName = '任' 直接报错不可修改
console.log(p)

/* 
TS 中还有只读数组 ReadonlyArray<T>   Array<T>
*/
//定义方法如下 定义之后便不可再使用数组方法进行操作
//断言可以解决只读问题
// 
let arr2:number[] = [1,2,3,4]
let arrayNumber:ReadonlyArray<number> = arr2
// arr2 = arrayNumber as number

 

4.额外的属性检查

 //输出的
interface Circle {
    color:string,//颜色
    area:number, //面积
}
//输入的
//有时候可能会有未定义但是用户想要输入的属性
interface CircleConfig{
    color?:string//颜色
    radius?:number//半径
}

function createCircle(config:CircleConfig):Circle {
    // :Circle 是输出限制 
    let newCircle = {color:'green',area:100}
    if(config.color){
        newCircle.color = config.color
    }
    if(config.radius){
        newCircle.area = Math.PI*config.radius*config.radius
    }
    return newCircle
}
// 4.1.使用类型断言
let myCircle2 = createCircle({r:100,color:'green'} as CircleConfig)
// 4.2.通过字符串的索引签名  只需保证color和radius 输入正确
/* 
    interface CircleConfig{
    color?:string//颜色
    radius?:number//半径
    //键是string类型，值可以是any类型
    [propsName:string]:any
    }
*/
//4.3.对象拷贝 只会进行一层数据检查，不会进行额外的深入数据检查 所以可以通过对象拷贝，绕过
let circleOption = {radius:100,color:'green',a:'heson',b:'cooc'}
let myCircle3 = createCircle(circleOption)


 

5.函数类型 可以进行函数瘦身，精简代码，让函数更佳具有健壮性

 
interface compareFun{
    (first:number,last:number):boolean
}

/* let myCompare:compareFun=function(first:number,last:number):boolean{
    return first>last
} */
//因为函数接口会间接推断，所以以下写法均可
/* 
let myCompare:compareFun=function(a:number,b:number):boolean{
    return a>b
}  */

let myCompare:compareFun=function(a,b){
    return a>b
}

 

6.可索引类型（了解）

 interface strArr {
    [index:number]:string
}
let myArr:strArr = ['a','b']
let str6:string = myArr[1]
console.log(str6)

 

7.类类型

 //7.1描述一个属性
/* interface ClockInterface {
    currentTime:Date
}
class Clock implements ClockInterface{
    currentTime:Date
    constructor(h:number,n:number){
        console.log(h,n)
    }
} */

//7.2描述属性和方法 规范！！！
//接口只描述类的公共部分
interface ClockInterface {
    currentTime:Date
    setTime(d:Date)
}
class Clock implements ClockInterface{
    currentTime:Date
    constructor(h:number,n:number){
        console.log(h,n)
    }
    setTime(d:Date){
        console.log(d)
    }
}

 

8.类的静态部分和实例部分

 //8.1 静态部分类型 接口无法约束
//8.2 实例类型
/* interface ClockConstructor {
    new (h:number,m:number)
}
class Clock implements ClockConstructor {
    constructor(h:number,m:number){

    }
} */

 

9.接口的继承

 
// 一个接口 --成员->另一个接口  分割重用
interface Animal{
    breed:string //品种
}

interface Cat extends Animal{
    color:string //颜色
}
let cat = {} as Cat
cat.breed = '白猫'
cat.color = '白色'
//9.1 一个接口继承多个接口
interface Mammal{
    leg:number //腿的数量
}
interface Dog extends Animal,Mammal{
    color:string
}
let dog = {} as Dog
dog.breed = '黄狗'
dog.color = '黄色'
dog.leg = 4
console.log(dog)

 

查看更多关于typescript interface接口的详细内容...