typescript - ¿Cómo agrego funciones de Array de ESNext a una interfaz de arreglo anidado existente?
Estoy recibiendo este error:
TS2339: Property 'flat' does not exist on type 'ContentfulImageAsset[][]'.
Quiero agregar .flat() a ContentfulImageAsset[][].
Intenté agregarlo a mi interfaz y obtuve:
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'.
Esta es mi interfaz:
export interface ContentfulImageAsset {
id: string;
url: string;
details: object;
fileName: string;
contentType: string;
}
Esta es la parte de mi código donde estoy intentando aplanar un array anidado con 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 };
Esta es la descripción de la herramienta para flat():
flat<U>(this: U[][], depth?: 1): U[];
(method) Array<ContentfulImageAsset[]>.flat<ContentfulImageAsset>(this: ContentfulImageAsset[][], depth?: 1 | undefined): ContentfulImageAsset[] (+8 overloads)
Interfaz de Entrada Relevante:
export interface InputContentfulData extends Field {
... other fields ...
pageImages?: Array<Asset>;
sys: Sys;
}
La función que se llama dentro de map (si lo encuentras relevante).
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 y Sys se importan desde contentful
Este es nuestro 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/*"]
}
Este es nuestro tsconfig.server.json:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"outDir": "dist",
"target": "es2017",
"lib": ["dom", "es2017", "esnext"],
"isolatedModules": false,
"noEmit": false
},
"include": ["server/**/*.ts"]
}
Usamos Nextjs.