diff --git a/.babelrc b/.babelrc
index 18151f1..ae52d83 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,3 @@
{
- "presets": ["@babel/preset-env", "@babel/preset-react"]
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2b5a2f0..4648f77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,11 +16,13 @@
"react-dom": "^18.2.0"
},
"devDependencies": {
+ "@babel/preset-typescript": "^7.24.1",
"babel-loader": "^9.1.3",
"css-loader": "^7.1.1",
"html-webpack-plugin": "^5.6.0",
"prettier": "3.2.5",
"style-loader": "^4.0.0",
+ "typescript": "^5.4.5",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
@@ -758,6 +760,21 @@
"@babel/core": "^7.0.0-0"
}
},
+ "node_modules/@babel/plugin-syntax-typescript": {
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz",
+ "integrity": "sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-plugin-utils": "^7.24.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
"node_modules/@babel/plugin-syntax-unicode-sets-regex": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
@@ -1498,6 +1515,24 @@
"@babel/core": "^7.0.0-0"
}
},
+ "node_modules/@babel/plugin-transform-typescript": {
+ "version": "7.24.4",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.4.tgz",
+ "integrity": "sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-annotate-as-pure": "^7.22.5",
+ "@babel/helper-create-class-features-plugin": "^7.24.4",
+ "@babel/helper-plugin-utils": "^7.24.0",
+ "@babel/plugin-syntax-typescript": "^7.24.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
"node_modules/@babel/plugin-transform-unicode-escapes": {
"version": "7.24.1",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.1.tgz",
@@ -1683,6 +1718,25 @@
"@babel/core": "^7.0.0-0"
}
},
+ "node_modules/@babel/preset-typescript": {
+ "version": "7.24.1",
+ "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.24.1.tgz",
+ "integrity": "sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==",
+ "dev": true,
+ "dependencies": {
+ "@babel/helper-plugin-utils": "^7.24.0",
+ "@babel/helper-validator-option": "^7.23.5",
+ "@babel/plugin-syntax-jsx": "^7.24.1",
+ "@babel/plugin-transform-modules-commonjs": "^7.24.1",
+ "@babel/plugin-transform-typescript": "^7.24.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
"node_modules/@babel/regjsgen": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
@@ -6241,6 +6295,19 @@
"node": ">= 0.6"
}
},
+ "node_modules/typescript": {
+ "version": "5.4.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+ "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+ "dev": true,
+ "bin": {
+ "tsc": "bin/tsc",
+ "tsserver": "bin/tsserver"
+ },
+ "engines": {
+ "node": ">=14.17"
+ }
+ },
"node_modules/undici-types": {
"version": "5.26.5",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
diff --git a/package.json b/package.json
index bf1b63d..2683b12 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
- "build": "webpack"
+ "build": "webpack",
+ "dev": "webpack-dev-server --mode development --open --hot"
},
"repository": {
"type": "git",
@@ -14,11 +15,13 @@
"author": "Curt Spark",
"license": "GPL-3.0-or-later",
"devDependencies": {
+ "@babel/preset-typescript": "^7.24.1",
"babel-loader": "^9.1.3",
"css-loader": "^7.1.1",
"html-webpack-plugin": "^5.6.0",
"prettier": "3.2.5",
"style-loader": "^4.0.0",
+ "typescript": "^5.4.5",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 76aaf9b..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-class App extends React.Component {
- render() {
- return Welcome to React!
;
- }
-}
-
-export default App;
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..6d28949
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+
+export default function App() {
+ return (
+
+ App
+
+ );
+}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index c24e9d8..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(, document.getElementById("root"));
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..fcf5ee1
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+
+const rootElement = document.getElementById("root");
+
+const root = ReactDOM.createRoot(rootElement!);
+
+root.render(
+
+);
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f0de458
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "compilerOptions": {
+ "jsx": "react-jsx" /* IMPORTANT! - this allows our JSX to be transpiled correctly */,
+ "target": "es5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+ "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+ "allowSyntheticDefaultImports": true /* Need for Webpack config file */,
+ "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+ "strict": true /* Enable all strict type-checking options. */,
+ "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+ "outDir": "dist",
+ "moduleResolution": "node"
+ },
+ "include": ["**/*.ts", "**/*.tsx"]
+}
diff --git a/webpack.config.js b/webpack.config.js
index 6fd8c1d..fe8c49d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,7 +2,7 @@ const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
- entry: "./src/index.js",
+ entry: "./src/index.tsx",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
@@ -10,7 +10,7 @@ module.exports = {
module: {
rules: [
{
- test: /\.(js|jsx)$/,
+ test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: "babel-loader",
},