typescript（六）ts中的接口

ts中的接口和类型别名很相似，从不同中学习认识接口。

两者的区别

接口只适用于对象类型定义，无论是单个对象还是函数参数为对象，数组元素为对象的定义，然而类型别名适用于任何变量，并且可以是基础类型。可以把这两个重复的类型注解，定义成统一的接口。

1.接口的应用：

interface Iob {
    unname: string,
    age: number
}

// 单个变量接口的应用
const objA: Iob = { unname: '小红', age: 16 }

// 函数中的参数为对象时接口的应用
function fnobA(girl: Iob) {
    return girl.unname
}
fnobA({ unname: '小红', age: 16 })

// 数组元素为对象时接口的应用
const iarrobjA: Iob[] = [{ unname: '小红', age: 16 }]

2.类型别名的应用

// 类型别名定义对象类型
type Tob = {
    unname: string,
    age: number
}
const objB: Tob = { unname: '小红', age: 16 }

// 类型别名定义字符串类型
type Tstr = string
const tstr: Tstr = '666'

总结：接口只能定义静态类型中的对象类型，类型别名的应用可以定义任何静态类型

ts接口中属性可以设置非必选项

interface Iob1 {
    unname: string,
    age: number,
    bust?: number
}
// bust没有传
function fnobB(girl: Iob1) {
    return girl.unname
}
fnobB({ unname: '小红', age: 24 })
// bust有传
function fnobC(girl: Iob1) {
    if (girl.bust) {
        return girl.bust
    }
    return girl.unname
}
fnobC({ unname: '小红', age: 24, bust: 90 })

ts接口中属性的名称与值的定义(不限制参数个数)

interface Iob2 {
    unname: string,
    age: number,
    bust?: number,
    [propname: string]: any
}
const Iobj1: Iob2 = { unname: '小红', age: 24 }
const Iobj2: Iob2 = { unname: '小红', age: 24, bust: 40 }
const Iobj3: Iob2 = { unname: '小红', age: 24, bust: 40, work: true, qqname: 'seabiscuit' }

接口里的方法

interface Iob3 {
    unname: string,
    age: number,
    bust?: number,
    [propname: string]: any,
    say(): string,
}
const girl: Iob3 = {
    unname: '小红',
    age: 24,
    bust: 40,
    work: true,
    qqname: 'seabiscuit',
    say() {
        return '666'
    }
}

接口的继承

interface Inew1 {
    name: string
}
interface Inew2 extends Inew1 {
    work: boolean
}
const newobj: Inew2 = { name: '小红', work: true }

接口在类中的使用(使用接口可以将类进行约束)

class cgirl implements Iob3 {
    unname: string;
    age: number;
    bust: 30;
    say() {
        return '666'
    }
}

下一篇: typescript（七）ts中的类class