web-dev-qa-db-fra.com

Comment importer package.json dans TypeScript?

J'essaie d'importer mon fichier package.json dans TypeScript et cela ne semble pas fonctionner. Plus précisément, j'essaie simplement de l'importer pour pouvoir accéder aux propriétés de nom et de version d'une instruction de journal. Quelque chose comme:

import * as pjson from '../package.json';
// other code here
log.info(`${pjson.name}:${pjson.version}` started on port ...);

Nous avons la même syntaxe ailleurs dans d'autres projets qui utilisent Node/Babel, mais j'essaie d'introduire du TypeScript autour de ces parties. Ailleurs, nous ferions quelque chose comme:

import { name, version} from '../package.json';

Cela ne fonctionne pas ici cependant. J'ai suivi les instructions sur https://www.npmjs.com/package/json-d-ts qui au moins a fait disparaître l'erreur sur ma déclaration d'importation, mais maintenant, lorsque j'essaie d'accéder à des propriétés, le message d'erreur s'affiche. erreur suivante:

src/index.ts(20,21): error TS2339: Property 'name' does not exist on type 'typeof import("*.json")'.
src/index.ts(20,35): error TS2339: Property 'version' does not exist on type 'typeof import("*.json")'.

Existe-t-il un moyen de résoudre ce problème ou dois-je simplement coder ces valeurs quelque part (plutôt que de les récupérer de manière dynamique à partir de package.json)? Peut-être que je peux déclarer un type pour import("*.json") avec ces propriétés définies dessus?

jsontypescript
4
twofifty6

Depuis TypeScript 2.9, vous pouvez importer des fichiers JSON comme décrit ici: typescriptlang documentation 2.9 # json , vous devez pour cela activer l’option "resolJsonModule" dans votre tsconfig.json.

Vous avez besoin de TypeScript version 2.9 dans votre projet:

npm i TypeScript@latest --save ou yarn add TypeScript

si vous construisez les fichiers TypeScript à partir de la ligne de commande avec tsc, vous devrez installer la dernière version de TypeScript:

npm i -g TypeScript@latest ou yarn global add TypeScript

si vous construisez votre projet avec webpack et webpack-dev-server, vous devez vous assurer que les fichiers json sont hébergés dans le contexte webpack-dev-server en tant que fichiers statiques. Et même si vous les hébergiez, vous ne pouvez pas utiliser les fichiers js import dans l'environnement Web, vous devez charger le fichier json avec une demande ajax et analyser la réponse avec JSON.parse.

8
Sly321

TypeScript devrait pouvoir le faire comme suit:

import package from "../package.json"

// access name and version like this:

console.log(package.name);

Consultez la troisième zone grise sous Prise en charge des importations JSON bien typées.
https://blogs.msdn.Microsoft.com/TypeScript/2018/05/31/announcing-TypeScript-2-9/#json-imports

2
Corey Jallen