reactjs - چگونه redux-persist را به پروژه تایپاسکریپت اضافه کنیم؟

من در حال تلاش برای اضافه کردن redux-persist به پروژه React خود (با استفاده از تایپاسکریپت) هستم. اما با مشکل مواجه شدهام. کامپایل با خطای زیر متوقف میشود:

Could not find a declaration file for module 'redux-persist/lib/storage'. '.../WebstormProjects/catalog/node_modules/redux-persist/lib/storage/index.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist/lib/storage'

من بستههای زیر را نصب کردم: "@types/redux-persist": "^4.3.1" و "redux-persist": "^6.0.0".

محتوای redux-persist/lib/storage:

declare module "redux-persist/es/storage" {
  import { WebStorage } from "redux-persist/es/types";

  const localStorage: WebStorage;
  export default localStorage;
}

declare module "redux-persist/lib/storage" {
  export * from "redux-persist/es/storage";
  export { default } from "redux-persist/es/storage";
}

برای حل این مشکل چه کاری باید انجام داد؟

پاسخ شماره ۱

راهحل:

این خط را اضافه کنید:

/// <reference types="redux-persist" />

به react-app-env.d.ts اگر شما از create-react-app استفاده میکنید.

توضیح:

دستورات سهخطه در تایپاسکریپت، نظرات تکخطیای هستند که شامل یک تگ XML میشوند. محتوای این نظرها به عنوان دستورالعملهای کامپایلر استفاده میشود.

این دستورالعملها برای اعلام وابستگی به یک بسته استفاده میشوند، که میتواند نوع، کتابخانه، مسیر و غیره باشد.

فرآیند حل کردن نامهای این بستهها مشابه فرآیند حل کردن نامهای ماژول در یک عبارت import است. یک روش آسان برای فکر کردن به دستورهای triple-slash-reference-types این است که آنها را به عنوان یک import برای بستههای اعلامی در نظر بگیریم.

برای مثال، در کد بالا، گنجاندن /// <reference types="redux-persist" /> در یک فایل اعلام، اعلام میکند که این فایل از نامهایی که در @types/node/redux-persist.d.ts اعلام شدهاند استفاده میکند؛ و بنابراین، این پکیج باید همراه با فایل اعلام در کامپایل گنجانده شود.

اینجا بیشتر بخوانید.