Question

我的界面：

export interface MapMarker{
    longitude: number,
    latitude: number,
    popupText: string
}

我的组件

mapMarker: MapMarker;

ngOnInit() {
    this.mapMarker.latitude = location.coords.latitude;
    this.mapMarker.longitude = location.coords.longitude;
    this.mapMarker.popupText = "Your current Location"
  }

这告诉我不能设置未定义的纬度。我知道那是为什么。这是因为mapMarker具有MapMarker类型，但未定义，因为默认情况下未定义。我该怎么办？如果我仍然尝试mapMarker: MapMarker = null;错误。

我还尝试了mapMarker: MapMarker = {};，这给了我以下错误= Type '{}' is missing the following properties from type 'MapMarker': longitude, latitude, popupText

我需要解决方案，但我不想使用“任何”类型。

Answer 1

如果您不想每次创建对象并分配默认值，请改用具有默认值的类作为其属性。如果未指定值，则将根据您的属性类型使用默认值。

export class MapMarker {
    longitude: number = 0;
    latitude: number = 0;
    popupText: string = '';
}

然后，您可以简单地创建类的实例，然后正确初始化每个字段：

mapMarker: MapMarker = new MapMarker();

如果要保留您的界面，只需在类中实现它即可：

export interface IMapMarker {
    longitude: number;
    latitude: number;
    popupText: string;
}

export class MapMarker implements IMapMarker {
    longitude: number = 0;
    latitude: number = 0;
    popupText: string = '';
}

如果某些属性是可选的，请对它们使用可选的运算符：

export interface IMapMarker {
    longitude?: number;
    latitude?: number;
    popupText?: string;
}

但是，在使用该属性之前，您始终必须确保该属性不为null。

Answer 2

类和接口是强大的结构，可简化   不仅是面向对象的编程，还包括TypeScript中的类型检查。   类是一个蓝图，我们可以从中创建共享对象的对象。   相同的配置属性和方法。接口是一组   描述对象的相关属性和方法，但都不   为它们提供实现或初始化。

由于这两个结构都定义了对象的外观，因此两者   可以在TypeScript中用于键入变量。决定使用   类或接口确实取决于我们的用例：类型检查   仅实施细节（通常通过创建新实例），   甚至两者！我们可以使用类进行类型检查和基础   实施

如果您仅对类型检查响应感兴趣，则界面为   一个不错的选择此外，接口是一种虚拟结构，   仅存在于TypeScript的上下文中。 TypeScript编译器   仅将接口用于类型检查目的。一旦您的代码是   转换为目标语言后，它将被剥离   界面-未键入JavaScript，因此没有用。

由于运行时中不存在接口，因此没有运行时成本！

关于您面临的问题：
使用此

mapMarker: MapMarker={longitude: 0,latitude: 0, popupText: ''};

Answer 3

使用?作为打字稿中的可选属性，如下所示。我希望这就是你想要的。

export interface MapMarker{
    longitude?: number,
    latitude?: number,
    popupText?: string
}

Answer 4

至少有两个选择：

1将MapMarker的每个属性设为可选

export interface MapMarker{
   longitude?: number,
   latitude?: number,
   popupText?: string
}

2使用课程

export class MapMarker {
    longitude: number = 0;
    latitude: number = 0;
    popupText: string = '';
}

3只需使用具有默认值的普通对象

mapMarker: MapMarker =  {
    longitude: number = 0;
    latitude: number = 0;
    popupText: string = '';
}

Answer 5

仅使用类型声明，如下所示

mapMarker: MapMarker = {} as MapMarker;

或

mapMarker: MapMarker = <MapMarker>{};

这将告诉TypeScript编译器将此空对象{}视为MapMarker接口的对象。

请注意，这只会防止您发生编译时错误，而不是运行时。

最终，您必须在变量mapMarker中添加属性（例如，纬度，经度等），然后这些属性才能被应用程序的其余部分使用。

角度打字稿界面默认值

5 个答案: