В приложении React + Django JS отображается правильно, когда TS не отображается
Я знаю JS и React, но не имею опыта работы с TS. Я следую учебнику на YT, но решил, что буду использовать TS для изучения, вместо JS.
И вот, после некоторой настройки, я решил, что готов продолжить обучение. Однако...
Это работает с JS:
index.html (шаблон Django):
[irrelevant html setup]
<body>
<div id="main">
<div id="app"></div>
</div>
<script src="{% static "frontend/main.js" %}"></script>
</body>
App.js:
import React from "react";
import { render } from "react-dom";
const App = () => {
return <h1>Testing React code</h1>;
};
export default App;
const appDiv = document.getElementById("app");
render(<App />, appDiv);
index.js:
import App from "./components/App";
// that's it. The import is all there is in index.js
Позже он компилируется babel-loader'ом в main.js, который я не буду вставлять сюда, так как он все равно нечитабелен. Однако, он отображает текст из App.js.
Когда у меня есть аналоговая настройка с TS, она почему-то не работает.
App.tsx:
import React, { FC } from "react";
import { render } from "react-dom";
const App: FC = () => {
return <h1>Testing React code</h1>;
};
export default App;
const appDiv = document.getElementById("app");
render(<App />, appDiv);
index.ts такой же, как index.js, html файл также остается неизменным.
Я запускаю tsc компилятор, затем run dev скрипт, который использует babel-loader. Файл main.js создается, но в нем одна длинная строка, и ничего не отображается, когда я запускаю сервер.
Файлы App.js и index.js создаются во время компиляции, но в index.js есть только export {}.
Я предполагаю, что это связано с разницей в работе TS и JS, но я не уверен, что именно нужно искать. Я не получаю никаких сообщений об ошибках.