🛑 Stop making all your TypeScript interface properties optional. If you use TypeScript, you have probably been tempted to just slap a ? on a property to make the compiler stop yelling at you. id?: string; name?: string; We do this because a User in the database has an id, but a User being submitted in a registration form doesn't have an id yet. So we make it optional to share the same interface. This is a massive trap. 🪤 When you make properties optional, you are destroying your type safety. You will spend the rest of your app writing defensive code: if (user.id !== undefined) { ... }. The Fix: Strict Base Interfaces + Utility Types. ✨ Define your core interface as the absolute, strict truth (no optional fields unless they are truly optional). Then, let TypeScript do the heavy lifting using Omit and Pick. Why this wins: ✅ Zero Guesswork: If a function requires a UserCardProps, you know with 100% certainty that name and email will be there. No undefined checks needed. ✅ Single Source of Truth: If you add a new required property to your base User, your derived utility types automatically inherit it. ✅ Self-Documenting: Reading Omit<User, 'id'> instantly tells the next developer exactly what this object is meant for. Stop fighting the TypeScript compiler. Let Utility Types do the work for you. 🧠 Are you using Pick and Omit, or are you still living in the Optional wild west? 👇 #TypeScript #JavaScript #WebDevelopment #Frontend #ReactJS #CleanCode #SoftwareEngineering
TypeScript: Avoid Optional Properties with Strict Interfaces
More Relevant Posts
-
Have you ever wondered what actually happens behind the scenes when you run 𝘯𝘰𝘥𝘦 𝘧𝘪𝘭𝘦𝘯𝘢𝘮𝘦.𝘫𝘴? I recently dived deep into Node.js internals as part of an assignment, and I’m excited to share two detailed blog posts that break it all down — from the core architecture to the exact execution flow. Blog 1: A Gentle Introduction to the Foundation of Node.js Architecture where I explained the three pillars that power everything: V8, LibUV, and the C++ Bindings. Read here: https://lnkd.in/gQcuwZMG Blog 2: Deep Dive into Node.js Architecture and Internal Workings This one walks you through, step by step, exactly what happens when you execute a JavaScript file with the node command. Read here: https://lnkd.in/gjqWb2sX I couldn’t get the video version ready on time (researching + writing these took priority, and my recording setup wasn’t prepared). But I will try to record + share the video! If you’re a developer who wants to truly understand what’s happening under the hood of Node.js, these are for you. Would love to hear your thoughts — have you explored V8 or LibUV before? Drop a comment below! Hitesh Choudhary Piyush Garg Akash Kadlag Anirudh J. Suraj Kumar Jha Chai Aur Code Jay Kadlag #Chaicode #Cohort #NodeJS #JavaScript #BackendDevelopment #WebDevelopment #NodeArchitecture #Programming #DevCommunity
To view or add a comment, sign in
-
-
🚀JavaScript is single-threaded… yet Node.js handles thousands of concurrent requests. How? JavaScript is single-threaded. So how does Node.js handle thousands of asynchronous operations like file reads, database calls, timers, and network requests without blocking the application? While learning Node.js internals, I tried to break this down with a simple architecture diagram. JavaScript runs inside the V8 engine and executes code line by line using a single call stack. This means only one piece of JavaScript code runs at a time. But when operations like reading a file, making an API request, or starting a timer happen, Node.js doesn't block the main thread waiting for the result. Instead, these operations are delegated to another layer that interacts with the operating system and manages asynchronous tasks. Once the operation finishes, the result is placed in a queue and executed when the call stack becomes free. This is what makes Node.js capable of handling many concurrent operations efficiently. I drew the architecture to understand the flow: JavaScript (Call Stack) → Node.js APIs → Async I/O Layer → Operating System → Event Loop → Callback Execution Two questions for backend developers: 1: What library powers asynchronous I/O and the event loop in Node.js? 2: Which programming languages are used to build the V8 engine, Node.js runtime, and the async I/O layer behind it? Drop your answers in the comments. #NodeJS #JavaScript #BackendDevelopment #AsyncProgramming #EventLoop #WebDevelopment #Libuv #react #mern
To view or add a comment, sign in
-
-
Most backend projects fail not because of bad code — but because of bad structure. Here's the complete production-ready folder structure for Express.js and NestJS — the two most used Node.js frameworks in 2025-2026. 👇 Express.js gives you freedom — but without structure, that freedom becomes chaos. NestJS enforces clean architecture by default — modules, guards, interceptors, pipes — everything in its place. The difference between a codebase that scales and one that breaks at 10k users? It's in the folders. Layered Clean Architecture Repositories for DB abstraction Validators, Events & Jobs separated Tests, Logs, Docker — all included 9+ core layers | 50% less tech debt | 4x faster to scale Save this post. You'll need it on your next project. What framework are you using in production right now — Express or NestJS? Drop it in the comments #NestJS #ExpressJS #NodeJS #BackendDevelopment #SoftwareArchitecture #CleanCode #JavaScript #TypeScript #WebDevelopment #Programming #TechCommunity #SoftwareEngineering #API
To view or add a comment, sign in
-
-
What if I told you that you don’t need to manually optimize your React code anymore? Cuz React compiler does it for you. What it does is simple. It automatically memoizes your components. The compiler looks at your code, figures out which values actually change between renders and which ones stay the same, and then reuses the stable ones instead of recomputing them every time. But do you know how it actually does that magic under the hood??? Soo..During the build step, the compiler analyzes your component and builds a dependency map of variables, props, and computations. It understands what depends on what. Once it knows that, it can safely cache parts of your component and skip work when nothing relevant changed. So the optimizations we used to write manually with useMemo() or React.memo now get inserted automatically. If you wanna try it in your project, it’s actually pretty easy. Install the compiler plugin: ☘️ npm install babel-plugin-react-compiler Then add it to your Babel config: ☘️ plugins: ["babel-plugin-react-compiler"] That’s it... Write normal React. The compiler quietly optimizes things during the build Follow Sakshi Jaiswal ✨ for more quality content ;) #Frontend #React #Sakshi_Jaiswal #FullstackDevelopment #javascript #TechTips #ServerComponents #UseMemo #UseCallback
To view or add a comment, sign in
-
-
For years, JavaScript only ran in the browser. Then Node.js changed everything. 🚀 Suddenly JavaScript could run on the server — and the entire web development game shifted. Here's why Node.js + Express is such a powerful combo for backend devs: ⚡ Non-blocking I/O — handles thousands of simultaneous requests without choking 🛣️ Express routing — map a URL to a function in literally 2 lines of code 📦 npm ecosystem — 2 million+ packages ready to install 🔗 One language everywhere — JavaScript on frontend AND backend I picked it up while building ShopNest alongside Flask — and the two complement each other really well for a dual-backend architecture. Flask for Python-heavy logic. Express for fast, scalable API endpoints. Are you a Flask dev, an Express dev — or both? 👇 #NodeJS #ExpressJS #JavaScript #BackendDevelopment #WebDevelopment #PythonDeveloper #FullStackDev #LearnToCode #BuildInPublic #TechStudent #100DaysOfCode #Programming #IndianDeveloper #SoftwareDevelopment
To view or add a comment, sign in
-
-
I just went down a rabbit hole on React Compiler and honestly… why isn’t everyone talking about this? 🤯 For years, we’ve been writing code like this: const filtered = useMemo(() => items.filter(i => i.type === filter), [items, filter]); const handleClick = useCallback(() => doSomething(), []); const MyComp = React.memo(({ data }) => {data}); And we called it “best practice.” But let’s be honest — it’s mostly boilerplate. It clutters your code, it’s easy to get wrong, and a stale dependency array has burned every React dev at least once. 🚀 React Compiler changes the game. Instead of manually telling React what’s stable, the compiler figures it out at build time by analyzing your data flow. You write this: function ProductList({ items, filter }) { const filtered = items.filter(i => i.type === filter); return ; } And the compiler automatically generates the optimized version: ✔️ Memoization handled ✔️ Dependencies always correct ✔️ No human error ⚠️ The catch? Your code must follow the Rules of React: → No mutating props or state → No conditional hooks → Pure render functions If you break the rules, the compiler simply skips that component — fail-safe by design. 💡 The best part? No new APIs. No new mental model. Just React… but smarter. It’s essentially a Babel plugin you can enable today: // Next.js experimental: { reactCompiler: true } This might be one of the biggest DX improvements React has shipped in years — fewer bugs, cleaner code, and more predictable performance. Still experimental, but very promising. Have you tried it yet? Curious if it actually reduced your need for useMemo/useCallback 👇 #React #ReactJS #Frontend #WebDevelopment #JavaScript #nextjs
To view or add a comment, sign in
-
Most React tutorials are still teaching 2020 patterns. In 2026, the ecosystem has shifted dramatically: React 19 is stable, the compiler handles most memoization automatically, and useEffect should be a last resort — not your go-to for data fetching, derived state, or event responses. This guide walks you from project setup to production-ready patterns, with a cheat sheet you can bookmark. #react #web #frontend #next #frontend #performance #javascript #tips #typescript #nextjs
To view or add a comment, sign in
-
🚀 𝐓𝐨𝐝𝐚𝐲 𝐈 𝐞𝐱𝐩𝐥𝐨𝐫𝐞𝐝 𝐚 𝐭𝐨𝐩𝐢𝐜 𝐭𝐡𝐚𝐭 𝐦𝐚𝐧𝐲 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐨𝐟𝐭𝐞𝐧 𝐨𝐯𝐞𝐫𝐥𝐨𝐨𝐤 ...(if you genuinely learn something new ......just comment down💬..... new) the difference between dependencies and devDependencies in package.json.( for c++, gcc compiler vs fancy IDE) understand the difference, we first need to understand package.json. package.json is the main configuration file of a JavaScript project built with React or Node.js. 📁 package.json. 📦 This file stores important information about the project such as project metadata, libraries used in the project, and commands required to run the application. Inside this file there are different sections, and one of them is dependencies. ✅ Dependencies Dependencies are the packages or libraries that are required for the application to run. For example, if you are building a project using React, the React package must be defined inside the dependencies section of the package.json file. Without these packages, the application cannot run properly. ✅ DevDependencies On the other hand, devDependencies are packages that are used only during development. They help developers write or check code but are not required to run the application in production. Examples include tools like: ESLint for checking errors Prettier for formatting code #120days #react #nodejs #js #developer
To view or add a comment, sign in
-
-
I noticed most Node.js logging solutions are either too heavy or too minimal. So I built my own — logpaint 🎨 A lightweight, zero-dependency colored logger with built-in levels and TypeScript support. Instead of adding another heavy logging library, I wanted something: • Minimal • Zero config • Typed • Colorful output • Runtime level switching 💻 Website - https://lnkd.in/gp3HgeBX 🔴 NPM - https://lnkd.in/gNuSPXd4 ♐ GitHub - https://lnkd.in/gVXkyu-P Would love feedback from fellow developers 🙌 What feature should I add next? #opensource #nodejs #typescript #javascript #buildinpublic #developers #webdev #programming
To view or add a comment, sign in
-
-
TypeScript's most powerful keyword that nobody understands. infer You've seen it in utility types. You've copy-pasted code that uses it. You've never fully understood what it does. It's simpler than you think: infer captures a type into a variable. Read it like this: type ArrayItem<T> = T extends (infer U)[] ? U : never "If T is an array of something, capture that something as U, then return U." That's it. Pattern matching for types. How to read any infer type: 1. Look at extends → that's the pattern 2. Find infer X → that's what gets captured 3. Look after ? → that's what you get back Real use cases: → Get item type from an array type Item = ArrayItem<User[]> // User → Get resolved value from Promise type Data = Unpromise<Promise<string>> // string → Get props from a React component type Props = ComponentProps<typeof Button> → Get return type from function type Result = ReturnType<typeof fetchUser> That last one? ReturnType is just infer under the hood: type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never You've been using infer this whole time. Now you know how to write your own. #typescript #javascript #frontend #webdev #programming #webdevelopment #react #types #cleancode #devtips
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development
Pro Tip: Is there ever a good time to make everything optional? Yes! If you are building a PATCH endpoint for updating a user, you can use the built-in Partial<User> utility type. It automatically makes every property from your strict base interface optional, but only for that specific update payload. It's magic. 🪄