Typescript 類型定義的映射 Object 已經定義

Question

我正在使用 Typescript 開展一個項目。 代碼工作正常。 我只是想知道對於已經過濾和定義的映射 Object 的類型定義的最佳實踐是什么。 例如，如果我有以下代碼：

const person: Person = {
    name: 'Joe',
    surname: 'Doe',
    age: 30,
    address: [{
        mainAddress: {
            street: "Queen st",
            number: 9,
            building: 'main',
            unit: 5,
        },
        secundaryAddress: {
            street: "King st",
            number: 7,
            house: 'The house'
        }
    }]
}

interface Person {
    name: string
    surname: string
    age: number
    address: [{
        mainAddress: {
            street: string
            number:number
            building: string
            unit: number
        }},
        {
        secundaryAddress: {
            street: string
            number: number
            house: string
        }
    }]
}
const filterPerson = person.address.filter((ad: any) => ad.mainAddress ? true : false)

const mappedAddress = filterPerson.map((m: any) => m.)

在我對主Object進行過濾之后。 我需要 map 結果。 在這種情況下， filterPerson.map可以很好地與any作為類型定義一起使用，但是是否有最好的方法來定義過濾器中的ad和 map 中的m或者在這種情況下我應該為兩者編寫一個新接口。

如果我刪除過濾器上的any內容並在示例的 mainAddress 上刪除 hover，則會彈出錯誤 [![enter image description here][1]][1]

如您所見，我的代碼中的 Object 不同，但此處示例的語法相同。 [1]： https://i.stack.imgur.com/hfaro.png

Answer 1

你給我們下面的 object address為 object

const person: Person = {
    name: 'Joe',
    surname: 'Doe',
    age: 30,
    address: {
        mainAdress: {
            street: "Queen st",
            number: 9,
            building: 'main',
            unit: 5,
        },
        secundaryAdress: {
            street: "King st",
            number: 7,
            house: 'The house'
        }
    }
}

但是然后給我們這個接口，它的address是一個對象數組。

interface Person {
    name: string
    surname: string
    age: number
    address: [{
        mainAdress: {
            street: string
            number:number
            building: string
            unit: number
        }},
        {
        secundaryAdress: {
            street: string
            number: number
            house: string
        }
    }]
}

然后你給我們一個不完整的過濾方法：

const mappedAddress = filterPerson.map((m: any) => m.)

請修正你的例子

編輯：假設address實際上定義如下，我將創建 4 個接口，一個用於主要Person ，一個用於Address ，一個用於每種Adress

    address: [{
        mainAdress: {
            street: "Queen st",
            number: 9,
            building: 'main',
            unit: 5,
        },
        secondaryAdress: {
            street: "King st",
            number: 7,
            house: 'The house'
        }
    }]

interface MainAdress {
   street: string;
   number: number;
   building: string;
   unit: number;
}

interface SecondaryAdress {
    street: string;
    number: number;
    house: string;
}

interface Address {
    mainAdress?: MainAdress;
    secondaryAdress?: SecondaryAdress;
}

interface Person {
    name: string
    surname: string
    age: number
    address: Address[];
}

然后您的filterPerson const 可以鍵入如下：

const filterPerson: Address[] = person.address.filter((ad: (Address)) => ad.mainAdress ? true : false)