typescript 介面和物件型別（四）

史洲宇發表於2024-11-21
TypeScript物件型別
在typescript中，我們定義物件的方式要用關鍵字interface（介面），
使用interface來定義一種約束，讓資料的結構滿足約束的格式。定義方式如下：
// 定義一個介面型別
interface person{
    age:number,
    name:string,
    sex:number
}

那麼我們都哪些要注意的事項呢 下面這麼寫都會報錯

// 如果定義一個物件缺少或者新增屬性都會報錯 也就是說要一一對應不可以多也不可以少 這麼寫會報錯
// 缺少物件屬性的定義
const ObjP:person = {
    age:1,
    name:'sdfs'
}


// 這麼寫也會報錯 超過了介面型別的定義
const ObjP1: person = {
    age: 1,
    name: 'sdfs',
    sex:1,
    h:1
}

// 同樣的資料型別不對應也會報錯

正確的寫法是，也就是一一對應

const ObjPOk: person = {
    age: 1,
    name: 'sdfs',
    sex:1
}

那麼如果後臺返回的資料不確定，只能確定一些必然出現的資料怎麼辦，這個時候就可以採用可選屬性來解決

如下

interface person1 {
    name?: string, // 定義一個可循屬性
    age: number,
    sex: number
}
// 這裡省略了name 依然是正確的
const objKxL: person1 = {
    age: 111,
    sex: 1
}

那麼如果返回的資料欄位非常多怎麼辦，只知道幾個固定，其他的欄位都是不可控的，這個時候可以採用下面的方式

任意屬性

// 任意屬性定義方式
interface person2 {
    name?: string, // 定義一個可循屬性
    age: number,
    sex: number,
    [prop:string]:any // 定義一個任意屬性 型別是any  這個時候我們即使返回很多欄位也不會報錯 這裡的“prop”可以隨便定義成什麼名字
}

const obj2: person2 = {
    age:1,
    sex:1,
    a:1,
    b:'sdfsdfs'
}

如果我們希望返回的資料只能讀，不可以去修改原始資料，這個時候就需要用到另外一個屬性了，叫做只讀屬性

interface person3{
    readonly id:string,
    name?: string, // 定義一個可選屬性
    age: number,
    sex: number,
    [prop: string]: any // 定義一個任意屬性 型別是any 
}


const obj3:person3 = {
    id:'sdfsdfd',
    age:1,
    sex:1,
    a:1
}


obj3.id = 'fsdhfsdjfjhds'

那麼介面如何制定函式呢，可以透過下列方式

interface person4 {
    readonly id: string,
    name?: string, // 定義一個可選屬性
    age: number,
    sex: number,
    cb: () => void, // 這裡制定函式無返回值也就是預設空值返回
    [prop: string]: any // 定義一個任意屬性 型別是any 
}

const obj4:person4 = {
    id:'111',
    age:1,
    sex:2,
    cb:()=>{
        console.log('1111');
    },
    a:111
}

下一節學習typescript 陣列型別

相關文章