Uncategorized

TypeScript for Beginners: How to Transpile to JavaScript

Ready to write your very first TypeScript program? In this tutorial, we move beyond configuration and start coding! We’ll show you how to properly set up your `src` folder, create your first `index.ts` file, and use the TypeScript compiler (`tsc`) to transpile your code into working JavaScript.

**In this video, you will learn:**

* How to organize your TypeScript project for scale.
* Writing a simple “Hello World” style program in TypeScript.
* Understanding the relationship between `.ts` and `.js` files.
* Running your project and verifying the output.

—–

### **Timestamps**

0:00 – Introduction: Beyond Configuration
0:18 – Understanding npm vs npx for Binaries
0:32 – How tsc Compiles TypeScript to JavaScript
0:40 – Setting Up the Project Structure (src Folder)
0:52 – Writing Your First TypeScript Code
1:24 – Creating the index.ts Entry Point
1:42 – Running the Transpiler and Checking Output
2:04 – Exploring the Declaration and Map Files
2:32 – Summary & Final Project Run

Uncategorized

How to Configure TypeScript for Beginners (Step-by-Step)

Master the essentials of TypeScript configuration in this deep dive into the `tsconfig.json` file. Whether you’re setting up a new project or fixing compiler errors, understanding how to structure your source files (`src`) and manage build outputs is critical for every developer.

In this video, we cover:

* Initializing your TypeScript configuration.
* Managing the `src` folder and entry points like `index.ts`.
* Configuring compiler options for better development.
* Using `.gitignore` to keep your project clean.

—–

### **Chapters with Timestamps**

0:00 – Introduction to TypeScript Project Structure
0:22 – Creating the src Folder and index.ts
0:38 – Understanding the tsconfig.json File
0:50 – Setting up .gitignore for TypeScript
1:19 – Detailed Compiler Configuration
1:40 – Customizing Default Configuration Values
2:14 – Advantages of Proper TypeScript Setup
2:32 – Final Summary & NPM Commands

Uncategorized

How to Configure tsconfig.json in TypeScript (npx tsc –init)

Ever wondered what actually happens behind the scenes when you write TypeScript?

In this video, we break down the core project structure—including node_modules, package.json, and package-lock.json—and dive deep into tsconfig.json (the TypeScript “Rule Book”). You’ll learn how the TypeScript Compiler (TSC) works and how to set up your rootDir and outDir settings for clean, professional builds.

⚡ Key Commands Covered:
• Initialize TS configuration: npx tsc –init
• Run TypeScript compiler: npx tsc

⏱️ Timestamps:
00:00 – The Big Three: node_modules, package.json & package-lock.json
00:32 – What is TSC? (TypeScript Compiler Explained)
01:00 – Organizing Source (/src) vs. Distribution (/dist)
01:34 – Initializing Config (`npx tsc –init`)
02:08 – Demystifying tsconfig.json (The Rule Book)
02:27 – Configuring `rootDir` and `outDir`

—————————————————
🔔 Subscribe to Beshilo Coding Academy for full-stack software development tutorials!
#TypeScript #JavaScript #WebDevelopment #Programming #VSCode #BeshiloCodingAcademy

Uncategorized

Stop Installing TypeScript Global! Do This Instead 🛑

Ready to build with TypeScript? Setting up your project correctly from day one saves you from hours of debugging down the road.

In this video, we go step-by-step through initializing a Node.js project using `npm init -y`, installing TypeScript as a development dependency (`–save-dev`), and verifying the installation with `npx tsc`.

⚡ Key Commands Covered:
• Verify setup: node -v & npm -v
• Initialize project: npm init -y
• Install TypeScript locally: npm install -D typescript
• Verify TypeScript compiler: npx tsc –version

⏱️ Timestamps:
00:00 – Verifying Node.js & npm Setup
00:58 – Initializing Project (`npm init -y`)
01:16 – `package.json` Explained Simply
01:28 – Installing TypeScript (`npm i -D typescript`)
01:45 – Why Use `–save-dev` (`-D`) for TypeScript?
02:08 – Verifying Installation with `npx tsc`

—————————————————
🔔 Subscribe to Beshilo Coding Academy for full-stack software development tutorials!
#TypeScript #JavaScript #WebDevelopment #Programming #VSCode #BeshiloCodingAcademy

Uncategorized

TypeScript Fundamentals Tutorial for Beginners (2027)

Master TypeScript fundamentals step-by-step in this full 40-minute deep dive! Stop letting hidden JavaScript errors crash your applications in production. In this complete guide, you will learn static typing, interfaces, type aliases, custom enums, and real-world project structuring directly in Visual Studio Code.

Whether you are transitioning from vanilla JavaScript or setting up full-stack applications from scratch, this course equips you with the essential skills to write clean, predictable, and production-ready code.

