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.