جاوااسکریپت - پیدا کردن ResizeObserver با تایپاسکریپت در Angular 9

من در حال تلاش برای پیادهسازی یک ResizeObserver در یک برنامه Angular هستم:

const obs = new ResizeObserver(e => {
      // ...
});

... و با خطای TS مواجه میشوم:

TS2304: Cannot find name 'ResizeObserver'.

من تلاش کردهام تعریف نوع خود را با این بهروزرسانی کنم:

@types/resize-observer-browser

... با این حال مشکل من همچنان ادامه دارد. آیا راه حل توصیهشده یا روش معمولی وجود دارد، یا بهتر است از یک بسته NPM مانند 'resize-observer' برای ادامه کار استفاده کنم؟

خوشحال میشوم در صورت نیاز اطلاعات بیشتری ارائه کنم.

مرسی!

پاسخ شماره ۱

نصب این بسته نود

npm i -D @types/resize-observer-browser

مشکل را در پروژه Angular 10 حل کرد.

پاسخ شماره ۲

من پیشنهاد میکنم از resize-observer-polyfill استفاده کنید. این کتابخانه تایپها دارد (در فایل d.ts) و اگر مرورگر از Resize Observer پشتیبانی کند، فقط از پیادهسازی بومی استفاده میکند، اما پشتیبانی بیشتری دارد زیرا به عنوان راهحل جایگزین از Mutation Observer استفاده میکند که پشتیبانی بسیار بیشتری دارد.

پس فقط استفاده کنید:

import ResizeObserver from 'resize-observer-polyfill';

مرورگر از مقایسه پشتیبانی میکند:

• مشاهدهکننده تغییر اندازه
• مشاهدهکننده تغییر

همانطور که میبینید، Mutation Observer حتی در IE 11 نیز کار میکند.

پاسخ شماره ۳

من همان مشکل را داشتم به خاطر آرایه خالی «types» در فایل tsconfig خودم. با اضافه کردن «resize-observer-browser» به آرایه types حل شد:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"],
    "types": ["resize-observer-browser"],
  }
}