جاوااسکریپت - چگونه متد map را با ریاکت تایپاسکریپت تایپ کنیم؟

من یک متد map دارم و انتظار دارم که یک آرایه جدید برگرداند. و من یک خطا دارم

ویژگی 'id' در نوع 'never' وجود ندارد

فکر میکنم به این دلیل است که من متغیرهای متد map را تایپ نکردم. چگونه میتوانم این کار را انجام دهم؟

type Props = {
  authors: [];
  onFinish: () => {};
};

    const NewTask: FC<Props> = ({ authors, onFinish }) => {
    return (
      <select
        onChange={(e) => setAuthor(e.target.value)}
        defaultValue="select"
      >
        <option value="select" disabled>
          Select Author
        </option>
        {authors.map((author) => (
          <option key={author.id} value={author.author_name}>            // author keys are error sublimed
            {author.author_name}
          </option>
        ))}
      </select>
      )
    }

پاسخ شماره ۱

شما author را با نوع [] اعلام کردهاید.

به عنوان یک مقدار در جاوااسکریپت، [] یک آرایه خالی به صورت_literal_ است که میتوان مقادیر مختلفی به آن اضافه کرد.

به عنوان یک نوع در تایپاسکریپت، [] یک تاپل است - به طور خاص، این یک تاپل خالی است که هرگز نمیتواند هیچ مقداری از هیچ نوعی را در خود داشته باشد.

وقتی در حال تکرار authors هستید ...

authors.map((author) => { ... })

تایپاسکریپت نوع author را بر اساس نوع authors حدس میزند. از آنجا که شما اعلام کردهاید که authors هیچ مقداری ندارد، به درستی به شما هشدار میدهد که author نوع never دارد، و بنابراین Property 'id' does not exist on type 'never' را نشان میدهد.

همانطور که دیگران اشاره کردهاند، شما فقط نیاز دارید که یک نوع مناسب برای authors ارائه دهید، مثلاً

type Author = {
  id:          string;
  author_name: string;
};

type Props = {
  authors:  Author[];
  onFinish: () => void;
};

پاسخ شماره ۲

شما این خطا را دریافت میکنید زیرا نوع برای authors تعریف نکردهاید. برای رفع این خطا، باید نوعی برای prop authors ارائه دهید:

type Author = {
  id: string;
  author_name: string;
};

type Props = {
  authors: Author[];
  onFinish: () => void;
};

const NewTask: FC<Props> = ({ authors, onFinish }) => {
  // ...
};