Importando arquivo json no TypeScript

Eu tenho um JSONarquivo que se parece com o seguinte:

{

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

Estou tentando importá-lo para um .tsxarquivo. Para isso, adicionei isso à definição de tipo:

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

E eu estou importando assim.

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

E no arquivo, eu uso a cor primaryMaincomo colors.primaryMain. No entanto, recebo um erro:

A propriedade 'primaryMain' não existe no tipo 'typeof "* .json"

O formulário de importação e a declaração do módulo precisam concordar sobre a forma do módulo, sobre o que ele exporta.

Quando você escreve (uma prática subótima para importar JSON desde o TypeScript 2.9 ao direcionar formatos de módulos compatíveis, ^{consulte a nota} )

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

Você está declarando que todos os módulos que possuem um especificador terminado em .jsontêm uma única exportação denominada default .

Existem várias maneiras de consumir corretamente esse módulo, incluindo

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

e

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

e

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

e

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

A primeira forma é a melhor e o açúcar sintático que ela aproveita é o motivo pelo qual o JavaScript defaultexporta.

No entanto, mencionei as outras formas para lhe dar uma dica sobre o que está acontecendo de errado. Preste atenção especial ao último. requirefornece um objeto que representa o próprio módulo e não suas ligações exportadas.

Então, por que o erro? Porque você escreveu

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

E, no entanto, não há exportação nomeada primaryMaindeclarada pelo seu "*.json".

Tudo isso pressupõe que o carregador de módulos esteja fornecendo o JSON como defaultexportação, conforme sugerido por sua declaração original.

Nota: Desde o TypeScript 2.9, você pode usar o --resolveJsonModulesinalizador do compilador para que o TypeScript analise os .jsonarquivos importados e forneça as informações corretas sobre sua forma, evitando a necessidade de uma declaração do módulo curinga e validando a presença do arquivo. Isso não é suportado para determinados formatos de módulo de destino.

Com o TypeScript 2.9. +, Você pode simplesmente importar arquivos JSON com segurança de tipo e inteligência como esta:

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

Certifique-se de adicionar essas configurações na compilerOptionsseção da tsconfig.json( documentação ):

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

Notas laterais:

• O Typcript 2.9.0 possui um bug com esse recurso JSON, foi corrigido com o 2.9.2
• O esModuleInterop é necessário apenas para a importação padrão do colorsJson. Se você deixar definido como false, precisará importá-lo comimport * as colorsJson from '../colors.json'

É fácil usar a versão datilografada 2.9+. Assim, você pode importar facilmente arquivos JSON como o @kentor descrito .

Mas se você precisar usar versões mais antigas:

Você pode acessar arquivos JSON de maneira mais TypeScript. Primeiro, verifique se o seu novo typings.d.tslocal é igual ao da includepropriedade no seu tsconfig.jsonarquivo.

Se você não possui uma propriedade include no seu tsconfig.jsonarquivo. Então sua estrutura de pastas deve ser assim:

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

Mas se você tem uma includepropriedade no seu tsconfig.json:

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

Então você typings.d.tsdeve estar no srcdiretório conforme descrito na includepropriedade

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

Como em muitas respostas, você pode definir uma declaração global para todos os seus arquivos JSON.

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

mas eu prefiro uma versão mais digitada disso. Por exemplo, digamos que você tenha um arquivo de configuração config.jsonassim:

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

Em seguida, podemos declarar um tipo específico para ele:

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

É fácil importar nos seus arquivos datilografados:

import * as Config from 'config.json';

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

Mas na fase de compilação, você deve copiar os arquivos JSON para a pasta dist manualmente. Acabei de adicionar uma propriedade de script à minha package.jsonconfiguração:

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

No seu arquivo TS Definition, por exemplo, typings.d.ts`, você pode adicionar esta linha:

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

Em seguida, adicione isso no seu arquivo datilografado (.ts): -

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

Outro caminho a percorrer

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

Foi assim que você ainda pode definir o tipo de json que deseja e não precisa usar curinga.

Por exemplo, tipo personalizado json.

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

Geralmente, nos aplicativos Node.js, é necessário um .json. Com o TypeScript 2.9, --resolveJsonModule permite importar, extrair tipos e gerar arquivos .json.

Exemplo #

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