💡 WHAT YOU WILL LEARN:
• TypeScript Setup: Setting up VS Code, compiling TS to JS, and running custom project scripts.
• Primitive & Complex Types: Working with Strings, Numbers, Booleans, Arrays, Tuples, Enums, and Union Types.
• Type Safety & Inference: How TypeScript infers types and when to use explicit type annotations.
• Object Structuring: Reusable Type Aliases, Interfaces, and Interface Inheritance using ‘extends’.
• Git Integration: Structuring files cleanly and pushing your repository directly to GitHub.

⏰ TIMESTAMPS:
00:00 – Introduction to TypeScript Fundamentals
00:22 – Primitive Types (String, Number, Boolean)
01:06 – VS Code Setup & Project Initialization
02:36 – TypeScript vs JavaScript: Key Differences
03:28 – Compiling & Running TypeScript Code
05:01 – Script Automation: Build, Clean & Start
05:26 – Type Inference vs Explicit Types
07:58 – Working with Arrays
09:48 – Array Indexing & Accessing Elements
11:49 – Object Structures & Key-Value Pairs
15:15 – Function Parameters & Return Types
18:13 – Using Template Literals in Typed Functions
19:14 – Union Types Explained
22:26 – Reusable Types with Type Aliases
25:48 – Defining Object Shapes with Interfaces
28:18 – Interface Inheritance using ‘extends’
30:08 – Tuples & Optional Parameters
34:24 – Enums Deep Dive
38:13 – Real-World Project File Structure
38:58 – Git Workflow: Committing & Pushing to GitHub
40:04 – Course Summary & Module 3 Preview

