TypeScript 如何为在另一个接口中引用的接口设置信息

Question

下面是我用来更新基本地址持有界面的代码。我在访问 Park 接口中引用的 Address 接口时遇到问题。为什么我创建的构造函数有问题，无法使用信息地址更新地址接口？

interface Park {
    name: string;
    image: string;
    address: Address;

}
interface Address {
    street: string;
    city: string;
    state: string;
    zip: string;
}

class ArkEncounter implements Park {
    name: string;
    image: string;
    address: Address;

    setName(name: string) {
        this.name = name;
    }
    setImage(image: string) {
        this.image = image;
    }
    setAddress(address: Address) {
        this.address = address;
    }
    getName(): string {
        return this.name;
    }
    getImage(): string {
        return this.image;
    }
    getAddress(): Address {
        return this.address;
    }

    constructor(name: string, image: string, address: Address) {
        this.name = name;
        this.image = image;
        this.address = address;
    }

    printInfo() {
        console.log(`The ${this.name} is located at ${this.address.street}, ${this.address.city}     ${this.address.zip}`);
    }
}

let ArkPark = new ArkEncounter('Ark Encounter', 'https://assets.answersingenesis.org/img/cms/content/contentnode/og_image/ark-encounter-aerial2020.jpg', '1 Ark Encounter Dr, Willianstown, KY 41097');

我期待这种格式改变地址接口，但我不确定调用构造函数时实现它的正确方法。

Answer 1

ArkEncounter

的第三个构造函数参数是

Address

interface

，一个对象类型定义为

interface Address {
    street: string;
    city: string;
    state: string;
    zip: string;
}

这意味着

Address

应该是一个具有（至少）这四个命名属性的对象，每个属性都是

string

类型。像

string

这样的

'1 Ark Encounter Dr, Willianstown, KY 41097'

不起作用，因为字符串没有任何这些属性。这就是你得到错误的原因。

但是如果你想要一个对象，你可以很容易地创建一个。 JavaScript 和 TypeScript 支持 object literals 让你轻松创建和初始化对象。这是一种方法：

const implausibleFloatingMenagerieAddress: Address = {
  street: '1 Ark Encounter Dr',
  city: "Willianstown",
  state: "KY",
  zip: "41097"
};

请注意，我 annotated

implausibleFloatingMenagerieAddress

变量具有类型

Address

，但这不是必需的。如果您离开注释，编译器将推断出等同于

Address

:

的类型

const implausibleFloatingMenagerieAddress = {
  street: '1 Ark Encounter Dr',
  city: "Willianstown",
  state: "KY",
  zip: "41097"
};

// inferred as type:
/* const implausibleFloatingMenagerieAddress: {
    street: string;
    city: string;
    state: string;
    zip: string;
} */

无论哪种方式，您都可以将其传递给

ArkEncounter

构造函数而不会出错：

let arkPark = new ArkEncounter(
  'Ark Encounter',
  'https://assets.answersingenesis.org/img/cms/'
  + 'content/contentnode/og_image/ark-encounter-aerial2020.jpg',
  implausibleFloatingMenagerieAddress
); // okay

或者，如果你愿意，你可以直接使用对象字面量而无需先将其分配给变量：

let arkPark = new ArkEncounter(
  'Ark Encounter',
  'https://assets.answersingenesis.org/img/cms/'
  + 'content/contentnode/og_image/ark-encounter-aerial2020.jpg',
  {
    street: '1 Ark Encounter Dr',
    city: "Willianstown",
    state: "KY",
    zip: "41097"
  }
); // okay

---

对象类型是 JavaScript 和 TypeScript 工作方式的基础，所以如果您还没有阅读过 TypeScript 手册。

游乐场代码链接