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

Question

আমার কাছে এমন 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। তবে আমি একটি ত্রুটি পেয়েছি:

টাইপফোন * *

Comments

আপনার মডিউল ঘোষণা এবং আপনার আমদানির ফর্ম একমত নয়।

— আলুয়ান হাদ্দাদ

আপনি একটি উদাহরণ দেখায় আপত্তি? আমি টাইপ স্ক্রিপ্ট নুব।

— সুরজ

জেসন ফাইল আমদানি করার সময় টাইপস্ক্রিপ্ট সংকলক ত্রুটির

— ছারভে

Answer 1

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

আপনি যখন লেখেন (সামঞ্জস্যপূর্ণ মডিউল ফর্ম্যাটগুলি লক্ষ্য করে লক্ষ্য করে ^{দেখুন} টাইপস্ক্রিপ্ট ২.৯ থেকে জেএসএন আমদানি করার জন্য একটি সাবঅপটিমাল অনুশীলন ^{নোট দেখুন} )

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

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

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

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

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

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

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

Comments

@ রোয়ী যা আপনার বোঝার উপর নির্ভর করে। রিমোট ফাইলগুলির জন্য বিবেচনা করুনawait import('remotepath');

— আলুয়ান হাদাদ ২

নীচে আরও আপ-টু-ডেট উত্তর স্ক্রোলিং করুন।

— jbmusso

@jbmusso আমি টাইপস্ক্রিপ্টের পরবর্তী সংস্করণগুলির দ্বারা প্রবর্তিত উন্নতি সংক্রান্ত কিছু তথ্য যুক্ত করেছি তবে আমি মনে করি না যে এই উত্তরটি পুরানো হয়ে গেছে কারণ এটি ধারণাগত। তবে আমি আরও উন্নতির জন্য পরামর্শের জন্য উন্মুক্ত।

— আলুয়ান হাদাদ

ঝুঁকিটি হ'ল কিছু লোক কেবল আপনার উত্তরের প্রথম লাইনগুলি অনুলিপি / পেস্ট করতে পারে, কেবল লক্ষণটি স্থির করে এবং মূল কারণটি নয়। আমি বিশ্বাস করি @ কেন্টরের উত্তরটি আরও বেশি বিশদ দেয় এবং আরও সম্পূর্ণ উত্তর সরবরাহ করে। একটি সুপারিশ হ'ল আপনার নোটটি আপনার উত্তরের উপরে স্থানান্তরিত করা, স্পষ্টভাবে উল্লেখ করে যে এই বিষয়টি আজকে সামাল দেওয়ার সঠিক উপায়।

— jbmusso

@ অ্যাম্বোবিত এটি স্পষ্টতই আমাকে সহ অনেক লোকের জন্য কাজ করেছে। গ্রহণযোগ্য উত্তরকে কমিয়ে দেওয়ার আগে কী কাজ করছে না তা বোঝানোর জন্য যত্নশীল?

— আলুয়ান হাদাদ

Answer 2

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

import colorsJson from '../colors.json'; // This import style requires "esModuleInterop", see "side notes"
console.log(colorsJson.primaryBright);

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

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

পার্শ্ব নোট:

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

Comments

আপনার অগত্যা প্রয়োজন হবে না esModuleInterop, তবে তারপরে আপনাকে করতে হবে import * as foo from './foo.json';- esModuleInteropযখন আমি এটি সক্ষম করার চেষ্টা করছিলাম তখন এটি আমার জন্য অন্যান্য সমস্যা তৈরি করেছিল।

— এমপেন

আপনি ঠিক বলেছেন, আমার এটিকে পার্শ্ব নোট :-) হিসাবে যুক্ত করা উচিত ছিল।

— কেন্টর

নোট: অপশন "resolveJsonModule", ছাড়া "নোড" মডিউল রেজল্যুশন কৌশল নির্দিষ্ট করা যাবে না, যাতে আপনার কাছে রাখতে হবে "moduleResolution": "node"আপনার মধ্যে tsconfig.json। *.jsonআপনি যে ফাইলগুলি আমদানি করতে চান সেগুলির অভ্যন্তরে থাকাও দরকার, এটি নেতিবাচক দিকগুলির সাথেও আসে "rootDir"। সূত্র: ব্লগস.এমএসডন.মাইক্রোসফট.

— বেনি

@ পরিস্কার করুন যা সঠিক তবে import * as foo from './foo.json'ভুল আমদানি ফর্ম। এটি import foo = require('./foo.json');যখন ব্যবহার না করা উচিতesModuleInterop

— আলুয়ান হাদাদ

আমার কেবলমাত্র অংশটি প্রয়োজন ছিল "resolveJsonModule": trueএবং সব ঠিক আছে

— মাইকেল এলিয়ট

Answer 3

টাইপস্ক্রিপ্ট সংস্করণ 2.9+ ব্যবহার করা সহজ। সুতরাং আপনি সহজেই @ কেনটোর ড্রিবিড হিসাবে জেএসএন ফাইলগুলি আমদানি করতে পারেন ।

তবে আপনার যদি পুরানো সংস্করণগুলি ব্যবহার করতে হয়:

আপনি আরও টাইপস্ক্রিপ্ট উপায়ে JSON ফাইল অ্যাক্সেস করতে পারেন। প্রথমে নিশ্চিত হয়ে নিন যে আপনার নতুন typings.d.tsঅবস্থানটি আপনার নিজের includeসম্পত্তি হিসাবে একইtsconfig.json ফাইলের ।

