feat - added typerscript tutorial for typesrcipt in electron #706

docs/latest/tutorial/typescript-tutorial.md

@@ -0,0 +1,134 @@
+Getting Started with TypeScript in Electron<br>
+Why Use TypeScript with Electron?<br>
+TypeScript provides static typing, improved editor support, and better maintainability, making it an excellent choice for Electron applications. This guide will walk you through setting up a basic Electron project with TypeScript and introduce tools to streamline development.
+<br>
+1. Setting Up a Basic TypeScript Project<br>
+Initialize a Project
+
+```
+mkdir electron-typescript-app
+cd electron-typescript-app
+npm init -y
+
+```
+Install Dependencies <br>
+    Install TypeScript and Electron:
+ ```
+npm install electron --save
+npm install typescript --save-dev
+
+```
+Generate tsconfig.json<br>
+Run the TypeScript configuration generator:
+bash
+```
+npx tsc --init
+```
+Update tsconfig.json for Electron:
+json
+```
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "CommonJS",
+    "strict": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "moduleResolution": "Node",
+    "esModuleInterop": true
+  },
+  "include": ["src/**/*"]
+}
+```
+Create Project Structure
+
+Create the following directory and file structure:
+css
+```
+/src
+  ├── main.ts
+  ├── preload.ts
+  ├── renderer.ts
+```
+Write Basic Electron Code
+
+src/main.ts:
+
+typescript
+```
+import { app, BrowserWindow } from "electron";
+
+let mainWindow: BrowserWindow;
+
+app.on("ready", () => {
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: __dirname + "/preload.js"
+    }
+  });
+  mainWindow.loadFile("index.html");
+});
+
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+```
+src/preload.ts:
+
+```
+window.addEventListener("DOMContentLoaded", () => {
+  console.log("Preload script loaded");
+});
+```
+src/renderer.ts:
+```
+console.log("Hello from the Renderer process");
+```
+Add Build and Start Scripts
+
+Update package.json:
+```
+{
+  "scripts": {
+    "build": "tsc",
+    "start": "electron ./dist/main.js"
+  }
+}
+```
+Build and Run
+
+Compile the project:
+```
+npm run build
+```
+Start the application:
+```
+npm start
+```
+2. Using Tools for Faster Setup
+If you prefer a streamlined setup, consider using these tools:
+
+electron-vite
+Install electron-vite:
+```
+npm create electron-vite
+```
+Follow the prompts to configure your project with TypeScript.
+nextron
+Install nextron globally:
+```
+npm install -g nextron
+```
+Create a new project:
+```
+nextron init my-project --typescript
+```
+Follow the setup instructions provided by Nextron.<br>
+<br>3. Benefits of TypeScript<br>
+    Type safety reduces runtime errors.<br>
+    Better code navigation and auto-completion.<br>
+    Easier to scale and maintain large projects.<br>