Saya memiliki JSON
file yang terlihat seperti berikut:
{
"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"
}
Saya mencoba mengimpornya ke .tsx
file. Untuk ini saya menambahkan ini ke definisi tipe:
declare module "*.json" {
const value: any;
export default value;
}
Dan saya mengimpornya seperti ini.
import colors = require('../colors.json')
Dan dalam file tersebut, saya menggunakan warna primaryMain
sebagai colors.primaryMain
. Namun saya mendapatkan kesalahan:
Properti 'primaryMain' tidak ada pada tipe 'typeof "* .json"
json
angular
typescript
angular8
Sooraj
sumber
sumber
Jawaban:
Formulir impor dan deklarasi modul harus menyetujui tentang bentuk modul, tentang apa yang diekspornya.
Saat Anda menulis (praktik suboptimal untuk mengimpor JSON sejak TypeScript 2.9 saat menargetkan format modul yang kompatibel lihat catatan )
Anda menyatakan bahwa semua modul yang memiliki specifier diakhiri
.json
memiliki satu ekspor bernamadefault
.Ada beberapa cara Anda dapat dengan benar mengkonsumsi modul tersebut termasuk
dan
dan
dan
Bentuk pertama adalah yang terbaik dan gula sintaksisnya adalah alasan utama JavaScript
default
mengekspor.Namun saya menyebutkan bentuk lain untuk memberi Anda petunjuk tentang apa yang salah. Berikan perhatian khusus pada yang terakhir.
require
memberi Anda objek yang mewakili modul itu sendiri dan bukan bindings yang diekspor.Jadi mengapa kesalahannya? Karena kamu yang menulis
Namun tidak ada ekspor yang disebutkan
primaryMain
oleh Anda"*.json"
.Semua ini mengasumsikan bahwa pemuat modul Anda menyediakan JSON sebagai
default
ekspor seperti yang disarankan oleh deklarasi asli Anda.Catatan: Sejak TypeScript 2.9, Anda dapat menggunakan
--resolveJsonModule
flag compiler untuk membuat TypeScript menganalisis.json
file yang diimpor dan memberikan informasi yang benar mengenai bentuknya meniadakan perlunya deklarasi modul wildcard dan memvalidasi keberadaan file. Ini tidak didukung untuk format modul target tertentu.sumber
await import('remotepath');
Dengan TypeScript 2.9. + Anda cukup mengimpor file JSON dengan typesafety dan intellisense seperti ini:
Pastikan untuk menambahkan pengaturan ini di
compilerOptions
bagiantsconfig.json
( dokumentasi ) Anda:Catatan samping:
import * as colorsJson from '../colors.json'
sumber
esModuleInterop
, tetapi kemudian harus Anda lakukanimport * as foo from './foo.json';
-esModuleInterop
itu menyebabkan masalah lain bagi saya ketika saya mencoba mengaktifkannya."moduleResolution": "node"
ke dalamtsconfig.json
. Itu juga datang dengan kelemahan, bahwa*.json
file yang ingin Anda impor harus berada di dalamnya"rootDir"
. Sumber: blogs.msdn.microsoft.com/typescript/2018/05/31/…import * as foo from './foo.json'
merupakan formulir impor yang salah. Seharusnyaimport foo = require('./foo.json');
saat tidak menggunakanesModuleInterop
"resolveJsonModule": true
dan semuanya baikSangat mudah untuk menggunakan naskah versi 2.9+. Jadi, Anda dapat dengan mudah mengimpor file JSON sebagai @kentor yang diuraikan .
Tetapi jika Anda perlu menggunakan versi yang lebih lama:
Anda dapat mengakses file JSON dengan lebih banyak cara TypeScript. Pertama, pastikan
typings.d.ts
lokasi baru Anda sama denganinclude
properti ditsconfig.json
file Anda .Jika Anda tidak memiliki properti sertakan dalam
tsconfig.json
file Anda . Maka struktur folder Anda harus seperti itu:Tetapi jika Anda memiliki
include
properti ditsconfig.json
:Maka Anda
typings.d.ts
harus berada disrc
direktori seperti yang dijelaskan diinclude
propertiSeperti Dalam banyak respons, Anda dapat menentukan deklarasi global untuk semua file JSON Anda.
tapi saya lebih suka versi yang lebih diketik ini. Misalnya, katakan Anda memiliki file konfigurasi
config.json
seperti itu:Kemudian kita dapat mendeklarasikan tipe spesifik untuk itu:
Mudah mengimpor dalam file naskah Anda:
Tetapi dalam tahap kompilasi, Anda harus menyalin file JSON ke folder dist Anda secara manual. Saya baru saja menambahkan properti skrip ke
package.json
konfigurasi saya :sumber
Dalam file Definisi TS Anda, mis. Typings.d.ts`, Anda dapat menambahkan baris ini:
Kemudian tambahkan ini dalam file naskah (.ts) Anda: -
sumber
any
mengatakan dua hal. 1) bahwa Anda telah menyatakan atau mengimpor secara tidak benar di depannya hanya dengan definisi. Anda seharusnya tidak pernah dalam keadaan apa pun membutuhkan pernyataan jenis pada impor modul yang telah Anda nyatakan sendiri. 2) bahkan jika Anda memiliki loader gila yang entah bagaimana berhasil saat runtime, tuhan melarang, itu masih akan menjadi cara yang membingungkan dan paling rapuh untuk mengakses modul bentuk yang diberikan.* as x from
danx from
bahkan lebih runtime bijaksana daripada apa yang ada di OP. Serius jangan lakukan ini.Cara lain untuk pergi
Ini adalah Anda masih dapat mendefinisikan tipe json yang Anda inginkan dan tidak harus menggunakan wildcard.
Misalnya, tipe khusus json.
sumber
Seringkali dalam aplikasi Node.js, .json diperlukan. Dengan TypeScript 2.9, --resolveJsonModule memungkinkan untuk mengimpor, mengekstraksi jenis dari dan menghasilkan file .json.
Contoh #
sumber