feat: use path aliases, improve TS

src/App.tsx

@@ -2,9 +2,9 @@ import { useState } from 'react'
 import electron from '/electron.png'
 import react from '/react.svg'
 import vite from '/vite.svg'
-import styles from './styles/app.module.scss'
+import styles from 'styles/app.module.scss'
 
-const App = () => {
+const App: React.FC = () => {
   const [count, setCount] = useState(0)
 
   return (

src/main.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './styles/index.css'
+import 'styles/index.css'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

tsconfig.json

@@ -1,8 +1,13 @@
 {
   "compilerOptions": {
+		"baseUrl": ".",
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
+		"paths": {
+			"@/*": ["src/*"],
+      "styles/*": ["src/assets/styles/*"]
+		},
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -19,3 +24,4 @@
   "include": ["src", "types.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
+

vite.config.ts

@@ -5,10 +5,16 @@ import react from '@vitejs/plugin-react'
 import electron from 'vite-plugin-electron'
 import renderer from 'vite-plugin-electron/renderer'
 
-rmSync('dist', { recursive: true, force: true }) // v14.14.0
+rmSync(join(__dirname, 'dist'), { recursive: true, force: true }) // v14.14.0
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: {
+      '@': join(__dirname, 'src'),
+      'styles': join(__dirname, 'src/assets/styles'),
+    },
+  },
   plugins: [
     react(),
     electron({
@@ -22,7 +28,7 @@ export default defineConfig({
       },
       preload: {
         input: {
-          // You can configure multiple preload here
+          // You can configure multiple preload scripts here
           splash: join(__dirname, 'electron/preload/splash.ts'),
         },
         vite: {
@@ -33,7 +39,7 @@ export default defineConfig({
         },
       },
     }),
-    // Enable use Electron, Node.js API in Renderer-process
+    // Enables use of Node.js API in the Renderer-process
     renderer(),
   ]
 })