🔗 LINKS & RESOURCES:
📂 GitHub Repository: [https://github.com/Haile1221/Typescript-Tutorial]
🚀 Subscribe to Beshilo Coding Academy: [https://www.youtube.com/channel/UCEY6mPRCSw6zQWyhnUxbmEg]
💬 Join the Telegram Community: [https://t.me/beshilocodingacademy]
🌐 Official Website: [https://h-digitalbusiness.com]

* **Official Channel:** [https://www.youtube.com/channel/UCEY6mPRCSw6zQWyhnUxbmEg]
* **React JS Full Course :** [https://www.youtube.com/watch?v=hO5qbDCgR2o]
* **TypeScript Full course :** [https://m.youtube.com/shorts/LIkTf8Palik]

#TypeScript #WebDevelopment #JavaScript #CodingTutorial #BeshiloCodingAcademy #SoftwareEngineering #LearnToCode

Uncategorized

Complete Node.js Setup Guide for Windows (Manual & Winget Method)

Stop wasting time navigating to nodejs.org! In this video, I walk you through the fastest ways to install and update Node.js on Windows—comparing the traditional installer with the lightning-fast Windows Terminal (winget) method.

⚡ Key Commands Used:
• Check version: node -v & npm -v
• Install via winget: winget install OpenJS.NodeJS
• Upgrade Node.js: winget upgrade OpenJS.NodeJS

⏱️ Timestamps:
00:00 – Check Current Node & npm Version
00:35 – Method 1: Official Node.js Installer (GUI)
00:52 – Method 2: Fast Terminal Install (Winget)
01:08 – How to Install Node.js LTS Version
01:34 – How to Upgrade Node.js via CLI
02:23 – Pro Tip: Why CLI Beats Manual Downloads

—————————————————
🔔 Subscribe to Beshilo Coding Academy for more practical dev tips & tutorials!
#NodeJS #JavaScript #WebDevelopment #Programming #Windows11 #BeshiloCodingAcademy

Uncategorized

TypeScript Setup Guide: Node.js, npm & Project Configuration

Unlock the full power of TypeScript by setting up your development environment like a pro. In this module, we go beyond basic installation to build a robust, professional workflow. You’ll learn how to configure Node.js, master the TypeScript compiler (tsc), and organize your project for maximum efficiency.

What you’ll master in this video:

* Complete installation of Node.js and npm for TypeScript
* Understanding the role of tsconfig.json in your project
* Setting up a professional project structure from scratch
* Compiling and running TypeScript files seamlessly
* Essential development tools for Windows, Mac, and Linux

Timestamps:

* **00:00** – Introduction to the TypeScript Workshop
* **00:20** – Core Tools: Node.js, npm & TypeScript
* **00:45** – Professional Project Organization
* **01:10** – Development Tools & OS Configuration
* **01:40** – Creating Your First Project Folder
* **02:17** – Installing Node.js (Step-by-Step)

#TypeScript #WebDevelopment #CodingTutorial #NodeJS #Programming #SoftwareEngineering #BeshiloCodingAcademy

Uncategorized

How to Create & Merge Pull Requests on GitHub (Full Tutorial)

You’ve pushed your code, but how do you get it into the final project? In this tutorial from **Beshilo Coding Academy**, we cover the “Pull Request” (PR) workflow—the standard for every professional software team.

Learn how to compare your feature branch with the main branch, create a detailed pull request, and merge it safely on GitHub. We also show you the most important final step: how to pull those remote changes back to your local machine so your environment is always up to date.

🚀 **What you’ll learn:**

* How to “Compare & Pull Request” after a branch push.
* The proper way to write PR titles and descriptions for your team.
* Reviewing code changes directly on GitHub.
* Merging the PR and deleting the feature branch like a pro.
* Using `git pull origin main` to sync your local project with the cloud.

**Subscribe to Beshilo Coding Academy to master professional coding workflows!** 🔔

—–

### **Timestamp Chapters**

* **0:00 – Locating the “Compare & Pull Request” Button**
* **0:15 – Writing a Professional Pull Request Title**
* **0:30 – Creating the PR & Checking for Merge Conflicts**
* **0:44 – The Admin View: Reviewing & Merging the Request**
* **1:02 – Confirming the Merge on GitHub**
* **1:18 – Verifying Merged Files in the Main Repository**
* **1:35 – Updating Your Local Machine with `git pull`**
* **1:58 – Final Sync: Confirming Everything is Up-to-Date**

—–

**Hashtags:**
#GitHub #PullRequest #GitTutorial #CodingWithTeams #BeshiloCodingAcademy #SoftwareDevelopment #Programming #WebDev #CodeReview

Uncategorized

How to Add Collaborators on GitHub (Step-by-Step Guide)

Working on a coding project with a friend or a team? You need to know how to share access! In this tutorial from **Beshilo Coding Academy**, we show you exactly how to add a collaborator to your GitHub repository so you can work together seamlessly.

We cover the entire process—from sending the invitation to accepting it via email—and even how to clone the repo from a second account. Stop emailing code back and forth and start using GitHub the professional way!

🚀 **What you’ll learn in this video:**

* Where to find the “Collaborators” setting in GitHub.
* How to verify your identity to grant access.
* The exact steps to invite someone by their username or email.
* How the collaborator accepts the invite via the GitHub Inbox or Email.
* Verifying access and cloning the project as a second developer.

**Don’t forget to SUBSCRIBE to Beshilo Coding Academy for more simplified coding tutorials!** 🔔

—–

### **Timestamp Chapters**

* **0:00 – Introduction to GitHub Collaboration**
* **0:15 – Navigating to Repository Settings**
* **0:33 – Finding the Collaborators Menu**
* **0:45 – Security Check: Verifying Your Email/Access**
* **1:01 – Inviting Your First Collaborator**
* **1:36 – How to Accept a GitHub Invitation (2 Ways)**
* **2:02 – Confirming Access & Removing Pending Status**
* **2:15 – Cloning the Shared Repo as a Second Developer**

**Hashtags:**
#GitHub #CodingCollaboration #GitTutorial #SoftwareDevelopment #BeshiloCodingAcademy #WebDev #ProgrammingTips #OpenSource

### ** Beshilo Coding Academy**

Since this video transitions from the “owner” view to the “collaborator” view, it’s a great piece of content to link in your other Git tutorials. If someone asks “How do I work with my friend?”, this is the perfect video to send them!

Uncategorized

How to Resolve Merge Conflicts on GitHub (The Easy Way)

Don’t panic when you see “This branch has conflicts that must be resolved”! In this tutorial from **Beshilo Coding Academy**, we simulate a real-world conflict where Developer 1 and Developer 2 both edit the `Home.js` file.

You’ll see exactly how GitHub detects these overlapping changes and walk through the step-by-step process of using the GitHub web editor to choose the right code, commit the resolution, and successfully merge your pull request.

🚀 **What you’ll learn:**

* **The Conflict Scenario:** Why and how merge conflicts occur in team projects.
* **Browser Authentication:** A quick refresher on authenticating your device for a secure push.
* **GitHub Conflict Resolver:** How to use the built-in tool to identify conflicting lines of code.
* **Manual Fixes:** Deciding which changes to keep and which to remove.
* **Finalizing the Merge:** Completing the merge once the conflict is resolved.

**Subscribe to Beshilo Coding Academy for more simplified coding tutorials!** 🔔

—–

### **Exact Timestamp Chapters**

* **0:00 – Introduction: The Developer 1 Perspective**
* **0:14 – Identifying Multiple Active Branches on GitHub**
* **0:34 – Simulating a Conflict: Editing Home.js in the Terminal**
* **1:01 – Pushing Changes & Browser Authentication Flow**
* **1:38 – Creating a Pull Request (PR) for the New Feature**
* **2:02 – ERROR: Detecting the Merge Conflict on GitHub**
* **2:14 – Step-by-Step: Using “Resolve Conflicts” Editor**
* **2:37 – Marking as Resolved & Completing the Merge**

#MergeConflict #GitHubTutorial #GitBash #CodingForBeginners #BeshiloCodingAcademy #WebDevelopment #ProgrammingTips #SoftwareEngineering #VersionControl

Scroll to Top