TypeScript'te json dosyasını içe aktarma

Bir var JSONgörünüyor şu Seviyorum bu dosyayı:

{

  "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"
}

Onu bir .tsxdosyaya aktarmaya çalışıyorum . Bunun için bunu tür tanımına ekledim:

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

Ve bunu böyle ithal ediyorum.

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

Ve dosyada rengi primaryMainolarak kullanıyorum colors.primaryMain. Ancak bir hata alıyorum:

'PrimaryMain' özelliği 'typeof "* .json" türünde mevcut değil

İçe aktarma formu ve modül beyanı, modülün şekli ve ne ihraç ettiği konusunda anlaşmalıdır.

Yazdığınızda (uyumlu modül formatlarını hedeflerken TypeScript 2.9'dan beri JSON'u içe aktarmak için optimal olmayan bir uygulama ^{nota bakın} )

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

İle biten bir tanımlayıcıya sahip tüm modüllerin adında.json tek bir dışa aktarım olduğunu belirtiyorsunuz. default .

Böyle bir modülü doğru şekilde tüketmenin birkaç yolu vardır:

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

ve

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

ve

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

ve

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

İlk biçim en iyisidir ve kullandığı sözdizimsel şeker, JavaScript'in defaultdışa aktarmasının tam sebebidir .

Ancak size neyin yanlış gittiğine dair bir ipucu vermek için diğer formlardan bahsetmiştim. Sonuncusuna özellikle dikkat edin. requiresize modülün kendisini temsil eden bir nesneyi verir , dışa aktarılan bağlamaları değil .

Öyleyse neden hata? Çünkü sen yazdın

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

Ve yine adında hiçbir ihracat yoktur primaryMainİSS'niz tarafından beyan "*.json".

Tüm bunlar, modül yükleyicinizin JSON'u defaultorijinal beyanınızda önerildiği gibi dışa aktarım olarak sağladığını varsayar .

Not: TypeScript 2.9'dan bu yana , TypeScript'in içe aktarılan dosyaları analiz etmesini sağlamak ve bir joker modül bildirimi ihtiyacını ortadan kaldıran ve dosyanın varlığını doğrulayan şekilleriyle ilgili doğru bilgiler sağlamak için --resolveJsonModulederleyici bayrağını kullanabilirsiniz .json. Bu, belirli hedef modül formatları için desteklenmez.

TypeScript 2.9. + İle JSON dosyalarını tür güvenliği ve intellisense ile basitçe içe aktarabilirsiniz:

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

Bu ayarları ( belgeler ) compilerOptionsbölümüne eklediğinizden emin olun :tsconfig.json

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

Yan notlar:

• TypeScript 2.9.0'da bu JSON özelliğinde bir hata var, 2.9.2 ile düzeltildi
• EsModuleInterop yalnızca coloursJson'un varsayılan içe aktarımı için gereklidir. Eğer bunu false olarak bırakırsanız, o zaman içeri aktarmanız gerekir.import * as colorsJson from '../colors.json'

Typcript 2.9+ sürümünü kullanmak kolaydır. Böylece, JSON dosyalarını @kentor tanımlanmış olarak kolayca içe aktarabilirsiniz .

Ancak daha eski sürümleri kullanmanız gerekiyorsa:

JSON dosyalarına daha TypeScript yoluyla erişebilirsiniz. Öncelikle, yeni typings.d.tskonumunuzun dosyanızdaki includemülk ile aynı olduğundan emin olun tsconfig.json.

tsconfig.jsonDosyanızda bir include özelliğiniz yoksa . O zaman klasör yapınız şöyle olmalıdır:

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

Ama eğer bir includemülkünüz varsa tsconfig.json:

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

Ardından, mülkiyet bölümünde açıklandığı gibi dizinde typings.d.tsolmalısınızsrcinclude

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

Yanıtın çoğunda olduğu gibi, tüm JSON dosyalarınız için genel bir bildirim tanımlayabilirsiniz.

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

ama bunun daha yazılı bir versiyonunu tercih ederim. Örneğin, şöyle bir yapılandırma dosyanız config.jsonolduğunu varsayalım:

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

O zaman bunun için belirli bir tür bildirebiliriz:

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

Typcript dosyalarınıza içe aktarmak kolaydır:

import * as Config from 'config.json';

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

Ancak derleme aşamasında, JSON dosyalarını dist klasörünüze manuel olarak kopyalamanız gerekir. package.jsonYapılandırmama bir komut dosyası özelliği ekledim:

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

TS Tanım dosyanıza, örn. Typings.d.ts`, şu satırı ekleyebilirsiniz:

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

Ardından bunu typecript (.ts) dosyanıza ekleyin: -

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

Gitmenin başka bir yolu

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

Bu, istediğiniz json türünü hala tanımlayabiliyordunuz ve joker karakter kullanmak zorunda değilsiniz.

Örneğin, özel tür json.

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

Genellikle Node.js uygulamalarında bir .json gereklidir. TypeScript 2.9 ile --resolveJsonModule, .json dosyalarından türlerin içe aktarılmasına, çıkarılmasına ve oluşturulmasına izin verir.

Misal #

// 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
}