formatter - json viewer




টাইপস্ক্রিপ্টে জেসন ফাইল আমদানি করা হচ্ছে (4)

আমার কাছে একটি JSON ফাইল রয়েছে যা দেখতে নীচের মত দেখাচ্ছে:

{

  "primaryBright":    "#2DC6FB",
  "primaryMain":      "#05B4F0",
  "primaryDarker":    "#04A1D7",
  "primaryDarkest":   "#048FBE",

  "secondaryBright":  "#4CD2C0",
  "secondaryMain":    "#00BFA5",
  "secondaryDarker":  "#009884",
  "secondaryDarkest": "#007F6E",

  "tertiaryMain":     "#FA555A",
  "tertiaryDarker":   "#F93C42",
  "tertiaryDarkest":  "#F9232A",

  "darkGrey":         "#333333",
  "lightGrey":        "#777777"
}

আমি এটি একটি .tsx ফাইলে আমদানি করার চেষ্টা করছি। এর জন্য আমি এটি টাইপ সংজ্ঞায় যুক্ত করেছি:

declare module "*.json" {
  const value: any;
  export default value;
}

এবং আমি এটি এই মত আমদানি করছি।

import colors = require('../colors.json')

এবং ফাইলে, আমি কালার primaryMain রঙ হিসাবে ব্যবহার করি colors.primaryMain তবে আমি একটি ত্রুটি Property 'primaryMain' does not exist on type 'typeof "*.json" - Property 'primaryMain' does not exist on type 'typeof "*.json"

আমি কি ভুল করছি?


আমদানি ফর্ম এবং মডিউল ঘোষণাকে মডিউলটির আকৃতি সম্পর্কে, এটি কী রফতানি করে তা সম্পর্কে একমত হওয়া দরকার।

আপনি যখন লিখবেন (টাইপস্ক্রিপ্ট ২.৯ থেকে জেএসএন ফাইলগুলির জন্য একটি খারাপ অভ্যাস নোট দেখুন )

declare module "*.json" {
  const value: any;
  export default value;
}

আপনি উল্লেখ করছেন যে সমস্ত মডিউলগুলির একটি নির্দিষ্টকরণকারী শেষ। .json রয়েছে তার একক রফতানি নাম রয়েছে যা any প্রকারের type

এই জাতীয় মডিউল সহ আপনি বেশ কয়েকটি উপায়ে গ্রাস করতে পারেন

import a from "a.json";
a.primaryMain

এবং

import * as a from "a.json";
a.default.primaryMain

এবং

import {default as a} from "a.json";
a.primaryMain

এবং

import a = require("a.json");
a.default.primaryMain

প্রথম ফর্মটি সেরা এবং সিনট্যাকটিক চিনি যার ফলে এটি জাভাস্ক্রিপ্টের default রফতানি হয় le

যাইহোক আমি অন্য ফর্মগুলি উল্লেখ করেছি যাতে আপনাকে কী ভুল হচ্ছে সে সম্পর্কে ইঙ্গিত দিতে। শেষটির দিকে বিশেষ মনোযোগ দিন। require আপনাকে মডিউলটি নিজেই উপস্থাপন করে এমন একটি বস্তু দেয় যা এর রফতানি বাইন্ডিংগুলিকে নয়।

তাহলে ত্রুটি কেন? কারণ আপনি লিখেছেন

import a = require("a.json");
a.primaryMain

এবং এখনও আপনার "*.json" primaryMain "*.json" দ্বারা ঘোষিত "*.json" নামে কোনও রফতানি নেই।

এই সমস্ত অনুমান করে যে আপনার মডিউল লোডার আপনার আসল ঘোষণা দ্বারা প্রস্তাবিত হিসাবে default রফতানি হিসাবে JSON সরবরাহ করছে।

দ্রষ্টব্য: টাইপস্ক্রিপ্ট ২.৯ থেকে, আপনি --resolveJsonModule আমদানিকৃত .json ফাইল বিশ্লেষণ করতে --resolveJsonModule সংকলক পতাকা ব্যবহার করতে পারেন এবং ওয়াইল্ডকার্ড মডিউল ঘোষণার প্রয়োজনীয়তা ও ফাইলটির উপস্থিতি যাচাইয়ের জন্য তাদের আকৃতি সম্পর্কিত সঠিক তথ্য সরবরাহ করতে পারেন।


আর একটি উপায়

const data: {[key: string]: any} = require('./data.json');

এটি আপনি এখনও জাসন টাইপটিকে সংজ্ঞায়িত করতে পারেন যে আপনি চান এবং ওয়াইল্ডকার্ড ব্যবহার করতে হবে না।

উদাহরণস্বরূপ, কাস্টম টাইপ json।

interface User {
  firstName: string;
  lastName: string;
  birthday: Date;
}
const user: User = require('./user.json');

টাইপস্ক্রিপ্ট ২.৯ দিয়ে। + আপনি সহজেই টাইপস্যাফটি এবং ইন্টেলিজেন্স সহ জেএসএন ফাইলগুলি আমদানি করতে পারেন:

import colorsJson from '../colors.json';
console.log(colorsJson.primaryBright);

আপনার tsconfig.json ( documentation ) এর compilerOptions বিভাগে এই সেটিংস যুক্ত করার বিষয়টি নিশ্চিত করুন:

"resolveJsonModule": true,
"esModuleInterop": true,

পার্শ্ব নোট:

  • টাইপস্ক্রিপ্ট ২.৯.০ এ এই জেএসএন বৈশিষ্ট্য সহ একটি বাগ রয়েছে, আমি বিশ্বাস করি এটি ২.৯.১ বা ২.৯.২ সহ স্থির হয়েছে
  • #ModuleInterop কেবল রং জসনের ডিফল্ট আমদানির জন্য প্রয়োজনীয়। যদি আপনি এটি মিথ্যাতে সেট করে রেখে থাকেন তবে আপনাকে এটি import * as colorsJson from '../colors.json' আমদানি করে আমদানি করতে হবে import * as colorsJson from '../colors.json'

আপনার টিএস সংজ্ঞা ফাইলে, যেমন typings.d.ts`, আপনি এই লাইনটি যুক্ত করতে পারেন:

declare module "*.json" {
const value: any;
export default value;
}

তারপরে এটি আপনার টাইপ স্ক্রিপ্ট (.ts) ফাইলে যুক্ত করুন: -

import * as data from './colors.json';
const word = (<any>data).name;




typescript