Búsqueda de sitios web

javascript - Cómo importar información de tipo en un módulo destinado a ser cargado en navegadores

Tengo un módulo sencillo que genera un componente de React:

// index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

....

ReactDOM.render(......);

react y react-dom están en directorios en node_modules\@types.

Uso el compilador de TypeScript para compilar esto en un archivo .js. Ese archivo .js contiene un módulo (debido a las importaciones). Lo cargo en una página .html:

<script type="module" src="./js/Views/Home/index.js"></script>

Esto compila, y obtengo IntelliSense y verificación de tipos. Pero Chrome (versión 66) ahora lanza un error en la consola, diciendo

(index):1 Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".

Probé estas opciones:

1) Variables ambientales

// this works for both compiler and browser, but doesn't give me type checking or intellisense
declare var ReactDOM: any;
declare var React: any;

2) Ninguna declaración

Según https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types, esto recogerá cualquier declaración de @types de node_modules en el directorio actual, directorio padre, etc. Lo cual suena genial, pero me da el error del compilador:

'ReactDOM' refers to a UMD global, but the current file is a module. Consider adding an import instead.

3) Directiva de triple barra

/// <reference path="../../node_modules/@types/react-dom/index.d.ts" />

Poner esto en la parte superior del archivo también produjo el error del compilador

'ReactDOM' refers to a UMD global, but the current file is a module. Consider adding an import instead.

4) Especificar tipos en el archivo tsconfig.json

// Added to tsconfig.json, compilerOptions element
"types": [ "ReactDOM", "React" ]

El compilador ahora arroja muchos mensajes de error "(TS) Identificador duplicado ....".

5) Importar directamente archivos .d.ts

import * as React from "../../node_modules/@types/react/index.d.ts";
import * as ReactDOM from "../../node_modules/@types/react-dom/index.d.ts";

Esto me da el error del compilador:

An import path cannot end with a '.d.ts' extension. Consider importing '../../node_modules/@types/react/index' instead.

6) Importa directamente los archivos .d.ts, pero omite la extensión .d.ts

import * as React from "../../node_modules/@types/react/index";
import * as ReactDOM from "../../node_modules/@types/react-dom/index";

Esto se compila. Pero el navegador ahora lanza el mensaje de error:

index.tsx:1 GET http://localhost:8400/js/node_modules/@types/react/index 404 (Not Found)
index.tsx:2 GET http://localhost:8400/js/node_modules/@types/react-dom/index 404 (Not Found)

Mi pregunta es, ¿cómo puedo importar información de tipo en un módulo que debe ser cargado por el navegador?

Artículos relacionados