Petar Ivanov’s Post

𝗧𝘆𝗽𝗲𝘀𝗰𝗿𝗶𝗽𝘁 𝟲.𝟬 𝗙𝗶𝘅𝗲𝘀 𝗥𝗲𝗮𝗹 𝗣𝗮𝗶𝗻 𝗣𝗼𝗶𝗻𝘁𝘀 TypeScript 6.0 solves everyday problems. It makes your code safer and your builds faster. Here is what matters for 2026. **Method syntax now works as you expect.** Before, TypeScript guessed wrong when you used a method instead of an arrow function. Now it checks if "this" is used. Both work the same. ```typescript callIt({ consume(y) { return y.toFixed(); }, // ✅ y is number now }); ``` **Clean imports with #/ prefixes are official.** Stop writing messy relative paths like "../../../utils". Use the Node.js subpath imports feature. ```typescript import * as utils from "#/utils.js"; ``` This matches bundlers like Webpack. Your imports become readable. **Your type unions will now be in a fixed order.** TypeScript 7.0 will check types in parallel. That can randomize union order like `100 | 500`. Use the new `--stableTypeOrdering` flag now to get consistent order. This keeps your compiled files clean. Note: it can slow builds by 25%. **The Temporal API has types.** Say goodbye to JavaScript Date bugs. Use the modern Temporal API for time zones and durations. ```typescript const meeting = Temporal.Instant.from("2026-04-06T10:00:00Z"); const local = meeting.toZonedDateTimeISO("America/Toronto"); ``` **Maps get two helpful new methods.** Replace manual `if (has) get() else set()` logic. ```typescript const timeout = config.getOrInsert("timeout", 5000); const value = config.getOrInsertComputed("key", () => compute()); ``` **Safely build regex from user text.** No more manual escaping bugs. Use the new built-in escape. ```typescript const safe = RegExp.escape(userInput); const regex = new RegExp(safe, "gi"); ``` **Breaking changes you must handle.** Your tsconfig.json defaults have changed. - `strict` is now true. You must list needed types. - `module` defaults to `esnext`. - `target` floats to `es2025`. - `types` defaults to an empty array. **Your migration steps:** Short-term: - Add an explicit `"types": ["node", "jest"]` array in tsconfig. - Set `"rootDir": "./src"` if your source folder is not the project root. - Remove deprecated `baseUrl` path mapping. Use full paths in `paths`. Medium-term: - Move off `target: "es5"`. Use at least ES2015. - Change `--moduleResolution node` to `nodenext` or `bundler`. - Migrate from `amd/umd/system` modules to ESM. Long-term: - Test your build with `--stableTypeOrdering`. - Plan for TypeScript 7.0's parallel checking. - Consider parallel CI builds to offset any speed changes. TypeScript 6.0 is a bridge. It cleans up old defaults and adds features for faster, more predictable future versions. The migration is clear. What feature will you try first? Source: https://lnkd.in/gu9jP4tb

Do you ever know exactly what type a dynamic object is, but TypeScript won’t trust you? 🤔Here is #Day 21of #TypescriptBeforeAngular with SANDEEP KUMAR(#IAM5K): Type Assertions (as) (The "Manual Override") Like when you are accessing a standard DOM element (ViewChild) in Angular, and TypeScript only sees it as a generic Element, so it won’t let you use the .value or .focus() properties. If you are just using any to "silence" these errors, you are disabling your safety net and creating a massive bug trap. When you are certain about a type that the compiler cannot know yet, you need the authorized manual override: Type Assertions (as). 1️⃣ What is a Type Assertion? Sometimes, based on the context, you know more about the shape of a value than #TypeScript can ever determine. Think of a Type Assertion as a "Trust Badge" or a "Manual Override Key" that you present to the compiler. You use the as keyword to tell TypeScript: "I promise you, I know exactly what I'm doing. From this line onward, please treat this generic bucket as this specific, detailed type." // --- ☠️ The DANGEROUS way (any) --- const myElementAny: any = document.getElementById('user-email'); // No help here. If 'myElementAny' is actually null, this crashes later: console.log(myElementAny.value); // --- 🟢 The SAFE way (assertion) --- const myInput = document.getElementById('user-email') as HTMLInputElement; // Now TypeScript knows this bucket has specific input powers: myInput.value = 'hello@example.com'; // ✅ Perfect autocomplete! 2️⃣ Significance in Angular: In modern Angular (especially for state management and DOM interaction), Type Assertions are essential when you are dealing with dynamic sources, like: DOM Elements: Working with document.getElementById or ViewChild. You are sure it’s an <input>, but TS only knows it is a generic Element. API Data: Data arriving from a legacy service or a third-party library that isn’t typed yet. By using as, you are being proactive and maintaining your type safety rather than just silencing the compiler with any. It is about building components that are not just typed, but truly truly safe. 💡 Beginner Tip: Think of as as an authorization override, but use it sparingly! If you are asserting types everywhere, it is a big warning sign that your underlying data models are incomplete and need more work. Assert only when you have 100% certainty from external knowledge (like knowing you own the DOM)! 👉 Do you use Type Assertions (as) most often for DOM elements, generic API data, or external library data? Let me know👇 Connect /Follow me (SANDEEP KUMAR) so you dont miss the next one #WebDev #CodingTips #NewDeveloper #Beginner #CleanCode #TypeAssertion #DOMManipulation #PredictableState #TypeSafety #Javascript #BTech

