angular typescript接口默認值

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"
  }

這告訴我無法設置undefined的緯度。 我知道為什么會這樣。 這是因為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

用? 對於typescript中的可選屬性，如下所示。 我希望這就是你想要的。

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添加屬性（即緯度，經度等）。