typescript - Var olan bir iç içe geçmiş dizi arayüzüne ESNext Dizi fonksiyonlarını nasıl eklerim?

Bu hatayı alıyorum:

TS2339: Property 'flat' does not exist on type 'ContentfulImageAsset[][]'.

ContentfulImageAsset[][]'e .flat() eklemek istiyorum.

Bunu arayüzüme eklemeyi denedim ve şunu aldım:

TS2741: Property 'flat' is missing in type '{ id: string; url: string; details: { size: number; image?: { width: number; height: number; }; }; fileName: string; contentType: string; }' but required in type 'ContentfulImageAsset'.

Bu benim arayüzüm:

export interface ContentfulImageAsset {
  id: string;
  url: string;
  details: object;
  fileName: string;
  contentType: string;
}

İşte iç içe geçmiş bir diziyi flat ile düzleştirmeye çalıştığım kodumun bölümü:

export const createLandingPage = (
  entry: InputContentfulData,
  includedAssets: Array<Asset>
): ContentfulLandingPage => {
... defaults object ...
  let pageImages: Array<ContentfulImageAsset> = [];
  if (entry.pageImages) {
    pageImages = entry.pageImages
      .map(link =>
        includedAssets
          .filter(include => {
            return link.sys.id === include.sys.id;
          })
          .map(createContentfulAsset)
      )
      .flat();
  }
  return { ...defaults, ...entry, pageImages };

Bu, flat() için araç ipucudur:

flat<U>(this: U[][], depth?: 1): U[];
(method) Array<ContentfulImageAsset[]>.flat<ContentfulImageAsset>(this: ContentfulImageAsset[][], depth?: 1 | undefined): ContentfulImageAsset[] (+8 overloads)

İlgili Giriş Arayüzü:

export interface InputContentfulData extends Field {
 ... other fields ...
  pageImages?: Array<Asset>;
  sys: Sys;
}

Map içinde çağrılan fonksiyon (eğer bunu ilgili buluyorsanız).

const createContentfulAsset = (asset: Asset): ContentfulImageAsset => {
  const ContentfulImageAsset: ContentfulImageAsset = {
    id: asset.sys.id,
    url: asset.fields.file.url,
    details: asset.fields.file.details,
    fileName: asset.fields.file.fileName,
    contentType: asset.fields.file.contentType,
  };
  return ContentfulImageAsset;
};

Field, Asset ve Sys contentful'dan içe aktarılır

Bu bizim tsconfig.json dosyamız:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "lib": ["dom", "es2017", "esnext"],
    "baseUrl": ".",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "strict": true,
    "allowJs": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "isolatedModules": false,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "resolveJsonModule": true
  },
  "exclude": ["dist", ".next", "out", "next.config.js", "lib/@custom_types/*"]
}

Bu bizim tsconfig.server.json dosyamız:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "target": "es2017",
    "lib": ["dom", "es2017", "esnext"],
    "isolatedModules": false,
    "noEmit": false
  },
  "include": ["server/**/*.ts"]
}

Biz Nextjs kullanıyoruz.