• 0

لدي مشكلة في TSX

أنا أعمل على مشروع بواسطة 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

 

Screenshot from 2021-08-23 14-51-46.png

تمّ تعديل بواسطة عبد الحميد بومقواس
نسيت كتابة الخطأ
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1
بتاريخ 5 ساعات قال عبد الحميد بومقواس:

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

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


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

هذا هو الخطأ الذي ظهر لي imageproxy.php?img=&key=e4ac65570db3469d


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

 

Screenshot from 2021-08-23 14-51-46.png

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

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

const Layout = layouts[Component.layout]

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

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

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

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

تمّ تعديل بواسطة Hassan Hedr

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

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

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 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)

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن