جاوااسکریپت - خطا هنگام تلاش برای تنظیم کلید برای کامپوننت سفارشی

با استفاده از React همراه با Typescript من در حال تلاش برای انجام کار سادهای هستم، یعنی مرور یک مجموعه از اشیاء و بر اساس هر یک از آنها - ایجاد یک نمونه از کامپوننت سفارشی.

با توجه به اینکه من از تابع map استفاده میکنم، شاخص را دریافت میکنم بنابراین از آن به عنوان key استفاده میکنم.

مشکل: دریافت یک خط موجی قرمز هنگام تنظیم key با پیام:

نوع '{ imageSource: string; target: string; title: string; hasGap: boolean | undefined; key: number; }' قابل انتساب به نوع 'IntrinsicAttributes & { hasGap?: boolean | undefined; imageSource: string; title: string; target: string; disabled?: boolean | undefined; } & { children?: ReactNode; }' نیست. ویژگی 'key' در نوع 'IntrinsicAttributes & { hasGap?: boolean | undefined; imageSource: string; title: string; target: string; disabled?: boolean | undefined; } & { children?: ReactNode; }' وجود ندارد.ts(2322)

حال به درک من، ویژگی key باید به طور پیشفرض در هر کامپوننت React وجود داشته باشد، بنابراین نمیفهمم این خطا از کجا آمده است...

مثال یک کامپوننت ساده، حتی بدون استفاده از map:

const MissingKeyComponent = () => {
  return(
    <div>Key cannot be passed when creating this component</div>
  )
}

<MissingKeyComponent key={100}></MissingKeyComponent>

در مثال واقعی، کد به خوبی اجرا میشود، مرورگر هیچ خطایی نشان نمیدهد، و همچنین خروجی Vite...

اگر key را حذف کنم، مرورگر خطای استاندارد درباره کلید گمشده هنگام ایجاد فهرست مؤلفهها نشان میدهد.

علاوه بر این - من ESLint را نصب کردهام، و همچنین prettier.

فایل tsconfig.json من

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "jsx": "react-jsx",
    "types": ["vite/client", "node"],

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "react": ["node_modules/@types/react"]
    }
  },
  "include": ["src", "types"],

  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

فایل .eslintrc.cjs من

module.exports = {
  root: true,
  settings: {
    react: {
      version: 'detect',
    },
  },
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:@typescript-eslint/recommended-type-checked',
    'plugin:@typescript-eslint/stylistic-type-checked',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'react/no-unknown-property': ['error', { ignore: ['css', 'tw'] }],
    '@typescript-eslint/no-unused-vars': ['warn'],
    'no-unused-vars': 'off',
  },
};

پاسخ شماره ۱

باشه، پس من مشکل را پیدا کردم:

من در پروژه خود از Tailwind با Twin Macro استفاده میکنم. این باعث میشود تا توسعه نوع ایجاد شود:

فایل twin.d.ts

import 'twin.macro';
import styledImport, { CSSProp, css as cssImport } from 'styled-components';

declare module 'twin.macro' {
  // The styled and css imports
  const styled: typeof styledImport;
  const css: typeof cssImport;
}

declare module 'react' {
  // The css prop
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: CSSProp;
    tw?: string;
  }

  // The inline svg css prop
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface SVGProps<T> extends SVGProps<SVGSVGElement> {
    css?: CSSProp;
    tw?: string;
  }
}

//The 'as' prop on styled components
declare global {
  namespace JSX {
    interface IntrinsicAttributes<T> extends DOMAttributes<T> {
      as?: string | Element;
    }
  }
}

مشکل این بود که

declare global {
  namespace JSX {
    interface IntrinsicAttributes<T> extends DOMAttributes<T> {
      as?: string | Element;
    }
  }
}

باید اینطور نوشته شود:

declare module 'react/jsx-runtime' {
  interface IntrinsicAttributes<T> extends React.DOMAttributes<T> {
    as?: string | Element;
  }
}

همه چیز خوب کار میکند!