🚀 JavaScript Simplified Series — Day 38 You type in a search bar… And API call starts firing on **every single keystroke** 😵 👉 Type “A” → API call 👉 Type “Ab” → API call 👉 Type “Abh” → API call Server overload 💥 App slow 😓 --- ## 🔥 Problem → Too many function calls --- ## 🔥 Solution → Debounce --- ## 🔹 What is Debouncing? Debouncing means: 👉 **Delay execution** 👉 Until user stops typing --- ## 🔹 Example ```javascript id="db1" function debounce(fn, delay) { let timer return function(...args) { clearTimeout(timer) timer = setTimeout(() => { fn(...args) }, delay) } } ``` --- ## 🔹 Usage ```javascript id="db2" function search(query) { console.log("Searching for:", query) } let debouncedSearch = debounce(search, 500) // call this on input event debouncedSearch("Abhay") ``` 👉 Only runs after user stops typing --- ## 🔍 What’s happening? 👉 Every new call clears previous timer 👉 Only last call executes --- ## 🔥 Real Life Example Think of a **remote button 📺** 👉 You press multiple times 👉 TV reacts only after you stop --- ## 🔥 Where is Debounce used? 👉 Search bars 🔍 👉 Resize events 👉 Input fields 👉 API calls --- ## 🔥 Simple Summary Debounce → delay execution Avoid → unnecessary calls Improve → performance --- ### 💡 Programming Rule **Don’t run code on every action. Run it at the right time.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototypes Day 35 → Classes Day 36 → Inheritance Day 37 → Modules Day 38 → Debounce Day 39 → Throttle (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 37 Till now… you’ve written all your JavaScript in one file 😵 👉 Everything mixed together 👉 Hard to manage 👉 Hard to scale What if you could **split your code into multiple files** and still use them together? 🤔 --- ## 🔥 Solution → Modules --- ## 🔹 What are Modules? Modules allow you to: 👉 Break code into **separate files** 👉 Reuse code easily 👉 Keep code clean & organized --- ## 🔹 Exporting Code ```javascript id="md1" // math.js export function add(a, b) { return a + b } ``` 👉 `export` makes function available outside --- ## 🔹 Importing Code ```javascript id="md2" // main.js import { add } from "./math.js" console.log(add(5, 3)) ``` 👉 Output: 8 --- ## 🔹 Default Export ```javascript id="md3" // user.js export default function greet() { console.log("Hello") } ``` Import: ```javascript id="md4" import greet from "./user.js" ``` --- ## 🔥 Real Life Example Think of a big project 🏢 👉 One file → login 👉 One file → dashboard 👉 One file → API All connected… but separate --- ## 🔥 Why Modules Matter? ✅ Clean code ✅ Reusable logic ✅ Easy to maintain ✅ Scalable projects --- ## 🔥 Simple Summary export → share code import → use code modules → organize code --- ### 💡 Programming Rule **Divide your code. Organize it. Scale it.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototypes Day 35 → Classes Day 36 → Inheritance Day 37 → Modules Day 38 → Debounce (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

