نمیتوان فایلهای svg را در تایپاسکریپت وارد کرد

در فایلهای typescript(*.tsx) نمیتوانم فایل svg را با این دستور import کنم:

import logo from './logo.svg';

ترنسپایلر میگوید:[ts] نمیتواند ماژول './logo.svg' را پیدا کند. فایل svg من فقط <svg>...</svg> است.

اما در فایل .js توانستم آن را بدون هیچ مشکلی با همان دستور وارد کردن دقیق، وارد کنم. فرض میکنم که این مربوط به نوع فایل svg باشد که باید بهنحوی برای ترنسپایلر ts تنظیم شود.

میتوانید لطفاً توضیح دهید چگونه این کار را در فایلهای ts انجام دهیم؟

پاسخ شماره ۱

اگر از webpack استفاده میکنید، میتوانید این کار را با ایجاد یک فایل تایپ سفارشی انجام دهید.

یک فایل با نام custom.d.ts با محتوای زیر ایجاد کنید:

declare module "*.svg" {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

فایل custom.d.ts را به tsconfig.json به صورت زیر اضافه کنید

"include": ["src/components", "src/custom.d.ts"]

منبع: https://webpack.js.org/guides/typescript/#importing-other-assets

پاسخ شماره ۲

ممنون smarx برای اشاره به استفاده از require(). پس در مورد من باید اینطور باشد:

const logo = require("./logo.svg") as string;

که در فایلهای *.tsx به خوبی کار میکند

پاسخ شماره ۳

• اگر از create-react-app 2+ استفاده میکنید: مستندات

یک فایل custom.d.ts اضافه کنید (من آن را در مسیر ریشه دایرکتوری src خود ایجاد کردم) با نوع صحیح (با تشکر از RedMatt):

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

svg-react-loader یا یک مورد دیگر را نصب کنید، سپس:

• از آن به عنوان بارگذار اصلی SVG استفاده کنید
• یا اگر در حال مهاجرت یک کدبیس هستید و نمیخواهید به بخش کاری (JS) دست بزنید، لودر را در ایمپورت مشخص کنید:

import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

سپس فقط از آن به عنوان یک تگ JSX استفاده کنید:

function f() { 
  return (<MySVG />); 
}

پاسخ شماره ۴

من اینترنت را برای یافتن راه حلی برای این مشکل جستجو کردم. این سؤال در سایت StackOverflow به عنوان گزینه اصلی نمایش داده شد، اما هیچ یک از پاسخها برای من کار نکرد.

سرانجام، با امتحان کردن چند تکنیک مختلف توانستم به یک راهحل برسم.

1. یک فایل ./globals.d.ts در ریشه پروژه خود ایجاد کنید، در همان مکان/سطحی که ./tsconfig.json شما قرار دارد.

2. داخل آن فایل ./globals.d.ts، این را اضافه کنید:

declare module '*.svg' {
  const content: string;
  export default content;
}

این به درستی .svg را به عنوان یک رشته وارد میکند، که این مشکلی است که من در پاسخ با بالاترین امتیاز مشاهده کردم.

3. فایل tsconfig.json خود را با موارد زیر بهروز کنید:

{
  "files": ["globals.d.ts"]
}

همین بود - این باعث شد در مورد من کار کند. باید یادآوری کنم - این در یک برنامه VanillaJS است.

پاسخ شماره ۵

راه حلی که پیدا کردم: در پروژه ReactJS، در فایل react-app-env.d.ts کافی است فاصله را در توضیح حذف کنید، مانند:

قبل

// / <reference types="react-scripts" />

بعد

/// <reference types="react-scripts" />

امیدوارم بتوانم به شما کمک کنم

پاسخ شماره ۶

میتوانید ماژول برای فایلهای SVG به همان روشی که در create-react-app انجام میدهید، اعلام کنید:

react-app.d.ts

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

منبع را ببینید

پاسخ شماره ۷

اگر از vite استفاده میکنید، افزودن compilerOptions زیر به tsconfig.json این خطا را برای من رفع کرد:

  "compilerOptions": {
    "types": ["vite/client", "node"],

پاسخ شماره ۸

نمیتوان ماژول یا اعلامیههای نوع مربوطه آن را پیدا کرد | عدم توانایی در وارد کردن فایلهای svg در تایپاسکریپت

1. داخل فایل ./custom.d.ts، این را اضافه کنید:

declare module '*.svg' {
  const content: string;
  export default content;
}

پاسخ شماره ۹

راهحل بدون وبپک و custom.d.ts

برای من، هیچکدام از راهحلهای بالا به تنهایی کار نکرد. چون من در پروژه فعلیام از وبپک استفاده نمیکنم.

من خروجیها را در لاگ بررسی کردم، سپس روش زیر برای من کار کرد، بدون ایجاد فایل (custom.d.ts)، تغییر تنظیمات، یا نصب یک وابستگی جدید:

const logo: string = require("../assets/images/logo.svg").default;

<img src={logo} alt="logo" />

برای فرمت svg شما باید .default را اضافه کنید، اما برای فرمت png نیازی نیست.

پاسخ شماره ۱۰

اگر از استارتری Create-React-App استفاده میکنید، مطمئن شوید که react-app-env.d.ts شامل خط زیر است:

/// <reference types="react-scripts" />