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