⚡ 𝗦𝗮𝗺𝗲 `...` 𝗦𝘆𝗻𝘁𝗮𝘅, 𝗧𝗼𝘁𝗮𝗹𝗹𝘆 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗕𝗲𝗵𝗮𝘃𝗶𝗼𝗿 ⤵️  Spread vs Rest Operators in JavaScript 🧠  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/drV-7dZa  𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ Spread vs Rest — simple mental model   ⇢ Expanding arrays & objects using spread   ⇢ Collecting values using rest parameters   ⇢ Key differences based on context   ⇢ Real-world use cases (merge, clone, functions)   ⇢ Common mistakes developers make   ⇢ Tradeoffs: shallow copy & performance  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Programming #Frontend #CleanCode #Hashnode

#SoftwareEngineer_Not_Code_Monkey I was recently revisiting some concepts that used to trip me up in JavaScript: Array Manipulation. Sometimes, the best way to master a concept is to lay them all out, look them in the eye, and have a little "chat" with the code. Yes, I talk to my code—and you should too! Let’s break down the "Internal Dialogue" of a Senior Developer when handling arrays: .map() — The Transformer The Conversation: "Take this array, visit every single element, and give me a new array with the modifications I asked for. Same length, fresh look." Use Case: Formatting currency or wrapping data in UI components. JavaScript const prices = [10, 20, 30]; const formattedPrices = prices.map(price => `$${price}.00`); // Result: ["$10.00", "$20.00", "$30.00"] .filter() — The Gatekeeper The Conversation: "I’ve got a condition. Check every item; if they pass, they join the new array. If they fail? They’re out." Use Case: Removing "Out of Stock" items or finding "Admin" users. .reduce() — The Grinder The Conversation: "Take the whole list, start with this 'bag' (Accumulator) set to 0, and squash everything down into one single value." Use Case: Calculating a shopping cart total or flattening nested data. JavaScript const cart = [100, 200, 300]; const total = cart.reduce((acc, price) => acc + price, 0); // Result: 600 .find() — The Scout The Conversation: "Go find me the first person named 'Ashraf'. Once you find him, stop looking and bring him back to me—not a list, just the man himself." const students = ["Ahmed", "Ashraf", "Sara"]; const winner = students.find(s => s === "Ashraf"); // Result: "Ashraf" .forEach() — The Blue-Collar Worker The Conversation: "Don't give me a new array. Just loop through and do something—log it, send it to an API, or trigger an alert." const tasks = ["Task 1", "Task 2"]; tasks.forEach(task => console.log(`Processing: ${task}`)); .some() & .every() — The Inspectors .some(): "Is there at least one rebel in this list? If yes, give me a true." .every(): "Is everyone following the rules? If even one person fails, give me a false." The Engineer's Takeaway: Immutability Except for forEach and sort, these methods respect the Immutability principle. We don't touch the original array—it’s a "Red Line." We create new versions. This keeps your state predictable and your bugs minimal, especially as your project scales from a simple script to a full-blown freelance system. Stop just "writing code." Start engineering solutions. Which Array method was your "final boss" when you started? #Programming #SoftwareEngineering #JavaScript #CleanCode #WebDevelopment #Frontend #TechCommunity #ReactJS #NodeJS #Freelancing

TypeScript 6.0 is here, and it's more than just another version bump. This release fundamentally changes how we think about type safety and performance in JavaScript development for 2026. Here are the key advanced features that will impact your codebase: 🧠 **Context-Aware Type Inference** Method syntax now works identically to arrow functions. TypeScript 6.0 checks if `this` is actually used before marking a function as "contextually sensitive," eliminating a major pain point in generic function calls. 🗺️ **#/ Subpath Imports** No more relative path hell. TypeScript now supports `#/` prefix for subpath imports, matching bundler conventions and cleaning up import statements across your codebase. ⚖️ **Stable Type Ordering** The new `--stableTypeOrdering` flag ensures deterministic type unions, eliminating noise when comparing compiler outputs. This prepares us for TypeScript 7.0's parallel type checking. ⏰ **Temporal API Types** Built-in types for the Temporal API are now included. Say goodbye to Date object headaches with proper timezone awareness, immutability, and a clean API. 🗺️ **Map Upsert Methods** `getOrInsert()` and `getOrInsertComputed()` eliminate the verbose "check-if-exists-then-set" pattern for Maps, reducing boilerplate and potential errors. 🛡️ **RegExp.escape()** Safer regex construction from user input with built-in escaping, preventing regex injection vulnerabilities. 🚨 Breaking Changes Alert TypeScript 6.0 introduces significant defaults changes: - `strict: true` by default - `module: esnext` by default - `types: []` by default (explicit is better!) - `target: es5` is deprecated These changes prepare us for TypeScript 7.0's native port and performance improvements. The migration requires attention but sets the stage for faster builds and more reliable type checking. TypeScript continues to evolve from a type checker into a comprehensive development platform. Full deep dive with code examples: https://lnkd.in/eBGiPbkE What TypeScript 6.0 feature are you most excited about? Share your thoughts below! #TypeScript #JavaScript #WebDevelopment #Programming #TypeScript6 #SoftwareEngineering #DeveloperTools #2026Tech

