Typescript 嵌套對象 / Json

Question

我是編程新手，JavaScript，我嘗試為代碼挑戰創建一個界面，但我不斷收到此錯誤消息：

Type '{ 1100: { albumTitle: string; artist: string; tracks: string[]; }; 2468: { albumTitle: string; artist: string; tracks: string[]; }; 1245: { artist: string; tracks: never[]; }; 5439: { albumTitle: string; }; }' is not assignable to type 'collectionInfo'.
  Object literal may only specify known properties, and '1100' does not exist in type 'collectionInfo'.ts(2322)

請就如何解決此問題或如何創建 typescript 接口來消除此錯誤消息提出建議。

This my typescript interface attempt:

interface collectionInfo {
        id : {
            albumTitle: string | number |;
            artist: string | number |;
            tracks: string[] | number[] | null; 
        }
}

const recordCollection: collectionInfo = {
    1100: {
      albumTitle: "Prisoner",
      artist: "Lucky Dube",
      tracks: ["Prisoner", "Don\'t Cry"],
    },

Answer 1

你可以這樣做：

interface CollectionInfo {
   [id: number]: {
      albumTitle: string | number;
      artist: string | number;
      tracks: string[] | number[] | null; 
   }
}

嘗試重構你的界面

interface CollectionInfo {
   id: number;
   albumTitle: string; // I recommend sticking to one type only
   artist: string | number;
   tracks?: string[] | number[]; // if you are trying to add optional property, use ? to make it optional
}

const recordCollection: CollectionInfo = {
   id: 1100,
   albumTitle: "Prisoner",
   artist: "Lucky Dube",
   tracks: ["Prisoner", "Don't Cry"]
}

// Usage
console.log(recordCollection.id); // 1100
console.log(recordCollection.albumTitle); // Prisoner

Answer 2

你有兩個選擇。

首先是像這樣使用 [id: number] ：

interface collectionInfo {
  [id: number] : {
    albumTitle: string | number | null;
    artist: string | number | null;
    tracks: string[] | number[] | null; 
  }
}

const recordCollection: collectionInfo = {
  1100: {
    albumTitle: "Prisoner",
    artist: "Lucky Dube",
    tracks: ["Prisoner", "Don\'t Cry"],
  }
}

第二種方法是將 id 添加到屬性，然后使用數組代替，如下所示：

interface collectionInfo {
  id: number;
  albumTitle: string | number | null;
  artist: string | number | null;
  tracks: string[] | number[] | null;
}

const recordCollection: collectionInfo[] = [
  {
    id: 1100,
    albumTitle: "Prisoner",
    artist: "Lucky Dube",
    tracks: ["Prisoner", "Don\'t Cry"],
  }
]

Answer 3

collectionInfo的構造方式暗示此類型的實例將是包含單個屬性id的 object，它本身表示包含一些其他屬性的 object。

您需要修改您的類型定義以允許 object 包含一些 map。這兩個解決方案是等效的，但我更喜歡第二個：

interface CollectionsInfo {
  [id: number]: {
    albumTitle: string | number;
    artist: string | number;
    tracks: string[] | number[] | null; 
  }
}

interface CollectionInfo {
  albumTitle: string | number;
  artist: string | number;
  tracks: string[] | number[] | null;
}

type CollectionsInfo = Record<number, CollectionInfo>;

Answer 4

我可以注意到兩個問題：

1. 有尾管| 在接口定義中。 盡管這可能不完全是問題所在。
2. recordCollection使用1100代替接口collectionInfo中定義的id 。

以下是我認為它應該看起來的樣子：

 interface collectionInfo { id: { albumTitle: string | number; artist: string | number; tracks: string[] | number[] | null; } } const recordCollection: collectionInfo = { id: { albumTitle: "Prisoner", artist: "Lucky Dube", tracks: ["Prisoner", "Don\'t Cry"], }, }

或者，如果 id 必須是一個數字，那么你可以試試這個：

 interface collectionInfo { [key: number]: { albumTitle: string | number; artist: string | number; tracks: string[] | number[] | null; } } const recordCollection: collectionInfo = { 1100: { albumTitle: "Prisoner", artist: "Lucky Dube", tracks: ["Prisoner", "Don\'t Cry"], }, }

Answer 5

interface collectionInfo {
        [id: number] : {
            albumTitle: string | number ;
            artist: string | number ;
            tracks: string[] | number[] | null; 
        }
     }