interface 與 對象

在typescript中,我們定義對象的方式要用到關(guān)鍵字 interface(接口),在個人的理解中,使用interface來定義一種約束,使數(shù)據(jù)結(jié)構(gòu)滿足定義的約束

// 會報錯,因為在Person接口定義了a,b2個字段,但是在對象里面缺少b字段
// 使用接口約束的時候不能多一個字段不能少一個字段
// 必須和接口一致
interface Person {
    a:string,
    b:string
}

const person: Person = {
  a: '123'
}

// 重名的interface 會產(chǎn)生合并
interface Person {
  name: string
}

interface Person {
  age: number
}

const user: Person = {
  name: 'xhj',
  age: 18
};

// 接口可以繼承
// 但是不允許有(同名的字段,類型不一樣)
interface Name {
  name: string;
}

interface Age {
  age: number;
}

interface Person extends Name, Age {
  sex: string;
}

const person: Person = {
  name: "xhj",
  age: 18,
  sex: "man",
};

可選屬性 使用?操作符

// 可選屬性的含義是該屬性可以不存在
// 所以說這樣寫也是沒問題的
interface Person {
    b?:string,
    a:string
}
 
const person:Person  = {
    a:"213"
}

任意屬性 [propName: string]

// 在這個例子當(dāng)中我們看到接口中并沒有定義C但是并沒有報錯
// 應(yīng)為我們定義了[propName: string]: any;
// 允許添加新的任意屬性
interface Person {
    b?:string,
    a:string,
    [propName: string]: any;
}
 
const person:Person  = {
    a:"213",
    c:"123"
}

只讀屬性 readonly

// 這樣寫是會報錯的
// 應(yīng)為a是只讀的不允許重新賦值
interface Person {
    b?: string,
    readonly a: string,
    [propName: string]: any;
}
 
const person: Person = {
    a: "213",
    c: "123"
}
 
person.a = 123

添加函數(shù)

interface Person {
    b?: string,
    readonly a: string,
    [propName: string]: any;
    cb:()=>void
}
 
const person: Person = {
    a: "213",
    c: "123",
    cb:()=>{
        console.log(123)
    }
}