У меня есть 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
. Однако я получаю сообщение об ошибке:
Свойство primaryMain не существует для типа typeof "* .json"
json
angular
typescript
angular8
Sooraj
источник
источник
Ответы:
Форма импорта и объявление модуля должны согласовывать форму модуля и то, что он экспортирует.
Когда вы пишете (субоптимальная практика для импорта JSON с TypeScript 2.9 при ориентации на совместимые форматы модулей, см. Примечание )
Вы заявляете, что все модули, у которых спецификатор заканчивается на,
.json
имеют один экспорт с именемdefault
.Есть несколько способов правильно использовать такой модуль, включая
и
и
и
Первая форма является лучшей, и синтаксический сахар, который она использует, является той самой причиной, по которой JavaScript имеет
default
экспорт.Однако я упомянул другие формы, чтобы подсказать вам, что происходит не так. Обратите особое внимание на последнюю.
require
дает вам объект, представляющий сам модуль, а не его экспортируемые привязки.Так почему ошибка? Потому что ты написал
И все же экспорт, указанный
primaryMain
вашим"*.json"
.Все это предполагает, что ваш загрузчик модуля предоставляет JSON в качестве
default
экспорта, как это было предложено вашим исходным объявлением.Примечание. Начиная с TypeScript 2.9, вы можете использовать
--resolveJsonModule
флаг компилятора, чтобы TypeScript анализировал импортированные.json
файлы и предоставлял правильную информацию об их форме, устраняя необходимость в объявлении модуля с подстановочными знаками и проверяя наличие файла. Это не поддерживается для определенных форматов целевых модулей.источник
await import('remotepath');
С TypeScript 2.9. + Вы можете просто импортировать файлы JSON с типовой безопасностью и intellisense следующим образом:
Обязательно добавьте эти настройки в
compilerOptions
раздел вашейtsconfig.json
( документации ):Примечания стороны:
import * as colorsJson from '../colors.json'
источник
esModuleInterop
, но вы должны сделатьimport * as foo from './foo.json';
- этоesModuleInterop
вызывало у меня другие проблемы, когда я пытался его включить."moduleResolution": "node"
в свойtsconfig.json
. У него также есть обратная сторона:*.json
файлы, которые вы хотите импортировать, должны находиться внутри"rootDir"
. Источник: blogs.msdn.microsoft.com/typescript/2018/05/31/…import * as foo from './foo.json'
это неправильная форма импорта. Он должен быть,import foo = require('./foo.json');
когда не используетсяesModuleInterop
"resolveJsonModule": true
и все хорошоМашинопись версии 2.9+ проста в использовании. Таким образом, вы можете легко импортировать файлы JSON, как описано в @kentor .
Но если вам нужно использовать более старые версии:
Вы можете получить доступ к файлам JSON более типичным способом. Во-первых, убедитесь, что ваше новое
typings.d.ts
местоположение такое же, как иinclude
свойство в вашемtsconfig.json
файле.Если у вас нет свойства include в вашем
tsconfig.json
файле. Тогда ваша структура папок должна быть такой:Но если у вас есть
include
недвижимость в вашемtsconfig.json
:Затем вы
typings.d.ts
должны быть вsrc
каталоге, как описано вinclude
свойствеКак и во многих ответах, вы можете определить глобальное объявление для всех ваших файлов JSON.
но я предпочитаю более типизированную версию этого. Например, допустим, у вас есть
config.json
такой файл конфигурации :Затем мы можем объявить для него определенный тип:
Легко импортировать в файлы машинописного текста:
Но на этапе компиляции вам следует вручную скопировать файлы JSON в папку dist. Я просто добавляю свойство скрипта в свою
package.json
конфигурацию:источник
В вашем файле определения TS, например typings.d.ts`, вы можете добавить эту строку:
Затем добавьте это в свой файл машинописного текста (.ts): -
источник
any
говорит о двух вещах. 1), который вы объявили или импортировали неправильно просто по определению. Вам ни при каких обстоятельствах не следует размещать утверждение типа при импорте модуля, который вы сами объявили. 2) даже если у вас есть сумасшедший загрузчик, который каким-то образом работает с этим во время выполнения, не дай бог, это все равно будет безумно запутанным и самым хрупким способом доступа к модулю данной формы.* as x from
иx from
даже более несовместимы во время выполнения, чем то, что находится в OP. Серьезно не делай этого.Другой способ пойти
При этом вы все еще можете определить тип json, если хотите, и не должны использовать подстановочные знаки.
Например, пользовательский тип json.
источник
Часто в приложениях Node.js требуется .json. В TypeScript 2.9 --resolveJsonModule позволяет импортировать, извлекать типы и создавать файлы .json.
Пример #
источник