ইন typescript(*.tsx)ফাইল আমি এই বিবৃতি সঙ্গে SVG ফাইল ইম্পোর্ট পারে না:
import logo from './logo.svg';
ট্রান্সপ্লেলার বলেছেন: [ts] cannot find module './logo.svg'.
আমার এসভিজি ফাইলটি ঠিক <svg>...</svg>।
তবে .jsফাইলটিতে আমি ঠিক একই আমদানির বিবৃতি সহ কোনও সমস্যা ছাড়াই এটি আমদানি করতে সক্ষম। আমি মনে করি এটির সাথে svg ফাইলের কিছু আছে যা টিএস ট্রান্সপ্লেলারের জন্য কোনওভাবে সেট করা উচিত।
টিএস ফাইলগুলিতে এই কাজটি কীভাবে করা যায় দয়া করে আপনি ভাগ করে নিতে পারেন?
importবক্তব্য বুঝতে পারি । সম্ভবত ওয়েবপ্যাকটি যা আপনার জাভাস্ক্রিপ্টে এটি মঞ্জুরি দিচ্ছে তা কিন্তু টাইপস্ক্রিপ্ট ফাইলগুলিতে একই যাদু করছে না। (আমি মনে করি না যে এখানে টাইপস্ক্রিপ্ট নিজেই জানে))
const logo = require("./logo.svg");ত্রুটিটি করতে বা উপেক্ষা করতে পারেন । (আমি বিশ্বাস করি টিএস এখনও সঠিক কোড আউটপুট করা উচিত))
import। আমার মতো নবজাতকের কাছে এই জিনিসগুলি আমাকে নিরুৎসাহিত করে। আমরা কি ২০২০ সালে নেই যেখানে "অটো-কনফিগারেশন" একটি আদর্শ হওয়া উচিত?
উত্তর:
আপনি যদি ওয়েবপ্যাক ব্যবহার করেন তবে আপনি কাস্টম ধরণের ফাইল তৈরি করে এটি করতে পারেন।
নিম্নলিখিত বিষয়বস্তু দিয়ে কাস্টম.ডি.এস.এস নামে একটি ফাইল তৈরি করুন :
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
include বিভাগে যুক্ত করা প্রয়োজন ।
"files": [ "custom.d.ts" ]
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
custom.d.tsএসভিজি custom.d.tsফাইলের চেয়ে আলাদা ডিরেক্টরিতে থাকতে পারে তাই বিশ্বব্যাপী ফাইলটির কাজ করা কি সম্ভব ? একই ডিরেক্টরিতে না থাকলে আমি একটি ত্রুটি পেয়েছি "মডিউলটি খুঁজে পাচ্ছি না"।
ব্যবহার স্মার্টফোন জন্য ধন্যবাদ স্মারেক্সrequire() । সুতরাং আমার ক্ষেত্রে এটি হওয়া উচিত:
const logo = require("./logo.svg") as string;
যা * .tsx ফাইলগুলিতে কাজ করে
logoআরও ভাল নামকরণ করা যেতে পারে logoPath, কারণ এটি হয়ে ওঠে।
logoপ্রশ্নে ডেকে আনা হয়েছে, সুতরাং এটি যেমন সুনির্দিষ্ট প্রশ্নের তত উত্তম উত্তর।
custom.d.tsসঠিক টাইপ ( রেডম্যাটকে ধন্যবাদ) সহ একটি ফাইল যুক্ত করুন (আমি এটি আমার এসআরসি ডিির মূল পথে তৈরি করেছি ):
declare module '*.svg' {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
এসভিজি-রিএ্যাক্ট-লোডার বা অন্য কিছু ইনস্টল করুন , তারপরে:
import MySVG from '-!svg-react-loader!src/assets/images/name.svg'
তারপরে এটি কেবল জেএসএক্স ট্যাগ হিসাবে ব্যবহার করুন:
function f() {
return (<MySVG />);
}
আমি যে সমাধানটি পেয়েছি: রিঅ্যাক্টজেএস প্রকল্পে, ফাইলটি-অ্যাপ-এনভি.ডি.এস্টে আপনি মন্তব্যটিতে স্থান সরিয়ে ফেলেন যেমন:
আগে
// / <reference types="react-scripts" />
পরে
/// <reference types="react-scripts" />
আমি আপনাকে সাহায্য আশা করি
একটি REACT + টাইপসক্রিপ্ট টিউটোরিয়াল চেষ্টা করার সময় আমার একই সমস্যা ছিল।
আমার জন্য কী কাজ করেছে তা ছিল নীচের আমদানির বিবৃতি।
import * as logo from 'logo.svg'
প্যাকেজ.জসনে আমার নির্ভরতা এখানে।
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts-ts": "3.1.0"
},
আশা করি এটি কাউকে সাহায্য করবে।
এটি করার একটি বিকল্প উপায় আছে যা আমরা প্রয়োগ করেছি: আপনার এসভিজির উপাদান তৈরি করুন। আমি এটি করেছি কারণ এটি আমার কাছে বাগড হয়েছে যে আমি requireআমার importএস এর পাশাপাশি সাধারণ জেএস বিবৃতি ব্যবহার করছি ।
টাইপস্ক্রিপ্ট সহ এন -কোড সম্পদগুলি ব্যবহার করতে , আমাদের এই আমদানির জন্য প্রকারটি স্থগিত করতে হবে । এটির জন্য একটি কাস্টম.ডি.এস.এস ফাইল দরকার যা আমাদের প্রকল্পে টাইপস্ক্রিপ্টের জন্য কাস্টম সংজ্ঞাগুলিকে ইঙ্গিত করে।
আসুন .svg ফাইলগুলির জন্য একটি ঘোষণা সেট আপ করুন:
custom.d.ts
declare module "*.svg" {
const content: any;
export default content;
}
এখানে আমরা এসভিজি-র জন্য একটি নতুন মডিউল ঘোষণা করি যা .svg এ শেষ হয় এবং মডিউলের সামগ্রীটি যেকোন হিসাবে সংজ্ঞায়িত করে কোনও আমদানি নির্দিষ্ট করে।
// eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />
আপনি যদি পগলিন স্লিন্ট ব্যবহার করছেন তবে এটি এমন হতে পারে যে এটি একটি মন্তব্য বলে মনে করে অক্ষম করেছেন তবে এসভিজিটি না পড়তে আপনার এই ধরণের স্ক্রিপ্ট মডিউল প্রয়োজন কেবল লাইনটি অক্ষম করুন এবং খুশি হোন
আমি *.svgনিম্নলিখিতগুলি করে কাজগুলি করতে সক্ষম হয়েছি :
next-imagescd /to/ur/root
npm install --save next-images
next.config.jsআপনার যদি next.config.jsফাইল না থাকে তবে মূলে একটি তৈরি করুন। পরে যুক্ত:
const withImages = require('next-images')
module.exports = withImages()
import icon from './icons/thaticon.svg';