two - ¿Cómo configurar interfaces globales personalizadas(archivos.d.ts) para TypeScript?

typescript proxy

Question

He estado luchando con este problema durante las últimas horas y parece que no encuentro nada en Internet que explique claramente este, supuestamente, un concepto simple.

Actualmente estoy trabajando en un proyecto ReactJS que utiliza Webpack2 y TypeScript. Todo funciona perfectamente aparte de una cosa: no puedo encontrar una manera de mover interfaces que yo mismo he escrito en archivos separados para que sean visibles para toda la aplicación.

Para fines de creación de prototipos, inicialmente tenía interfaces definidas en los archivos que las usan, pero finalmente comencé a agregar algunas que se necesitaban en varias clases y ahí fue cuando empezaron todos los problemas. No importa qué cambios realice en mi tsconfig.json y no importa dónde coloque los archivos, mi IDE y Webpack se quejan de no poder encontrar nombres ( Could not find name ''IMyInterface'' ).

Aquí está mi archivo tsconfig.json actual:

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

Como puede ver, mi tsconfig.json está en la raíz del directorio del proyecto, toda la fuente está en ./src , coloqué mis archivos .d.ts personalizados en ./typings y los typeRoots en typeRoots .

Lo probé con TypeScript 2.1.6 y 2.2.0 y ninguno funciona.

Una forma de hacer que todo funcione es mover el directorio de typings a src y luego import {IMyInterface} from ''typings/blah'' pero eso no me parece correcto ya que no es algo que deba usar. Quiero que esas interfaces estén "mágicamente" disponibles en mi aplicación.

Edición: Aquí hay un ejemplo de archivo app.d.ts :

interface IAppStateProps {
}

interface IAppDispatchProps {
}

interface IAppProps extends IAppStateProps, IAppDispatchProps {
}

¿Necesito export o tal vez declare ? Espero no tener que envolverlos en un espacio de nombres.

Answer 1

Las "interfaces disponibles mágicamente" o los tipos globales son altamente desalentadores y en su mayoría deben dejarse al legado. Además, no debe utilizar archivos de declaración ambiental (por ejemplo, archivos d.ts ) para el código que está escribiendo. Estos están destinados a ocupar el lugar del código externo no mecanografiado (esencialmente rellenando los tipos mecanografiados en código js para que pueda integrarlo mejor con javascript).

Para el código que escriba, debe usar archivos .ts formato para definir sus interfaces y tipos.

Si bien no se .ts los tipos globales, la respuesta a su problema es que hay dos tipos de archivos .ts en Typescript. Estos se llaman scripts y modules .

Cualquier cosa en un script será global. Entonces, si define sus interfaces en un script, estará disponible globalmente a lo largo de su aplicación (siempre que el script se incluya en la compilación a través de las etiquetas ///<reference path=""> o a través de files:[] o includes:[] o el valor predeterminado **/*.ts en su tsconfig.json .

El otro tipo de archivo es ''módulo'', y cualquier cosa en un module será privada al módulo. Si exporta algo de un módulo, estará disponible para otros módulos si esos otros módulos deciden importarlo.

¿Qué hace que un archivo .ts un "script" o un "módulo"? Bien ... si usa import/export en cualquier parte del archivo, ese archivo se convierte en un "módulo". Si no hay declaraciones de import/export , entonces es un script global.

Supongo que, sin darse cuenta, ha utilizado import o export en sus declaraciones y convertirlo en un módulo, que convirtió todas sus interfaces en privadas dentro de ese módulo. Si desea que sean globales, asegúrese de que no está utilizando las declaraciones de importación / exportación dentro de su archivo.