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


He estado luchando con este problema durante las últimas horas y parece que no puedo encontrar nada en Internet que explique claramente este concepto, supuestamente 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 las interfaces que he escrito yo mismo en archivos separados para que sean visibles para toda la aplicación.

Para la creación de prototipos propósitos Inicialmente tenía interfaces definidas en archivos que las usan, pero finalmente empecé a agregar algunas que se necesitaban en varias clases y fue entonces cuando comenzaron todos los problemas. No importa qué cambios haga en mi tsconfig.json y no importa dónde ponga los archivos, mi IDE y Webpack se quejan de no poder encontrar nombres (Could not find name 'IMyInterface').

Aquí está mi archivo actual tsconfig.json:

{
  "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 puedes ver, mi tsconfig.json está en la raíz del directorio del proyecto, toda la fuente está en ./src, I coloqué mis archivos personalizados .d.ts en ./typings y los incluí 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 mi directorio 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 toda mi aplicación.

Editar: Aquí hay un archivo de ejemplo app.d.ts:

interface IAppStateProps {
}

interface IAppDispatchProps {
}

interface IAppProps extends IAppStateProps, IAppDispatchProps {
}

Do Necesito export ellos o tal vez declare? Espero no tener que envolverlos en un espacio de nombres?!

Author: Andris, 2017-02-14

1 answers

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

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

Aunque se desaconsejan 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. Por lo tanto, si define sus interfaces en un script, estará disponible globalmente en toda su aplicación (siempre y cuando el script esté incluido en la compilación a través de las etiquetas ///<reference path=""> o a través de files:[] o includes:[] o el predeterminado **/*.ts en su tsconfig.json.

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

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

Mi conjetura es que usted ha utilizado inadvertidamente import o export en sus declaraciones y lo convirtió en un módulo, que convirtió todas sus interfaces en privadas dentro de ese módulo. Si desea que sean globales, asegúrese de no usar declaraciones de importación/exportación dentro de su archivo.

 50
Author: dtabuenc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-15 18:48:40