🚀 JavaScript Simplified Series — Day 36 You created a class… Now imagine 👇 You want another class with: 👉 Same properties 👉 Same methods 👉 Plus some extra features Will you rewrite everything again? ❌ That’s inefficient 😵 --- ## 🔥 Solution → Inheritance --- ## 🔹 What is Inheritance? Inheritance allows one class to: 👉 **Reuse properties & methods of another class** --- ## 🔹 Example ```javascript id="inh1" class User { constructor(name) { this.name = name } greet() { console.log("Hello " + this.name) } } class Admin extends User { deleteUser() { console.log("User deleted") } } let admin = new Admin("Abhay") admin.greet() admin.deleteUser() ``` 👉 Output: Hello Abhay User deleted --- ## 🔍 What’s happening? 👉 `Admin` inherited from `User` 👉 So it gets `greet()` automatically 👉 Plus its own method --- ## 🔹 super keyword ```javascript id="inh2" class Admin extends User { constructor(name, role) { super(name) this.role = role } } ``` 👉 `super()` calls parent constructor --- ## 🔥 Real Life Example Think of a **family 👨👩👧** 👉 Parent → basic traits 👉 Child → inherits + adds new traits --- ## 🔥 Simple Summary extends → inheritance super → parent constructor Reuse → no duplication --- ### 💡 Programming Rule **Don’t rewrite code. Reuse it with inheritance.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototypes Day 35 → Classes Day 36 → Inheritance Day 37 → Modules (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

Day 1/100 of Javascript Today Topic : Javascript Engine JS code is first tokenized and parsed into an AST (Abstract Syntax Tree). The interpreter converts this into bytecode and begins execution. While running, the engine identifies hot code and uses a JIT compiler to optimize it into machine code for better performance. 1. What is Tokenizing? Tokenizing = breaking your code into small meaningful pieces (tokens) After tokenizing: Code Part Token Type let keyword x identifier = operator 10 literal ; punctuation 2. What Happens After Tokenizing? Tokens → Parsing Parser converts tokens into: 👉 AST (Abstract Syntax Tree) Example (conceptually): VariableDeclaration ├── Identifier: x └── Literal: 10 3. Why JavaScript is JIT Compiled? JS is called JIT (Just-In-Time) compiled because: 👉 It compiles code during execution, not before. ⚙️ Flow Code → Tokens → AST → Bytecode → Execution → Optimization → Machine Code 🔥 Step-by-Step 1. Interpreter Phase AST → Bytecode Starts execution immediately 👉 Fast start, but not the fastest execution 2. Profiling Engine watches: Which code runs frequently (hot code) 3. JIT Compilation Hot code → compiled into optimized machine code 👉 Now it runs much faster Also looked at different JavaScript engines: 👉V8 (Google) → Uses Ignition (interpreter) + TurboFan (optimizer), heavily optimized for performance 👉SpiderMonkey (Mozilla) → Uses Interpreter + Baseline + IonMonkey (JIT tiers) 👉Chakra (Microsoft) → Has its own JIT pipeline with profiling and optimization stages Each engine has a different internal architecture, but all follow the same core idea. Reference : 1. https://lnkd.in/gvCjZRJK 2. https://lnkd.in/gwcWp-dE 3. https://lnkd.in/gWGiNJZk. 4. https://lnkd.in/g7D4MiQ8 #Day1 #JavaScript #100DaysOfCode