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

109

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

import logo from './logo.svg';

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

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

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

typescript svg

— AngryBoy
स्रोत

2

svg फाइलें जावास्क्रिप्ट नहीं हैं और इन्हें जावास्क्रिप्ट मॉड्यूल के रूप में इस्तेमाल नहीं किया जा सकता है। आपको इसके बजाय http अनुरोध का उपयोग करके उन फ़ाइलों को लोड करना चाहिए।

— टॉस्क

1

क्या आप वेबपैक का उपयोग कर रहे हैं? मैंने देखा है कि केवल इस तरह के एक importबयान को समझ रहा है । शायद वेबपैक आपके जावास्क्रिप्ट में इसे अनुमति दे रहा है, लेकिन यह टाइपस्क्रिप्ट फ़ाइलों में समान जादू नहीं कर रहा है। (मुझे नहीं लगता कि टाइपस्क्रिप्ट खुद जानते हैं कि यहां क्या करना है।)

— user94559

1

यदि आप वेबपैक का उपयोग कर रहे हैं, तो आपको अधिक सहायता प्राप्त करने के लिए संभवतः अपने वेबपैक को साझा करने की आवश्यकता होगी।

— user94559

2

इस पर थोड़ा और पढ़ना, आप शायद कर सकते हैं const logo = require("./logo.svg");या बस त्रुटि को अनदेखा कर सकते हैं । (मेरा मानना है कि टीएस को अभी भी सही कोड आउटपुट करना चाहिए।)

— user94559

आपका बहुत बहुत धन्यवाद! अच्छा काम करने की आवश्यकता है! मेरे मामले में यह होना चाहिए const logo = require("./logo.svg") as string;

— एंग्रीबॉय

185

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

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

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

जोड़ें custom.d.ts को tsconfig.jsonनीचे के रूप में

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

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

— ग्राहम
स्रोत

36

संभवतः, आपको इसे tsconfig.jsoninclude में अनुभाग में जोड़ना होगा ।

— फ्रेडरिक क्राउटवल्ड

12

धन्यवाद! मुझे पता था कि इसे कहीं न कहीं शामिल किया जाना चाहिए, लेकिन मैं इसकी छवि नहीं बना सकता। यहां तक कि मुझे लगा कि यह tsconfig.json में है, लेकिन मुझे नहीं पता था कि यह कैसे करना है। आपकी टिप्पणी के लिए धन्यवाद। मैंने एक खोज की और मैंने पाया:"files": [ "custom.d.ts" ]

— शील नेवाडो

5

आप सामग्री टाइप करके const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;

— JSX

क्या custom.d.tsविश्व स्तर पर फ़ाइल का काम संभव है इसलिए SVG custom.d.tsफ़ाइल की तुलना में एक अलग निर्देशिका में हो सकता है ? जब तक यह एक ही निर्देशिका में नहीं है मुझे एक त्रुटि "मॉड्यूल नहीं मिल सकता है"।

— निक स्कोज़ज़ारो

1

यह फ़ाइल की सामग्री को कोणीय में आयात नहीं करता है, यह स्ट्रिंग के रूप में फ़ाइल नाम को आयात करता है। मुझे सामग्री चाहिए। हमें फ़ाइल की सामग्री कैसे मिलती है?

— राउटरिनेटर

37

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

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

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

— AngryBoy
स्रोत

5

logoनाम बेहतर हो सकता है logoPath, क्योंकि यही वह बन जाता है।

— धर्मट्रेल

2

@DharmaTurtle मुझे लगता है कि इस पर बहस हो सकती है। इसके अलावा, इसे logoप्रश्न में कहा जाता है, इसलिए यह इस विशिष्ट प्रश्न का एक बेहतर उत्तर है क्योंकि यह है।

— अरनेहुगो

17

एक custom.d.tsफ़ाइल जोड़ें (मैंने इसे अपने src dir के मूल पथ पर बनाया) सही प्रकार के साथ ( RedMatt के लिए धन्यवाद ):

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

Svg-react-loader या कुछ अन्य स्थापित करें , फिर:

इसे मुख्य svg लोडर के रूप में उपयोग करें
या यदि आप एक कोडबेस माइग्रेट कर रहे हैं और काम के हिस्से (जेएस) को छूना नहीं चाहते हैं तो आयात पर लोडर निर्दिष्ट करें:

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

तो बस इसे एक JSX टैग के रूप में उपयोग करें:

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

— Allenaz
स्रोत

4

समाधान जो मुझे मिला: ReactJS परियोजना में, फ़ाइल प्रतिक्रिया-ऐप-एनवीडॉट में। आप सिर्फ टिप्पणी में स्थान को हटा सकते हैं जैसे:

इससे पहले

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

उपरांत

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

मुझे आपकी मदद करने की उम्मीद है

— jilvanx
स्रोत

जो लोग create-react-app और कॉन्फ़िगर eslint का उपयोग कर रहे हैं, उनके लिए यह समस्या हल हो सकती है

— डैनियल चिन

2

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

import * as logo from 'logo.svg'

यहाँ पैकेज.जॉन में मेरी निर्भरताएँ हैं।

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

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

— किरण मोहन
स्रोत

1

टाइपस्क्रिप्ट के साथ n ऑन-कोड परिसंपत्तियों का उपयोग करने के लिए , हमें इन आयातों के लिए प्रकार को स्थगित करना होगा । इसके लिए एक custom.d.ts की आवश्यकता होती है फ़ाइल की जो हमारी परियोजना में टाइपस्क्रिप्ट के लिए कस्टम परिभाषाओं को दर्शाती है।

चलो .svg फ़ाइलों के लिए एक घोषणा सेट करें:

custom.d.ts

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

यहां हम किसी भी आयात को निर्दिष्ट करने के लिए एसवीजी के लिए एक नया मॉड्यूल घोषित करते हैं जो कि एसवीजी में समाप्त होता है और मॉड्यूल की सामग्री को किसी भी रूप में परिभाषित करता है।

— मेहदी हसन
स्रोत

0

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

— endymion1818
स्रोत

0

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

यदि आप पग्लिन स्लिंट का उपयोग कर रहे हैं, तो हो सकता है कि वह यह सोचकर अक्षम कर दिया हो कि यह एक टिप्पणी थी, लेकिन svg को पढ़ने के लिए आपको इस प्रकार के स्क्रिप्ट मॉड्यूल की आवश्यकता नहीं है, बस लाइन को अक्षम करें और खुश रहें

— ब्रेनो मेलो
स्रोत