لدي مشكلة في TSX

بتاريخ 5 ساعات قال عبد الحميد بومقواس:

أنا أعمل على مشروع بواسطة NextJS باستخدام TypeScript

لدي مشكلة في هذا السطر :

  const Layout = layouts[Component.layout] || ((children) => <>{children}</>)

هذا هو الخطأ الذي ظهر لي 

var Component: NextComponentType<NextPageContext, any, {}>
  
Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ L1: FC<{}>; L2: FC<{}>; }'.ts(7053)

وهذا هو الكود الكامل

// App Style
import '../src/css/app.css'
import { AnimatePresence } from 'framer-motion'
import React from "react";

import type { AppProps } from 'next/app'
import AuthLayout from "../layouts/AuthLayout";
import ContentLayout from "../layouts/ContentLayout";

function MyApp({ Component, pageProps }: AppProps) {
  const layouts = {
    L1: AuthLayout,
    L2: ContentLayout,
  };
  const Layout = layouts[Component.layout] || ((children) => <>{children}</>)
  return (
    <Layout>
      <AnimatePresence exitBeforeEnter>
        <Component {...pageProps} />
      </AnimatePresence>
    </Layout>
  );
}
export default MyApp

 

المشكلة تكمن في العبارة التالية

بتاريخ 5 ساعات قال عبد الحميد بومقواس:

const Layout = layouts[Component.layout]

 استخراج نوع المتحول Layout من الغرض layouts، المفتاح يجب أن من النوع نص

const key: string = "..." // مفتاح من النوع نص 
layouts[key] // صحيح

const key: any = ... // مفتاح من نوع غير محدد
layouts[key] // خطأ

يمكن تصحيح الخطأ بالتصريح عن نوع المتحول layout داخل المكون Component بالنوع string

اكتب رسالة الخطأ اللتى تظهر لك

بتاريخ 14 دقائق مضت قال شرف الدين2:

اكتب رسالة الخطأ اللتى تظهر لك

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ L1: FC<{}>; L2: FC<{}>; }'.ts(7053)