Tapuscrit 2: personnalisé typings pour typée module npm
Après avoir essayé les suggestions posté dans d'autres endroits, je me trouve dans l'impossibilité d'obtenir un tapuscrit projet en cours d'exécution qui utilise un non MNP module. Ci-dessous est un exemple minimal et les étapes que j'ai essayé.
Pour cet exemple minimal, nous allons faire semblant que lodash
n'avons pas de définitions de type. En tant que tel, nous allons ignorer le paquet @types/lodash
et essayer de les ajouter manuellement son typings fichier lodash.d.ts
à notre projet.
Structure de dossier
- node_modules
- lodash
- src
- foo.ts
- typings
- personnalisé
- lodash.d.ts
- mondiale
- index.d.ts
- personnalisé
- paquet.json
- tsconfig.json
- typings.json
Ensuite, les fichiers.
Fichier foo.ts
///<reference path="../typings/custom/lodash.d.ts" />
import * as lodash from 'lodash';
console.log('Weeee');
Fichier lodash.d.ts
est copié directement à partir de l'original @types/lodash
paquet.
Fichier index.d.ts
///<reference path="custom/lodash.d.ts" />
///<reference path="globals/lodash/index.d.ts" />
Fichier package.json
{
"name": "ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"typings": "./typings/index.d.ts",
"dependencies": {
"lodash": "^4.16.4"
},
"author": "",
"license": "ISC"
}
Fichier tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"jsx": "react",
"module": "commonjs",
"sourceMap": true,
"noImplicitAny": true,
"experimentalDecorators": true,
"typeRoots" : ["./typings"],
"types": ["lodash"]
},
"include": [
"typings/**/*",
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
Fichier typings.json
{
"name": "TestName",
"version": false,
"globalDependencies": {
"lodash": "file:typings/custom/lodash.d.ts"
}
}
Comme vous pouvez le voir, j'ai essayé beaucoup de différentes manières d'importer des typings:
- En important directement dans
foo.ts
- Par un
typings
propriété danspackage.json
- En utilisant
typeRoots
danstsconfig.json
avec un fichiertypings/index.d.ts
- À l'aide d'un explicite
types
danstsconfig.json
- En incluant les
types
répertoire danstsconfig.json
- En faire un personnalisé
typings.json
fichier et en l'exécutanttypings install
Pourtant, quand je lance la Machine:
E:\temp\ts>tsc
error TS2688: Cannot find type definition file for 'lodash'.
Ce que je fais mal?
- Avez-vous essayé de l'inclure dans
foo.ts
à l'aide de chemin d'accès correct comme///<reference path="../typings/custom/lodash.d.ts" />
? - C'était une faute de frappe, je vous remercie. Il n'a pas changé le résultat.
Vous devez vous connecter pour publier un commentaire.
Malheureusement, ces choses ne sont pas actuellement très bien documenté, mais même si vous étiez en mesure d'obtenir ce travail, nous allons aller sur votre configuration, pour que vous compreniez ce que chaque partie est en train de faire et comment il se rapporte à la façon dont la machine a ecrire des processus et des charges typings.
D'abord, revenons sur l'erreur que vous recevez:
Cette erreur est en fait ne vient pas de votre importations ou des références ou que vous essayez de les utiliser lodash n'importe où dans vos fichiers ts. C'est plutôt venir d'une mauvaise compréhension de la façon d'utiliser le
typeRoots
ettypes
propriétés, nous allons donc aller dans un peu plus de détails sur ceux-ci.La chose à propos de
typeRoots:[]
ettypes:[]
propriétés, c'est qu'ils sont PAS usage général façons de charger arbitraire déclaration (*.d.ts
) des fichiers.Ces deux propriétés sont directement liées à la nouvelle TS 2.0 qui permet d'emballage et de chargement de taper les déclarations de MNP paquets.
C'est très important de comprendre, que ces travaux uniquement avec des dossiers dans MNP format (c'est à dire un dossier contenant un paquet.json ou index.d.ts).
La valeur par défaut pour
typeRoots
est:Par défaut, cela signifie que la machine va aller dans le
node_modules/@types
dossier et essayez de charger tous les sous-dossiers qu'il y trouve comme un mnp paquet.Il est important de comprendre que ceci ne fonctionnera pas si un dossier n'a pas un package npm-forme de la structure.
C'est ce qui se passe dans votre cas, et la source de votre erreur initiale.
Vous avez mis en typeRoot être:
Cela signifie que la machine va maintenant rechercher la
./typings
dossier pour sous-dossiers et essayez de charger chaque sous-dossier qu'il trouve comme un mécanisme national de prévention module.Donc, disons que vous avez juste eu
typeRoots
de l'installation de point d'./typings
, mais n'a pas encoretypes:[]
configuration de la propriété. Vous seriez probablement voir ces erreurs:C'est parce que
tsc
est la numérisation de votre./typings
dossier et de trouver les sous-dossierscustom
etglobal
. Il est alors d'essayer de les interpréter comme mnp package-type de frappe, mais il n'y a pas deindex.d.ts
oupackage.json
dans ces dossiers et si vous obtenez le message d'erreur.Maintenant, nous allons parler un peu de l'
types: ['lodash']
propriété de réglage. À quoi ça sert? Par défaut, la machine se charge tous sous-dossiers qu'il trouve au sein de votretypeRoots
. Si vous spécifiez untypes:
bien, il ne charge que ceux des sous-dossiers.Dans votre cas en vous disant qu'il se charge de la
./typings/lodash
dossier, mais il n'existe pas. C'est pourquoi vous obtenez:Donc, résumons ce que nous avons appris. Tapuscrit 2.0 a introduit
typeRoots
ettypes
pour le chargement de la déclaration de fichiers emballés dans mnp paquets. Si vous avez personnalisé typings ou unique lâched.ts
les fichiers qui ne sont pas contenus dans un dossier suivant mnp paquet de conventions, alors ces deux nouvelles propriétés ne sont pas ce que vous voulez utiliser. Tapuscrit 2.0 ne change pas vraiment la manière dont elles seront consommées. Vous avez juste à inclure ces fichiers dans votre compilation contexte dans l'une des nombreuses façons:Directement dans un
.ts
fichier:///<reference path="../typings/custom/lodash.d.ts" />
Y compris
./typings/custom/lodash.d.ts
dans votrefiles: []
propriété.Y compris
./typings/index.d.ts
dans votrefiles: []
propriété (qui a ensuite récursivement comprend les autres typings.Ajoutant
./typings/**
à votreincludes:
Espérons-le, à partir de cette discussion, vous serez en mesure de dire pourquoi les changements que vous êtes fou de votre
tsconfig.json
fait les choses fonctionnent de nouveau.EDIT:
Une chose que j'ai oublié de mentionner, c'est que
typeRoots
ettypes
propriété sont vraiment utiles que pour la automatique chargement de déclarations globales.Par exemple, si vous
Et que vous utilisez la valeur par défaut tsconfig, alors que jquery types de forfait sera automatiquement chargé et
$
sera disponible tout au long de tous vos scripts sans avoir à faire toute autre///<reference/>
ouimport
La
typeRoots:[]
propriété est destinée à ajouter d'autres sites à partir d'où le type paquets sera chargé frrom automatiquement.La
types:[]
propriété principale de cas d'utilisation est de désactiver le chargement automatique de comportement (en la plaçant dans un tableau vide), et ensuite seulement d'inscription de types spécifiques que vous souhaitez inclure à l'échelle mondiale.L'autre façon de charger le type de paquets provenant de diverses
typeRoots
est d'utiliser le nouveau///<reference types="jquery" />
directive. Avis de latypes
au lieu depath
. Encore une fois, ce n'est utile que pour la déclaration mondiale des fichiers, généralement ceux qui ne le font pasimport/export
.Maintenant, voici l'une des choses qui cause de la confusion avec
typeRoots
. Rappelez-vous, j'ai dit quetypeRoots
est sur l'inclusion de modules. Mais@types/folder
est également impliqué dans le module standard-définition (quel que soit votretypeRoots
réglage).Spécifiquement, de manière explicite à l'importation des modules toujours contourne tous les
includes
,excludes
,files
,typeRoots
ettypes
options. Ainsi, lorsque vous vous:Toutes les propriétés mentionnées ci-dessus sont totalement ignorés. Les propriétés pertinentes au cours de résolution de module sont
baseUrl
,paths
, etmoduleResolution
.En gros, lors de l'utilisation de
node
résolution de module, il va commencer à la recherche d'un nom de fichiermy-module.ts
,my-module.tsx
,my-module.d.ts
de départ dans le dossier pointé par votrebaseUrl
de configuration.S'il ne trouve pas le fichier, il va chercher un dossier nommé
my-module
, puis rechercher unepackage.json
avec untypings
bien, si il n'y apackage.json
ou pastypings
de la propriété à l'intérieur de la dire quels sont les fichiers à charger à la rechercheindex.ts/tsx/d.ts
dans ce dossier.Si ce n'est toujours pas de succès, il sera à la recherche de ces mêmes choses dans le
node_modules
dossier à partir de votrebaseUrl/node_modules
.En outre, si l'on ne trouve pas ces, il recherche
baseUrl/node_modules/@types
pour tous les mêmes choses.Si il n'a toujours pas trouver quoi que ce soit il va commencer le répertoire parent et de recherche
node_modules
etnode_modules/@types
là. Il va continuer à monter les répertoires jusqu'à ce qu'il atteigne la racine de votre système de fichiers (même l'obtention de nœud-modules à l'extérieur de votre projet).Une chose que je veux souligner, c'est que le module de résolution ignore complètement tout
typeRoots
vous définissez. Donc, si vous avez configurétypeRoots: ["./my-types"]
, ce ne seront pas recherchés lors de l'explicite résolution de module. Il ne sert que d'un dossier dans lequel vous pouvez mettre de la définition globale des fichiers que vous souhaitez rendre disponibles à l'ensemble de l'application sans avoir besoin d'importer ou de référence.Enfin, vous pouvez remplacer le module de comportement avec les mappages de chemin d'accès (c'est à dire la
paths
de la propriété). Ainsi, par exemple, j'ai mentionné que de coutumetypeRoots
n'est pas consultée lorsque vous tentez de résoudre un module. Mais si vous avez aimé, vous pouvez faire ce comportement se passera de la manière suivante:Ce que ce n'est, pour toutes les importations qui correspondent à la gauche, essayez de modifier l'importation comme dans le côté droit avant d'essayer de l'inclure (le
*
sur le côté droit représente votre importation initiale de la chaîne. Par exemple, si vous importez:Il faudrait d'abord essayer de l'importer comme si vous aviez écrit:
Et puis si il ne l'ai pas trouvé qu'il allait essayer de nouveau sans le préfixe (deuxième élément du tableau est juste
*
ce qui signifie que l'importation initiale.Ainsi, de cette façon, vous pouvez ajouter d'autres dossiers de recherche pour la déclaration en douane des fichiers ou même personnalisé
.ts
modules que vous voulez être en mesure deimport
.Vous pouvez également créer des mappages pour des modules spécifiques:
Ce serait vous faire
Mais ensuite lire ces types de
some/custom/folder/location/my-awesome-types-file.d.ts
paths
et comment est-il différent deinclude
dans le but de typings?"paths" :{ "my-types": ["some/custom/folder/location/my-awesome-types-file"] }
?Edit: en dehors de la date. Lire la réponse ci-dessus.
Je ne comprends toujours pas, mais j'ai trouvé une solution.
Utiliser les éléments suivants
tsconfig.json
:Supprimer
typings.json
et tout sous dossiertypings
sauflodash.d.ts
. Supprimez également tous les///...
références"*": ["./types/*"]
Cette ligne dans le tsconfig chemins fixe tout au bout de 2 heures de lutte.types est le nom du dossier, qui se trouve à côté de node_module je.e dans le niveau de client dossier (ou src dossier)
types/third-party-lib/index.d.ts
index.d.ts a
declare module 'third-party-lib';
Remarque: La config ci-dessus est incomplète config, juste pour donner une idée de à quoi ça ressemble avec des types de chemins, d'inclure et exclure en elle.