ts接口

接口

关键字 interface

interface IUser {
    name: string
}

let user: IUser = {name: 'Tom'}
let user1: IUser = {name: 'Jim'}
console.log(user)
// { name: 'Tom' }

接口的可选属性，属性字段+?表示

interface IUser {
    name: string
    nickname?: string //可选属性
}

let user: IUser = {name: 'Tom'}
let user1: IUser = {name: 'Jim', nickname: 'jimmy'}
console.log(user)
console.log(user1)
//{ name: 'Tom' }
// { name: 'Jim', nickname: 'jimmy' }

接口的成员变量，属性，是可读可写的

interface IUser {
    name: string
    nickname?: string //可选属性
}

let user: IUser = {name: 'Tom'}
user.name = 'tom'
let user1: IUser = {name: 'Jim', nickname: 'jimmy'}
console.log(user)
console.log(user1)
// { name: 'tom' }
// { name: 'Jim', nickname: 'jimmy' }

只读属性，关键字 readonly，是不可更改的

interface IUser {
    readonly gender: string
    name: string
    nickname?: string //可选属性
}

let user: IUser = {name: 'Tom', gender: 'boy'}
user.name = 'tom'
user.gender = 'girl'// 这里是错的
let user1: IUser = {name: 'Jim', nickname: 'jimmy', gender: 'boy'}
console.log(user)
console.log(user1)
// { name: 'tom' }
// { name: 'Jim', nickname: 'jimmy' }

接口的继承，关键字 extends，等于把两个接口合成一个接口

interface IGender {
    readonly gender: string
}

interface IUser extends IGender {
    name: string
    nickname?: string //可选属性
}


let user: IUser = {name: 'Tom', gender: 'boy'}
user.name = 'tom'
let user1: IUser = {name: 'Jim', nickname: 'jimmy', gender: 'boy'}
console.log(user)
console.log(user1)
// { name: 'tom' }
// { name: 'Jim', nickname: 'jimmy' }

接口多继承

interface IGender {
    readonly gender: string
}

interface ILanguage {
    lang: string
}

interface IUser extends IGender, ILanguage {
    name: string
    nickname?: string //可选属性
}


let user: IUser = {name: 'Tom', gender: 'boy', lang: 'Zh'}
user.name = 'tom'
let user1: IUser = {name: 'Jim', nickname: 'jimmy', gender: 'boy', lang: 'en'}
console.log(user)
console.log(user1)

// { name: 'tom', gender: 'boy', lang: 'Zh' }
// { name: 'Jim', nickname: 'jimmy', gender: 'boy', lang: 'en' }