टाइपस्क्रिप्ट में json फ़ाइल आयात करना

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

आपका मॉड्यूल घोषणा और आपका आयात प्रपत्र असहमत है।

— एलुआन हदद

क्या आप एक उदाहरण दिखाते हैं? मैं टाइप नोब हूँ।

— सोरज

टाइपिंग कंपाइलर त्रुटि

— chharvey

Answer 1

आयात प्रपत्र और मॉड्यूल घोषणा मॉड्यूल के आकार के बारे में सहमत होने की आवश्यकता है, जो इसे निर्यात करता है।

जब आप लिखते हैं (टाइप मॉड्यूल 2.9 के बाद से JSON आयात करने के लिए एक उप-प्रचलित अभ्यास जब संगत मॉड्यूल स्वरूपों को लक्षित करते ^{हैं तो नोट देखें} )

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निर्यात होता है।

हालाँकि मैंने आपको गलत क्या है इसके बारे में संकेत देने के लिए अन्य रूपों का उल्लेख किया है। पिछले एक पर विशेष ध्यान दें। requireआपको मॉड्यूल का प्रतिनिधित्व करने वाली एक वस्तु देता है न कि उसके निर्यातित बाइंडिंग।

तो त्रुटि क्यों? क्योंकि आपने लिखा

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

और फिर भी primaryMainआपके द्वारा घोषित कोई भी निर्यात नहीं है "*.json"।

यह सभी मानता है कि आपका मॉड्यूल लोडर जेन्सन को defaultआपके मूल घोषणा के अनुसार सुझाव के रूप में निर्यात प्रदान कर रहा है ।

नोट: टाइपस्क्रिप्ट 2.9 के बाद से, आप --resolveJsonModuleकंपाइलर ध्वज का उपयोग टाइपस्क्रिप्ट को आयातित .jsonफ़ाइलों का विश्लेषण करने और वाइल्डकार्ड मॉड्यूल घोषणा की आवश्यकता को पूरा करने और फ़ाइल की उपस्थिति को मान्य करने के लिए उनके आकार के बारे में सही जानकारी प्रदान करने के लिए कर सकते हैं। यह कुछ लक्ष्य मॉड्यूल प्रारूपों के लिए समर्थित नहीं है।

Comments

@ रोई जो आपके लोडर पर निर्भर करता है। दूरस्थ फ़ाइलों का उपयोग करने के लिए विचार करेंawait import('remotepath');

— अलुअन हद्दाद

स्क्रॉल करते रहें, और अधिक अप-टू-डेट उत्तर नीचे।

— jbmusso

@jbmusso मैंने टाइपस्क्रिप्ट के बाद के संस्करणों द्वारा पेश किए गए सुधारों के बारे में कुछ जानकारी जोड़ी है, लेकिन मुझे नहीं लगता कि यह उत्तर पुराना है क्योंकि यह वैचारिक है। हालाँकि, मैं आगे सुधार के लिए सुझावों के लिए खुला हूँ।

— अलुआन हदद

जोखिम यह है कि कुछ लोग आपके उत्तर की पहली पंक्तियों को केवल कॉपी / पेस्ट कर सकते हैं, केवल लक्षण को ठीक कर सकते हैं और मूल कारण नहीं। मेरा मानना ​​है कि @ केंटोर का उत्तर अधिक विवरण देता है और अधिक पूर्ण उत्तर प्रदान करता है। आपके सुझाव को आपके उत्तर के शीर्ष पर ले जाने के लिए एक सिफारिश होगी, स्पष्ट रूप से यह कहते हुए कि आज के रूप में इस मुद्दे से निपटने का सही तरीका है।

— जंबुस्सो

@Atombit यह स्पष्ट रूप से मेरे सहित कई लोगों के लिए काम किया है। यह समझाने की परवाह करें कि स्वीकृत उत्तर को डाउनवोट करने से पहले क्या काम नहीं कर रहा है?

— एलुआन हद्दाद

Answer 2

टाइपस्क्रिप्ट 2.9 के साथ। आप केवल JSON फाइल को इस प्रकार टाइपफैटी और इंटैलिजेंस के साथ आयात कर सकते हैं:

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

इन सेटिंग्स compilerOptionsको अपने tsconfig.json( दस्तावेज़ ) के अनुभाग में जोड़ना सुनिश्चित करें :

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

साइड नोट्स:

