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

问题描述 投票:0回答:1

下面是我用来更新基本地址持有界面的代码。我在访问 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');

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

json typescript class interface
1个回答
0
投票

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 手册

游乐场代码链接

© www.soinside.com 2019 - 2024. All rights reserved.