كيفية استيراد ملف JSON إلى ملف TypeScript؟




angular google-maps (7)

أقوم بإنشاء تطبيق خريطة باستخدام تطبيق Angular Maps وأريد استيراد ملف JSON كقائمة من العلامات التي تحدد المواقع. أتمنى استخدام ملف JSON هذا كصفيف علامة [] داخل app.component.ts. بدلاً من تحديد صفيف مضغوط من العلامات داخل ملف TypeScript.

ما هي أفضل عملية لاستيراد ملف JSON هذا للاستخدام في مشروعي؟ أي اتجاه موضع تقدير كبير!


اعتبارا من Typescript 2.9 ، يمكن للمرء ببساطة إضافة:

"compilerOptions": {
    "resolveJsonModule": true
}

إلى tsconfig.json . بعد ذلك ، من السهل استخدام ملف json (وسيكون هناك استنتاج لطيف في VSCode ، أيضًا):

data.json :

{
    "cases": [
        {
            "foo": "bar"
        }
    ]
}

في ملف Typescript الخاص بك:

import { cases } from './data.json';


شكرًا جزيلاً على اللاعبين الإدخال ، تمكنت من العثور على الإصلاح ، وقمت بإضافة وتعريف json في أعلى ملف app.component.ts:

var json = require('./[yourFileNameHere].json');

هذا أنتجت في نهاية المطاف علامات وهو سطر بسيط من التعليمات البرمجية.


فيما يلي إجابة كاملة عن Angular 6+ استنادًا إلى إجابةryanrain:

من doc- cli doc ، يمكن اعتبار json كأصول ويمكن الوصول إليها من الاستيراد القياسي دون استخدام طلب ajax.

لنفترض أنك أضفت ملفات json إلى دليل "your-json-dir":

  1. أضف "your-json-dir" إلى ملف angular.json (:

    "assets": [ "src/assets", "src/your-json-dir" ]

  2. إنشاء أو تحرير ملف typings.d.ts (في جذر المشروع الخاص بك) وإضافة المحتوى التالي:

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

    سيسمح هذا باستيراد الوحدات النمطية ".json" بدون خطأ في الكتابة.

  3. في ملف جهاز التحكم / الخدمة / أي شيء آخر ، ما عليك سوى استيراد الملف باستخدام هذا المسار النسبي:

    import * as myJson from 'your-json-dir/your-json-file.json';


كان Aonepathan's one-liner يعمل لي حتى آخر تحديث للطباعة.

لقد وجدت منشور Jecelyn Yeen الذي يقترح نشر هذه المقتطف في ملف تعريف TS

أضف typings.d.ts إلى مجلد جذر المشروع مع المحتوى أدناه

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

ثم استيراد البيانات الخاصة بك مثل هذا:

import * as data from './example.json';

تحديث يوليو 2019:

قدم Typescript 2.9 ( docs ) حلاً أفضل وأكثر ذكاءً. خطوات:

  1. أضف resolveJsonModule support بهذا السطر في ملف tsconfig.json :
"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

بيان الاستيراد يمكن أن يفترض الآن تصدير افتراضي:

import data from './example.json';

سيفحص intellisense الآن ملف json لمعرفة ما إذا كان يمكنك استخدام أساليب Array وما إلى ذلك. لطيف جدا.


لقد قرأت بعض الإجابات ولم يبدو أنها تعمل من أجلي. أنا أستخدم Typescript 2.9.2 و Angular 6 وأحاول استيراد JSON في اختبار وحدة الياسمين. هذا ما فعلته الحيلة بالنسبة لي.

إضافة:

"resolveJsonModule": true,

إلى tsconfig.json

استيراد مثل:

import * as nameOfJson from 'path/to/file.json';

وقف ng test ، ابدأ مرة أخرى.

المرجع: https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports


للزاوية 7+ ،

1) إضافة ملف "typings.d.ts" إلى المجلد الجذر للمشروع (على سبيل المثال ، src / typings.d.ts):

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

2) استيراد بيانات JSON والوصول إليها إما:

import * as data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data.default);
    }

}

أو:

import data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data);
    }

}

let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

var handleJSONFile = function (err, data) {
   if (err) {
      throw err;
   }
   markers= JSON.parse(data);
 }




maps