**Case in point**: While writing this article - _yes, this static, plaintext Markdown blog post_ - I had TypeScript yell at me and refuse to compile because of a nitpick about type declarations **in the bloody code snippet**! The irony is delicious. If you don't know what TypeScript is, just think of an annoying but well-intentioned side-kick who wants to help with everything and won't let you make any mistakes for your own good; a perfectionist who complains all the time, interrupts you frequently for no apparent reason, but when it **really** matters, TypeScript has got your back. In summary, JavaScript is your fun younger brother who gets you both killed in a stupid accident. TypeScript is your rigid parent who will ruin your fun but keep you safe. ## From VBA to JavaScript: The Beginning My programming journey started in the world of VBA (Visual Basic for Applications), where I built Excel macros. Emboldened by my early successes, I ventured into web development and learned the language of the web: JavaScript. VBA was... well, _basic_. It's a procedural language (a subtype of imperative languages), and it is used by many non-programmers for office work. That was my entry point. That was my first taste of writing scripts, and my first "hey, I can do this" feeling. \"Income\" And transactionType <> \"Expense\") Then\n MsgBox \"Invalid inputs. Please check.\"\n Exit Sub\n End If\n\n ' Find the next row\n lastRow = sheet.Cells(sheet.Rows.Count, \"A\").End(xlUp).Row + 1\n\n ' Add the transaction\n sheet.Cells(lastRow, 1).Value = amount\n sheet.Cells(lastRow, 2).Value = category\n sheet.Cells(lastRow, 3).Value = transactionType\n\n MsgBox \"Transaction added successfully!\"\nEnd Sub\n\nSub CalculateBalance()\n Dim sheet As Worksheet\n Dim lastRow As Long\n Dim balance As Double\n Dim i As Long\n\n Set sheet = ThisWorkbook.Sheets(\"Sheet1\")\n lastRow = sheet.Cells(sheet.Rows.Count, \"A\").End(xlUp).Row\n balance = 0\n\n ' Calculate balance\n For i = 2 To lastRow\n If sheet.Cells(i, 3).Value = \"Income\" Then\n balance = balance + sheet.Cells(i, 1).Value\n ElseIf sheet.Cells(i, 3).Value = \"Expense\" Then\n balance = balance - sheet.Cells(i, 1).Value\n End If\n Next i\n\n MsgBox \"Total Balance: \" & balance\nEnd Sub", label: "VBA", language: "vba" }]} copyButton /> But as time went on, I fell in love with this messy, weird, quirky but adorable language called JavaScript. {\n return transaction.type === \"Income\"\n ? balance + transaction.amount\n : balance - transaction.amount;\n }, 0);\n}\n\nfunction summarizeByCategory() {\n const summary = transactions.reduce((acc, transaction) => {\n acc[transaction.category] = (acc[transaction.category] || 0) + transaction.amount;\n return acc;\n }, {});\n return summary;\n}\n\nfunction updateUI() {\n // Update balance\n balanceDisplay.textContent = `$${calculateBalance().toFixed(2)}`;\n\n // Update transactions list\n transactionsList.innerHTML = transactions\n .map((t, index) => `\n

\n ${t.type}: $${t.amount} (${t.category})\n

\n `)\n .join(\"\");\n\n // Update summary\n const summary = summarizeByCategory();\n summaryDisplay.textContent = JSON.stringify(summary, null, 2);\n}\n\n// Event Listeners\naddButton.addEventListener(\"click\", () => {\n const amount = parseFloat(amountInput.value);\n const category = categoryInput.value;\n const type = typeSelect.value;\n\n addTransaction(amount, category, type);\n\n // Reset inputs\n amountInput.value = \"\";\n categoryInput.value = \"\";\n});\n\n// Initial UI update\nupdateUI();", label: "JavaScript", language: "js" }]} copyButton /> That same nice clean code would instead become this monstrosity in TypeScript: \n transaction.type === \"Income\" \n ? balance + transaction.amount \n : balance - transaction.amount,\n 0\n );\n}\n\nfunction summarizeByCategory(): Record {\n return transactions.reduce((summary, transaction) => {\n summary[transaction.category] = (summary[transaction.category] || 0) + transaction.amount;\n return summary;\n }, {} as Record);\n}\n\nfunction updateUI(): void {\n // Update balance\n balanceDisplay.textContent = `$${calculateBalance().toFixed(2)}`;\n\n // Update transactions list\n transactionsList.innerHTML = transactions\n .map((transaction, index) => `\n

\n ${transaction.type}: $${transaction.amount} (${transaction.category})\n

