Embrace Simplicity: TypeScript Without Bundlers!

Photo by Ehud Neuhaus

Why Wave Goodbye to Bundlers?

Bundlers are like kitchen gadgets. They're great until you have to clean them. They can pack a punch in handling assets, optimizing code, and managing dependencies, but sometimes, you just want a sandwich without setting up the food processor. By waving goodbye to bundlers, you're looking at:

• Simpler project setup - Create a file, write code, and smile.
• Faster build times - Less time watching loading bars creep across your screen like a stubborn snail.
• Easier debugging - Ever try to find a needle in a haystack? That's what debugging transpiled and bundled code feels like.

Modular TypeScript: The Basics

Before you ditch your bundler, it's important to understand how TypeScript handles modules. TypeScript follows the ES6 module system, so you'll be using import and export statements to share code between files.

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// calculator.ts
import { add } from './math';

console.log(add(2, 3)); // Outputs: 5

Above is an example of modular code without the use of bundlers or loaders.

Working with the TypeScript Compiler (tsc)

The TypeScript compiler (tsc) is your new best friend 🤖. It's not high maintenance, and it certainly doesn't need any bundlers to hold its hand. Here’s how to get cozy with tsc:

1. Install TypeScript globally if you haven't already: npm install -g typescript.
2. Compile your TS files with: tsc yourFile.ts.

That's it. But here's the kicker—it's not always that straightforward when working without bundlers, as you need to consider module resolution, which brings us to the TSConfig file.

Mastering TSConfig like a Pro

To make the most out of your unbundled TypeScript adventure, you need to master the tsconfig.json file. This is where you specify compiler options, define the project context, and get TypeScript to work according to your rules. Here's a basic example:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "es2020",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

Keep your tsconfig lean and avoid the bloated feeling of over-configuration—it’s good for your digital digestion.

Can I Use External Modules?

If you're worried that dropping bundlers will isolate you from the rest of the TypeScript community, fear not! You can still use modules from npm. When importing these modules, TypeScript looks for them in your node_modules folder.

Here’s the trick: You’re aiming to be dependency-light. So, it’s like going on a diet but still enjoying chocolate—just don't eat the whole bar.

import express from 'express'; // Go ahead, just don't npm install the universe.

const app = express();
app.get('/', (req, res) => res.send('Modular TypeScript, hold the bundlers!'));
app.listen(3000);

This little server snippet is a guilt-free pleasure, just like your grandma's cookies, but without the calories.

Let’s Talk Local Modules

For local modules, make sure to adhere to these guidelines:

• Use relative paths for importing.
• Ensure consistency in your module resolutions.
• Organize your files logically—because even your code needs to feel like it’s home.

Testing Without Bundlers

Testing without bundlers might sound like juggling flaming torches, but in reality, it's not. Modern testing frameworks like Jest support TypeScript out of the box. Configure it to transform TypeScript on the fly, and voilà!

Final Thoughts and Best Practices

Handling modular TypeScript code without bundlers is not only possible but can be liberating too! 😎 Remember:

• Keep your project structure and your tsconfig file as simple as you can. Simple doesn't mean simplistic—it means pure elegance.
• Treat external dependencies like a seasoning—a little goes a long way.
• Love your tsc and the command line—they will love you back.
• Don't be afraid to go against the grain; unbundled TypeScript is like coding in haute couture—and you're a trendsetter.

Moderation is key—not only in your humor but also in code and dependencies. You're not aiming to win an Olympic gold in "Package Hoarding". Now that you have a map to navigate the world of unbundled TypeScript, step forth and code with confidence, style, and a touch of well-placed sarcasm. Happy coding! 👨‍💻✨

More like this

Unraveling Type Assertions in TypeScript 👀

Have you ever encountered a peculiar TypeScript compiler refusing to acknowledge your certainty about the type of variable you're dealing with? Well, you're not alone! Type assertion in TypeScript is like telling the compiler, "Trust me, I know what I'm doing" (famous last words, right?).

Read

Mastering TypeScript Unit Tests with Ease

Writing unit tests is quite the adventure in any developer's journey. It's akin to putting on your armor and ensuring your code can withstand the wildest of bugs. Just like a Dutch weather forecast, TypeScript code can be unpredictable, but fear not!

Read

TypeScript in the Cloud: A Software Engineer's Guide

If you're a coder with a penchant for strong typing and sleek syntax, you've likely dabbled with TypeScript. But as you float your app ideas into the nebulous realm of cloud computing, you might wonder, "Can TypeScript cozy up with bigwig platforms like AWS or Azure?" Fear not, for you've docked at the right space station!

Read

TypeScript & WebSockets: A Real-Time Charm

Ever wondered how magical it feels when your web app communicates in real-time, just like a cosy chat at your favorite cafe? That's the power of WebSockets, which, together with TypeScript, can create a symphony of seamless data exchange for your project. Real-time applications are all the rage, from gaming platforms to chat apps, and understanding how to use TypeScript with WebSockets is vital.

Read