আপনার tsconfig.jsonফাইলটিতে যদি কোনও অন্তর্ভুক্ত সম্পত্তি না থাকে। তারপরে আপনার ফোল্ডারের কাঠামো এর মতো হওয়া উচিত:

- app.ts
+ node_modules/
- package.json
- tsconfig.json
- typings.d.ts

তবে আপনার যদি কোনও includeসম্পত্তি থাকে tsconfig.json:

{
    "compilerOptions": {
    },
    "exclude"        : [
        "node_modules",
        "**/*spec.ts"
    ], "include"        : [
        "src/**/*"
    ]
}

তারপরে আপনার সম্পত্তি হিসাবে বর্ণিত ডিরেক্টরিতে typings.d.tsথাকা উচিতsrcinclude

+ node_modules/
- package.json
- tsconfig.json
- src/
    - app.ts
    - typings.d.ts

প্রতিক্রিয়া হিসাবে অনেক হিসাবে, আপনি আপনার সমস্ত JSON ফাইলের জন্য একটি বিশ্বব্যাপী ঘোষণা সংজ্ঞায়িত করতে পারেন।

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

তবে আমি এর আরও টাইপিত সংস্করণ পছন্দ করি। উদাহরণস্বরূপ, ধরুন যে আপনার কাছে কনফিগারেশন ফাইল রয়েছে config.json:

{
    "address": "127.0.0.1",
    "port"   : 8080
}

তারপরে আমরা এর জন্য একটি নির্দিষ্ট ধরণের ঘোষণা করতে পারি:

declare module 'config.json' {
    export const address: string;
    export const port: number;
}

আপনার টাইপ স্ক্রিপ্ট ফাইলগুলিতে আমদানি করা সহজ:

import * as Config from 'config.json';

export class SomeClass {
    public someMethod: void {
        console.log(Config.address);
        console.log(Config.port);
    }
}

তবে সংকলনের পর্যায়ে আপনার নিজের ডিএসডি ফোল্ডারে ম্যানুয়ালি JSON ফাইল অনুলিপি করা উচিত। আমি আমার package.jsonকনফিগারেশনে একটি স্ক্রিপ্ট সম্পত্তি যুক্ত করেছি :

{
    "name"   : "some project",
    "scripts": {
        "build": "rm -rf dist && tsc && cp src/config.json dist/"
    }
}

Comments

আরএম-আরএফ কি লিনাক্স / ইউনিক্স জিনিস, বা ওল্ড উইন্ডুরসেও কাজ করবে?

— কোডি

আপনাকে ধন্যবাদ, আমার টাইপিংস.ডেস.টসের জায়গা ছিল না। আমি / src এ যাওয়ার সাথে সাথে ত্রুটি বার্তাটি অদৃশ্য হয়ে গেল।

— Gi1ber7

@ কোডি এটি আসলে একটি লিনাক্স / ইউনিক্স জিনিস।

— ম্যাক্সি বার্কম্যান

Answer 4

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

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

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

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

Comments

এটি একটি খুব খারাপ ধারণা।

— আলুয়ান হাদাদ

খারাপ লাগলে দয়া করে বুঝিয়ে দিবেন কি ??? আমি টাইপ স্ক্রিপ্টে বিশেষজ্ঞ নই। @ আলুয়ানহাদাদাদ

— হাসান

আপনার ধরণের দৃser়তা anyদুটি জিনিস বলে। 1) আপনি কেবল সংজ্ঞা দ্বারা এটির মুখে ভুলভাবে আমদানি বা আমদানি করেছেন। আপনি নিজেরাই ঘোষণা করেছেন যে কোনও মডিউল আমদানির ক্ষেত্রে কোনও পরিস্থিতিতে কোনও প্রকারের দৃ place়তা রাখা উচিত নয় । 2) আপনার যদি একটি উন্মাদ লোডার থাকে যা রানটাইমের সময় কোনওভাবে এটি কাজ করে, godsশ্বর বারণ করেন না তবে প্রদত্ত আকারটি কোনও মডিউল অ্যাক্সেস করার জন্য এটি একটি উন্মাদ বিভ্রান্তিকর এবং সবচেয়ে ভঙ্গুর উপায়। * as x fromএবং x fromআরও বেশি কি ওপি হয় চেয়ে রানটাইম জ্ঞানী বেমানান করছে। সিরিয়াসলি এটি করবেন না।

— আলুয়ান হাদাদ

আপনার প্রতিক্রিয়ার জন্য আপনাকে ধন্যবাদ. আমি স্পষ্ট বুঝতে পেরেছি। @ আলুয়ানহাদাদাদ

— হাসান

Answer 5

আর একটি উপায়

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

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

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

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

Comments

এই প্রশ্নের সাথে কোন সম্পর্ক নেই এবং এটি খারাপ অভ্যাসও।

— আলুয়ান হাদাদাদ

Answer 6

প্রায়শই নোড.জেএস অ্যাপ্লিকেশনগুলিতে একটি .json প্রয়োজন। টাইপস্ক্রিপ্ট ২.৯ সহ, --resolveJsonModule .json ফাইলগুলি থেকে আমদানি, প্রকার আহরণ এবং উত্পাদনের অনুমতি দেয়।

উদাহরণ #

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

// .ts

import settings from "./settings.json";

settings.debug === true;  // OK
settings.dry === 2;  // Error: Operator '===' cannot be applied boolean and number


// settings.json

{
    "repo": "TypeScript",
    "dry": false,
    "debug": false
}

লিখেছেন: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html