Как импортировать информацию о типе в модуль, предназначенный для загрузки в браузерах

Question

У меня есть простой модуль, который генерирует компонент React:

// index.tsx

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

....

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

реагировать и реагировать находятся в каталогах в node_modules \ @types.

Я использую компилятор TypeScript, чтобы скомпилировать это в файл .js. Этот файл .js содержит модуль (из-за импорта). Я загружаю это в .html-страницу:

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

Это компилируется, и я получаю Intellisense и проверку типов. Но Chrome (версия 66) теперь выдает ошибку в консоли, говоря:

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

Я пробовал эти варианты:

1) Внешние переменные

// 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) Нет объявлений вообще

Согласно https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types, это подберет любые объявления @types из node_modules в текущем каталоге, родительском каталоге и т. Д.) Это звучит замечательно, но дает ошибку компилятора:

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

3) Директива о тройном слэше

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

Помещение в начало файла также приводило к ошибке компилятора

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

4) Укажите типы в файле tsconfig.json

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

Компилятор теперь выдает множество сообщений об ошибках "(TS) Duplicate identifier ....".

5) Прямой импорт файлов .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";

Это дает мне ошибку компилятора:

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

6) Непосредственно импортируйте файлы .d.ts, но не включайте расширение .d.ts

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

Это компилируется. Но браузер теперь выдает сообщение об ошибке:

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)

У меня вопрос, как я могу импортировать информацию о типе в модуль, который должен загружаться браузером?

Answer 1

Я думаю, что вы на правильном пути с первой попытки. Если вы прочитаете сообщение об ошибке, оно говорит вам, что вы сможете указать импорт, используя относительный путь. Например:

import * as React from "./react";