Desafortunadamente, estas cosas no están actualmente muy bien documentadas, pero incluso si pudo hacerlo funcionar, repasemos su configuración para que comprenda lo que hace cada parte y cómo se relaciona con la forma en que el mecanografiado procesa y carga las mecanografías.
Primero repasemos el error que está recibiendo:
error TS2688: Cannot find type definition file for 'lodash'.
Este error en realidad no proviene de sus importaciones o referencias o de su intento de usar lodash en cualquier parte de sus archivos ts. Más bien proviene de un malentendido sobre cómo usar las propiedades typeRoots
y types
, así que vamos a entrar en más detalles sobre ellas.
Lo que pasa con las propiedades typeRoots:[]
y types:[]
es que NO son formas de propósito general para cargar *.d.ts
archivos de declaración arbitrarios ( ).
Estas dos propiedades están directamente relacionadas con la nueva característica TS 2.0 que permite empaquetar y cargar declaraciones de escritura de paquetes NPM .
Es muy importante comprender que estos funcionan solo con carpetas en formato NPM (es decir, una carpeta que contiene un package.json o index.d.ts ).
El valor predeterminado para typeRoots
es:
{
"typeRoots" : ["node_modules/@types"]
}
Por defecto, esto significa que mecanografiado irá a la node_modules/@types
carpeta e intentará cargar cada subcarpeta que encuentre allí como un paquete npm .
Es importante comprender que esto fallará si una carpeta no tiene una estructura similar a un paquete npm.
Esto es lo que está sucediendo en su caso y la fuente de su error inicial.
Ha cambiado typeRoot para ser:
{
"typeRoots" : ["./typings"]
}
Esto significa que mecanografiado ahora escaneará la ./typings
carpeta en busca de subcarpetas e intentará cargar cada subcarpeta que encuentre como un módulo npm.
Así que supongamos que acaba de tener una typeRoots
configuración a la que apuntar, ./typings
pero aún no tiene ninguna types:[]
configuración de propiedad. Es probable que vea estos errores:
error TS2688: Cannot find type definition file for 'custom'.
error TS2688: Cannot find type definition file for 'global'.
Esto se debe a que tsc
está escaneando su ./typings
carpeta y encontrando las subcarpetas custom
y global
. Luego está tratando de interpretarlos como tipo de paquete npm, pero no hay index.d.ts
o package.json
en estas carpetas, por lo que aparece el error.
Ahora hablemos un poco sobre la types: ['lodash']
propiedad que está configurando. ¿Qué hace esto? De forma predeterminada, mecanografiado cargará todas las subcarpetas que encuentre dentro de su typeRoots
. Si especifica una types:
propiedad, solo cargará esas subcarpetas específicas.
En su caso, le está diciendo que cargue la ./typings/lodash
carpeta, pero no existe. Por eso obtienes:
error TS2688: Cannot find type definition file for 'lodash'
Así que resumamos lo que hemos aprendido. Se introdujo Typecript 2.0 typeRoots
y types
para cargar archivos de declaración empaquetados en paquetes npm . Si tiene mecanografía personalizada o d.ts
archivos sueltos individuales que no están contenidos en una carpeta siguiendo las convenciones del paquete npm, estas dos nuevas propiedades no son las que desea usar. Typecript 2.0 no cambia realmente cómo se consumirían. Solo tiene que incluir estos archivos en su contexto de compilación de una de las muchas formas estándar:
Incluirlo directamente en un .ts
archivo:
///<reference path="../typings/custom/lodash.d.ts" />
Incluido ./typings/custom/lodash.d.ts
en su files: []
propiedad.
Incluyendo ./typings/index.d.ts
en su files: []
propiedad (que luego incluye recursivamente las otras tipificaciones.
Añadiendo ./typings/**
a tuincludes:
Con suerte, en base a esta discusión, podrá decir por qué los cambios que tsconfig.json
hizo que las cosas funcionaran nuevamente.
EDITAR:
Una cosa que olvidé mencionar es que typeRoots
y la types
propiedad solo es útil para la carga automática de declaraciones globales.
Por ejemplo si tu
npm install @types/jquery
Y está utilizando el tsconfig predeterminado, entonces ese paquete de tipos de jquery se cargará automáticamente y $
estará disponible en todos sus scripts sin tener que hacer más ///<reference/>
oimport
La typeRoots:[]
propiedad está destinada a agregar ubicaciones adicionales desde donde los paquetes de tipo se cargarán automáticamente.
El types:[]
caso de uso principal de la propiedad es deshabilitar el comportamiento de carga automática (configurándolo en una matriz vacía) y luego solo enumerar los tipos específicos que desea incluir globalmente.
La otra forma de cargar paquetes de tipos de varios typeRoots
es usar la nueva ///<reference types="jquery" />
directiva. Observe el en types
lugar de path
. Nuevamente, esto solo es útil para archivos de declaración global, generalmente los que no lo hacen import/export
.
Ahora, aquí está una de las cosas que causa confusión con typeRoots
. Recuerde, dije que typeRoots
se trata de la inclusión global de módulos. Pero @types/folder
también está involucrado en la resolución de módulo estándar (independientemente de su typeRoots
configuración).
En concreto, la importación de módulos de forma explícita siempre se salta todas includes
, excludes
, files
, typeRoots
y types
opciones. Entonces, cuando lo hagas:
import {MyType} from 'my-module';
Todas las propiedades mencionadas anteriormente se ignoran por completo. Las propiedades relevantes durante la resolución del módulo son baseUrl
, paths
y moduleResolution
.
Básicamente, cuando se utiliza node
la resolución del módulo, se iniciará la búsqueda de un nombre de archivo my-module.ts
, my-module.tsx
, my-module.d.ts
a partir de la carpeta a la que apunta su baseUrl
configuración.
Si no encuentra el archivo, entonces buscará una carpeta con nombre my-module
y luego buscará una package.json
con una typings
propiedad, si hay package.json
o no hay una typings
propiedad dentro que le indique qué archivo cargar, buscará index.ts/tsx/d.ts
dentro de esa carpeta.
Si aún no tiene éxito, buscará estas mismas cosas en la node_modules
carpeta que comienza en su baseUrl/node_modules
.
Además, si no los encuentra, buscará baseUrl/node_modules/@types
todas las mismas cosas.
Si todavía no se encontró nada va a empezar a ir al directorio padre y la búsqueda node_modules
y node_modules/@types
allí. Seguirá subiendo por los directorios hasta que llegue a la raíz de su sistema de archivos (incluso obteniendo módulos de nodo fuera de su proyecto).
Una cosa que quiero enfatizar es que la resolución del módulo ignora por completo cualquier typeRoots
configuración que establezca. Entonces, si configuró typeRoots: ["./my-types"]
, esto no se buscará durante la resolución explícita del módulo. Solo sirve como una carpeta donde puede colocar los archivos de definición global que desea que estén disponibles para toda la aplicación sin necesidad de importarlos o hacer referencia.
Por último, puede anular el comportamiento del módulo con asignaciones de ruta (es decir, la paths
propiedad). Entonces, por ejemplo, mencioné que typeRoots
no se consulta ninguna costumbre al intentar resolver un módulo. Pero si te gustó, puedes hacer que este comportamiento suceda así:
"paths" :{
"*": ["my-custom-types/*", "*"]
}
Lo que hace esto es para todas las importaciones que coinciden con el lado izquierdo, intente modificar la importación como en el lado derecho antes de intentar incluirla (el *
en el lado derecho representa su cadena de importación inicial. Por ejemplo, si importa:
import {MyType} from 'my-types';
Primero intentaría la importación como si hubiera escrito:
import {MyType} from 'my-custom-types/my-types'
Y luego, si no lo encuentra, lo intentará de nuevo sin el prefijo (el segundo elemento de la matriz es solo lo *
que significa la importación inicial.
De esta manera, puede agregar carpetas adicionales para buscar archivos de declaración personalizados o incluso .ts
módulos personalizados que desee import
.
También puede crear asignaciones personalizadas para módulos específicos:
"paths" :{
"*": ["my-types", "some/custom/folder/location/my-awesome-types-file"]
}
Esto te dejaría hacer
import {MyType} from 'my-types';
Pero luego lea esos tipos de some/custom/folder/location/my-awesome-types-file.d.ts
paths
y en qué se diferencia deinclude
la mecanografía?