ts基础-5.interface

接口定义

interface UserInfoFace {
    name: string
}

let zhangsan :UserInfoFace = {
    name: "张三"
}
console.log(zhangsan.name)

可选属性

interface UserInfoFace {
    name: string
    age?:number
    addr?:string
    like?:string[]
}

let zhangsan :UserInfoFace = {
    name: "张三",
}
zhangsan.age = 23
console.log(zhangsan.name)

只读属性

interface UserInfoFace {
    readonly id: number
    name: string
    age?:number
    addr?:string
    like?:string[]
}

let zhangsan :UserInfoFace = {
    id: 1,
    name: "张三",
}
console.log(zhangsan.id)
// zhangsan.id = 12 // 不能修改
zhangsan.age = 23
console.log(zhangsan.name)

添加方法

interface UserInfoFace {
    readonly id: number
    name: string
    age?:number
    addr?:string
    like?:string[]
    getName: ()=>string
    setAge: (age:number)=>void
}

let zhangsan :UserInfoFace = {
    id: 1,
    name: "张三",
    getName: function ():string{
        return this.name
    },
    setAge:function (age:number){
        this.age = age
    }
}
console.log(zhangsan.id)
// zhangsan.id = 12 // 不能修改
// zhangsan.age = 23
zhangsan.setAge(21)
console.log(zhangsan.age)
console.log(zhangsan.getName())
console.log(zhangsan.name)

继承 extends

interface People {
    gender: number // 0 女 1 男  2 未知
}
interface UserInfoFace extends People{
    readonly id: number
    name: string
    age?:number
    addr?:string
    like?:string[]
    getName: ()=>string
    setAge: (age:number)=>void
}

let zhangsan :UserInfoFace = {
    id: 1,
    name: "张三",
    getName: function ():string{
        return this.name
    },
    setAge:function (age:number){
        this.age = age
    },
    gender: 1
}
console.log(zhangsan.id)
// zhangsan.id = 12 // 不能修改
// zhangsan.age = 23
zhangsan.setAge(21)
console.log(zhangsan.age)
console.log(zhangsan.getName())
console.log(zhangsan.name)

交叉类型

会将两个类型中的属性合并

interface People {
    gender: number // 0 女 1 男  2 未知
}
interface UserInfoFace {
    readonly id: number
    name: string
    age?:number
    addr?:string
    like?:string[]
    getName: ()=>string
    setAge: (age:number)=>void
}

let zhangsan :UserInfoFace & People = {
    id: 1,
    name: "张三",
    getName: function ():string{
        return this.name
    },
    setAge:function (age:number){
        this.age = age
    },
    gender: 1
}
console.log(zhangsan.id)
// zhangsan.id = 12 // 不能修改
// zhangsan.age = 23
zhangsan.setAge(21)
console.log(zhangsan.age)
console.log(zhangsan.getName())
console.log(zhangsan.name)