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

huangapple go评论66阅读模式
英文:

TypeScript How to set info for an Interface that is referenced in another Interface

问题

以下是我用于更新基本地址保持接口的代码。我在访问Park接口中引用的Address接口时遇到了问题。为什么我在使用我创建的构造函数来更新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', {
    street: '1 Ark Encounter Dr',
    city: 'Williamstown',
    state: 'KY',
    zip: '41097'
});

我预期这种格式可以更改Address接口,但在调用构造函数时,我不确定正确的实现方式是什么。

英文:

Below is the code that I am using to update a basic address holding interface. I'm having trouble accessing the Address interface that is referenced in the Park interface. Why am I having an issue with the constructor that I have created, to update the Address interface with the address for the info?

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');

I was expecting this format to change the Address interface, but I'm not sure of the correct way to implement that when calling the constructor.

答案1

得分: 0

ArkEncounter的第三个构造函数参数是Address接口,它是一个对象类型,定义如下:

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

这意味着一个Address应该是一个具有(至少)这四个命名属性的对象,每个属性的类型都是string。像'1 Ark Encounter Dr, Willianstown, KY 41097'这样的字符串是不合适的,因为字符串没有这些属性。这就是为什么你会收到错误消息。

但如果你想要一个对象,你可以很容易地创建一个。JavaScript和TypeScript支持对象字面量来轻松创建和初始化对象。以下是一种方法:

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

请注意,我在implausibleFloatingMenagerieAddress变量上添加了类型注解,但这并非必需。如果省略类型注解,编译器会自动推断类型为Address

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

无论哪种方式,然后你可以将它传递给ArkEncounter构造函数而不会出错:

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

或者,如果你愿意,你可以直接使用对象字面量,而不必首先将它分配给一个变量:

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'
  }
); // 可行

对象类型是JavaScript和TypeScript工作的基础,所以如果你还没有的话,我建议你阅读TypeScript手册

英文:

The third constructor parameter for ArkEncounter is of the Address interface, an object type defined as

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

That means an Address should be an object with (at least) those four named properties each of which are of type string. A string like '1 Ark Encounter Dr, Willianstown, KY 41097' doesn't work, because strings don't have any of those properties. That's why you get an error.

But if you want an object, you can create one fairly easily. JavaScript and TypeScript support object literals for you to easily create and initialize objects. Here's one way to do it:

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

Note that I annotated the implausibleFloatingMenagerieAddress variable as having type Address, but this isn't necessary. If you leave off the annotation the compiler will infer a type equivalent to 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;
} */

Either way you can then pass that into the ArkEncounter constructor without error:

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

Or, if you want, you can just use the object literal directly without assigning it first to a variable:

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

Object types are fundamental to how JavaScript and TypeScript work, so if you haven't already, I recommend that you read through the TypeScript Handbook.

Playground link to code

huangapple
  • 本文由 发表于 2023年5月7日 05:34:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76191257.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定