• टाइपस्क्रिप्ट 2.9.0 में इस JSON सुविधा के साथ एक बग है, यह 2.9.2 के साथ तय किया गया था
• EsModuleInterop केवल कलर्स के डिफ़ॉल्ट आयात के लिए आवश्यक है। यदि आप इसे सेट करना छोड़ देते हैं तो आपको इसे आयात करना होगाimport * as colorsJson from '../colors.json'

Comments

आपको जरूरी नहीं है esModuleInterop, लेकिन फिर आपको करना होगा import * as foo from './foo.json';- esModuleInteropजब मैं इसे सक्षम करने की कोशिश कर रहा था तो मेरे लिए अन्य समस्याएं पैदा हो रही थीं।

— एमपीएन

आप सही हैं, मुझे एक साइड नोट :-) के रूप में जोड़ना चाहिए था।

— kentor

नोट: विकल्प "रेजोल्यूशनमॉडल" को "नोड" मॉड्यूल रिज़ॉल्यूशन रणनीति के बिना निर्दिष्ट नहीं किया जा सकता है, इसलिए आपको भी "moduleResolution": "node"अपने में रखना होगा tsconfig.json। यह भी नकारात्मक पक्ष के साथ आता है, कि जिन *.jsonफ़ाइलों को आप आयात करना चाहते हैं, उन्हें अंदर होना चाहिए "rootDir"। स्रोत: blogs.msdn.microsoft.com/typescript/2018/05/31/…

— Benny Neugebauer

@ यह सही है, लेकिन import * as foo from './foo.json'गलत आयात फॉर्म है। यह import foo = require('./foo.json');तब नहीं होना चाहिए जबesModuleInterop

— Aluan Haddad

केवल मेरे लिए आवश्यक हिस्सा था "resolveJsonModule": trueऔर सब कुछ ठीक है

— माइकल एलियट

Answer 3

टाइपस्क्रिप्ट संस्करण 2.9+ का उपयोग करना आसान है। तो आप आसानी से JSON फ़ाइलों को @kentor के रूप में आयात कर सकते हैं ।

लेकिन अगर आपको पुराने संस्करणों का उपयोग करने की आवश्यकता है:

आप 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में होनी चाहिए srcजैसा कि includeसंपत्ति में वर्णित है

+ 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

क्या rm -rf एक Linux / Unix चीज है, या यह ol 'Windurz पर भी काम करेगा?

— कोडी

धन्यवाद, मेरा typings.d.ts जगह से बाहर था। जैसे ही मैं / src के लिए चला गया त्रुटि संदेश गायब हो गया।

— 191 बजे Gi1ber7

@ कोडी यह वास्तव में केवल एक लिनक्स / यूनिक्स है।

— मैक्सी बर्कमैन

Answer 4

अपनी TS परिभाषा फ़ाइल में, उदाहरण के लिए typeings.d.ts`, आप इस लाइन को जोड़ सकते हैं:

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

फिर इसे अपनी टाइपस्क्रिप्ट (.ts) फ़ाइल में जोड़ें: -

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

Comments

यह बहुत बुरा विचार है।

— एलुआन हदद

क्या आप बुरा मानेंगे कृपया बताएं कि यह बुरा क्यों है ??? मैं टाइपस्क्रिप्ट में विशेषज्ञ नहीं हूं। @ आलुअनहदद

— मेहदी हसन

आपका प्रकार anyदो बातें कहता है। 1) जो आपने घोषित किया है या गलत तरीके से इसे केवल परिभाषा के आधार पर आयात किया है। किसी भी परिस्थिति में आपके द्वारा कभी भी आपके द्वारा घोषित मॉड्यूल के आयात पर एक प्रकार के दावे की आवश्यकता नहीं होनी चाहिए । 2) यहां तक ​​कि अगर आपके पास एक पागल लोडर है जो किसी भी तरह से रनटाइम पर काम करता है, तो देवता मना करते हैं, यह अभी भी एक पागलपनपूर्ण और सबसे भंगुर तरीका होगा जो किसी दिए गए आकार को प्राप्त करने के लिए मॉड्यूल का उपयोग कर सकता है। * as x fromऔर x fromओपी में जो है उससे कहीं अधिक बेमेल रनटाइम वार है। गंभीरता से ऐसा नहीं करते।

— एलुआन हदद

आपकी प्रतिक्रिया के लिए धन्यवाद। मैं साफ समझ चुका हूं। @ आलुअनहदद

— मेहदी हसन २४'१ad को

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

अक्सर Node.js अनुप्रयोगों में .json की आवश्यकता होती है। टाइपस्क्रिप्ट 2.9 के साथ, --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-.html