From 79f2225145ba62a2256ce69460c60401fc44798c Mon Sep 17 00:00:00 2001
From: Shashikumarezhilarasu <shashikumarezhilarasu@gmail.com>
Date: Wed, 18 Dec 2024 23:46:50 +0530
Subject: [PATCH] feat - added typerscript tutorial for typesrcipt in electron

---
 .../package-lock.json                         |  16 +++
 docs/latest/tutorial/typescript-tutorial.md   | 134 ++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 create-electron-documentation/package-lock.json
 create mode 100644 docs/latest/tutorial/typescript-tutorial.md

diff --git a/create-electron-documentation/package-lock.json b/create-electron-documentation/package-lock.json
new file mode 100644
index 000000000..10def98c0
--- /dev/null
+++ b/create-electron-documentation/package-lock.json
@@ -0,0 +1,16 @@
+{
+  "name": "create-electron-documentation",
+  "version": "0.0.3",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "create-electron-documentation",
+      "version": "0.0.3",
+      "license": "Apache-2.0",
+      "bin": {
+        "create-electron-documentation": "index.js"
+      }
+    }
+  }
+}
diff --git a/docs/latest/tutorial/typescript-tutorial.md b/docs/latest/tutorial/typescript-tutorial.md
new file mode 100644
index 000000000..7579e8b02
--- /dev/null
+++ b/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>
\ No newline at end of file