I know JS and React, but have zero experience with TS. I'm following a tutorial on YT, but figured I'd use TS to learn it, instead of JS.
And so after some setting up, I figured I'm ready to continue with the tutorial. However...
This works with JS:
index.html (Django template):
[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
This is later compiled by babel-loader to main.js, which I'll not paste here, since it unreadable anyway. However, it does render the text from App.js.
When I have the analogical setup with TS, it doesn't work for some reason.
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 is the same as index.js, html file also remains unchanged.
I run tsc compiler, then run dev script that uses babel-loader. File main.js is created, but it has a one long line, and nothing is rendered when I run server.
Files App.js and index.js are created during compilation, but index.js has just export {} in it.
I suppose this is due to a difference in how TS and JS work, but I'm not sure what to even look for. I get no error messages.