2

I'm getting this error:

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

I want to add .flat() to ContentfulImageAsset[][].

I tried adding it to my interface and got:

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'.

This is my interface:

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

This is the part of my code where I'm trying to flatten a nested array with flat:

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

This is the tool tip for flat():

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

Relevant Input Interface:

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

The func being called within map (if you find it relevant).

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, and Sys are imported from contentful

This is our tsconfig.json:

{
  "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/*"]
}

This is our tsconfig.server.json:

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

We use Nextjs.

jango
  • 133
  • 1
  • 1
  • 5
  • Short story: Typescript lib option does not provide polyfills. It only tells the compiler "assume you have these features on runtime". You'll need an up-to date browser, node version, or your own polyfill. – k0pernikus Sep 17 '19 at 16:39
  • Possible duplicate of [Using latest JavaScript features in TypeScript, such as ES2018](https://stackoverflow.com/questions/51043439/using-latest-javascript-features-in-typescript-such-as-es2018) – k0pernikus Sep 17 '19 at 16:40

0 Answers0