typescript टाइपस्क्रिप्ट में svg फ़ाइलों को आयात करने में असमर्थ




(4)

typescript(*.tsx) फ़ाइलों में मैं इस कथन के साथ svg फ़ाइल आयात नहीं कर सकता:

import logo from './logo.svg';

Transpiler कहता है: [ts] cannot find module './logo.svg'. मेरी svg फ़ाइल सिर्फ <svg>...</svg>

लेकिन .js फ़ाइल मैं ठीक उसी आयात विवरण के साथ किसी भी मुद्दे के बिना इसे आयात करने में सक्षम हूं। मुझे लगता है कि यह svg फ़ाइल के प्रकार के साथ कुछ करने के लिए है जो ts ट्रांसपिलर के लिए किसी तरह सेट किया जाना चाहिए।

क्या आप कृपया ts फ़ाइलों में यह काम करने के लिए साझा कर सकते हैं?


ऐसा करने का एक वैकल्पिक तरीका है जिसे हमने लागू किया है: अपने एसवीजी घटकों को बनाएं। मैंने ऐसा इसलिए किया क्योंकि इससे मुझे लगा कि मैं अपने import साथ सामान्य जेएसएस का उपयोग कर रहा हूं।


यदि आप वेबपैक का उपयोग करते हैं, तो आप एक कस्टम प्रकार फ़ाइल बनाकर ऐसा कर सकते हैं।

निम्नलिखित सामग्री के साथ custom.d.ts नामक एक फ़ाइल बनाएँ:

declare module "*.svg" {
  const content: any;
  export default content;
}

स्रोत: https://webpack.js.org/guides/typescript/#importing-other-assets


उपयोग की require() ओर इशारा करने के लिए धन्यवाद smarx require() । तो मेरे मामले में यह होना चाहिए:

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

जो * .tsx फ़ाइलों में ठीक काम करता है


प्रतिक्रिया + टाइपस्क्रिप्ट ट्यूटोरियल की कोशिश करते समय मेरे पास एक ही मुद्दा था।
मेरे लिए जो काम किया गया वह निम्न आयात विवरण था।

import * as logo from 'logo.svg'

यहाँ package.json में मेरी निर्भरताएँ हैं।

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

आशा है कि यह किसी की मदद करता है।





svg