\n `)\n .join(\"\");\n\n // Update summary\n const summary = summarizeByCategory();\n summaryDisplay.textContent = JSON.stringify(summary, null, 2);\n}\n\n// Event Listeners\naddButton.addEventListener(\"click\", () => {\n const amount = parseFloat(amountInput.value);\n const category = categoryInput.value;\n const type = typeSelect.value as \"Income\" | \"Expense\";\n\n addTransaction(amount, category, type);\n\n // Reset inputs\n amountInput.value = \"\";\n categoryInput.value = \"\";\n});\n\n// Initial UI update\nupdateUI();", label: "TypeScript", language: "ts" }]} copyButton /> Of course, my journey led me into React, an awesome way to actually utilize JavaScript. Gone was the separation between HTML and JS. Now I could develop the entire UI without juggling between the DOM and the scripts; I could write declarative JSX scripts with reusable, reactive components; this was pure joy.
And so this became: {\n setTransactions([...transactions, { \n amount: parseFloat(amount), \n category, \n type \n }]);\n setAmount(\"\");\n setCategory(\"\");\n };\n\n const calculateBalance = () =>\n transactions.reduce((balance, t) => (t.type === \"Income\" ? balance + t.amount : balance - t.amount), 0);\n\n const summarizeByCategory = () =>\n transactions.reduce((summary, t) => {\n summary[t.category] = (summary[t.category] || 0) + t.amount;\n return summary;\n }, {});\n\n return (\n

Finance Tracker

\n setAmount(e.target.value)}\n placeholder=\"Amount\"\n />\n setCategory(e.target.value)}\n placeholder=\"Category\"\n />\n \n \n\n

Transactions

\n {t.type}: ${t.amount} ({t.category})\n

\n\n

Balance: ${calculateBalance()}

Summary

{JSON.stringify(summarizeByCategory(), null, 2)}

\n );\n}\n\n", label: "JavaScript (React JSX)", language: "jsx" }]} copyButton /> And then, the final form. From JSX to TSX. I am having mixed but powerful emotions just writing this; it's not fun by any stretch of the imagination, but deep down I know that it's the right way. I also know that now everything takes an eternity to build - but that's just an illusion. In reality, those bugs were always there. The only change is that I need to fix them before I even prototype my app. Otherwise I would be chasing weird hard to reproduce bugs after finishing everything. In my opinion, it complains about things that aren't really a problem, and it's way too verbose and strict -- but it works. Now there's no more praying, no more anxiety from what might break because undefined isn't a function or [object Object] or other coercion shenanigans. ({ initialTransactions = [] }) {\n const [transactions, setTransactions] = useState(initialTransactions);\n const [amount, setAmount] = useState(\"\");\n const [category, setCategory] = useState(\"\");\n const [type, setType] = useState<\"Income\" | \"Expense\">(\"Income\");\n\n const addTransaction = () => {\n setTransactions([...transactions, { \n amount: parseFloat(amount), \n category, \n type \n }]);\n setAmount(\"\");\n setCategory(\"\");\n };\n\n const calculateBalance = (): number => {\n return transactions.reduce((balance, transaction) => \n transaction.type === \"Income\" \n ? balance + transaction.amount \n : balance - transaction.amount, \n 0\n );\n };\n\n const summarizeByCategory = (): Record => {\n return transactions.reduce((summary, transaction) => {\n summary[transaction.category] = (summary[transaction.category] || 0) + transaction.amount;\n return summary;\n }, {} as Record);\n };\n\n return (\n

Finance Tracker

\n setAmount(e.target.value)}\n placeholder=\"Amount\"\n />\n setCategory(e.target.value)}\n placeholder=\"Category\"\n />\n \n \n\n

Transactions

\n {transaction.type}: ${transaction.amount} ({transaction.category})\n

\n\n

Balance: ${calculateBalance()}

Summary

{JSON.stringify(summarizeByCategory(), null, 2)}

\n );\n};\n\n", label: "TypeScript (React TSX)", language: "tsx" }]} copyButton /> ## The Benefits I've Discovered ### 1. **Catch Errors Before They Happen** The very feature I initially resisted—static typing—became my favorite debugging tool. TypeScript's ability to catch potential issues before runtime has saved countless hours of troubleshooting. ### 2. **Better IDE Support** The intellisense provided by TypeScript transforms code editors into powerful development allies. Auto-completion and inline documentation have significantly improved my coding efficiency. ### 3. **Self-Documenting Code** Type definitions serve as living documentation. Understanding how to use functions and objects becomes more straightforward, making collaboration with other developers smoother. ### 4. **Confident Refactoring** With TypeScript, refactoring code feels less like walking through a minefield. The compiler ensures that changes are consistent across the codebase. ## The Ongoing Struggles Despite these benefits, my relationship with TypeScript isn't always smooth sailing. Some challenges persist: - **Type Definition Complexity**: Sometimes, defining types for complex objects or functions feels like solving a puzzle. - **Generic Types**: Understanding and implementing generic types still requires careful thought and occasional documentation diving. - **Configuration Overwhelm**: Managing tsconfig.json options and understanding their implications can be daunting. ## Taking the Leap: Building This Website The website you're reading right now represents a significant milestone in my TypeScript journey. Built entirely with TypeScript, it embodies both my growing confidence and ongoing learning process. Each component, each utility function, carries type definitions that make the code more robust and maintainable. ## Looking Forward While I still occasionally long for the simplicity of vanilla JavaScript, I've come to appreciate TypeScript as a powerful ally in building better applications. The journey from resistance to acceptance has taught me that sometimes, the tools that challenge us the most also help us grow the most as developers. As I continue to learn and build, I'm excited to discover more TypeScript features and best practices. The red squiggly lines are no longer my enemies—they're guardians helping me write better, more maintainable code. In a way, I've become the old man who values safety, predictability and consistency. I've been domesticated into this marriage with TypeScript, traded youthful exuberance for maturity. Sometimes you just want to grab a drink with the boys, let 1 + '1' be '11' and wake up in a ditch. But you know you probably shouldn't, and daddy TS will be here to remind you of that. I knew that I would eventually need to get serious, and do what I had to do for my own good. In fact, for this website, I made a triple leap of faith: I was working in Next.js' App router, writing TSX and SCSS while all my previous apps were built with Pages router, JS and Tailwind, not to mention the first time using Once UI. But my perseverance is testament to both my ability to learn, and to my perseverance in the face of adversity, and I think that is the true virtue that this project demonstrates, more than any CV could hope to.