Table of contents:
- Introduction
- Sketch
- Type Checking
- Functions
- Teamwork
- Lessons Learned
- Next Steps
- Resources
Introduction
Web development can sometimes feel like the wild west of the coding world. There are so many frameworks and libraries to work with, and oftentimes it can feel overwhelming. If you feel this way, I’m here to tell you that you are not alone; when I started my apprenticeship, I was at a loss for what technology I wanted to add to my tech stack. I knew I enjoyed front-end development but had no idea what path to take to sharpen my skills in the area. And so, I decided to do the best thing you can do when you’re unsure about something: ask someone with more experience. I consulted my mentor and he informed me that TypeScript has quickly become a valuable asset in many company’s development teams. I did some more research and found TypeScript very appealing; I’m a details person, and TypeScript’s granularity offered a fun, new way to code.
My initial uncertainty inspired me to write a small sketch. My dilemma brought to mind those dating shows you may or may not have watched mindlessly late at night, and I decided to use that as the setting of my sketch. Without further ado, I bring you:
FULL STACK FLIRTING
[FUNKY INTRO MUSIC PLAYS]
LUKE L. HOST: Welcome back to “Full Stack Flirting”! Luke L. Host here back with another developer looking to find their one true love. Will our star push their heart to production? Or will they rollback to single? Let’s find out and meet our programmer.
[PROGRAMMER ENTERS]
NICOLE: Hi Luke, great to be here.
HOST: Great to have you! Now, what’s your name and what are you hoping to get out of little production here?
NICOLE: I’m Nicole, and I’m trying to decide what language I should add to my permanent tech-stack rotation. I’ve brought two suitors today; JavaScript, my old flame, and TypeScript, my sudden suitor.
HOST: Sounds spicy! Why don’t we meet our two languages now?
[LANGUAGES ENTER]
JAVASCRIPT: Hi all. I’m JavaScript.
TYPESCRIPT: And I’m TypeScript.
HOST: Lovely to meet you two! Alright, Nicole, let’s dive right in. JavaScript, you’ve been around for a while. What makes you the best choice for Nicole’s tech stack?
JAVASCRIPT: Well, Luke, I’ve been the backbone of the web for decades. I’m reliable and flexible, and my syntax is super easy to pick up. Plus, I have a huge community—stack overflow will be your best friend when it comes to me.
HOST: Impressive, but I hear you’ve got a bit of… baggage? Perhaps of the legacy variety?
JAVASCRIPT: Hey now, I’ve been modernizing! ES6 is here, and it’s made me better than ever.
HOST: Noted. Now, TypeScript, what makes you stand out as a suitor?
TYPESCRIPT: Well, Luke, I take all the great things about JavaScript and add a little structure. I’m like JavaScript… but better. I help prevent errors and make debugging a breeze. A developer like Nicole deserves something more secure and reliable. Something like me.
HOST: Secure and reliable—music to a programmer’s ears. But some say you’re a bit… high maintenance?
TYPESCRIPT: Not at all, Luke. Once you get to know me, I’m super approachable. If Nicole knows JavaScript, transitioning to me will be a piece of cake.
HOST: Nicole, you’ve got quite the decision ahead of you. JavaScript brings nostalgia and simplicity, but TypeScript offers that safety net we all crave in love and code. Are you ready to commit, or do you need a few more feature demos?
NICOLE: I think I’ll need to run a few more tests…
HOST: Alright, let’s dig into the real detail: code compatibility! JavaScript, TypeScript, you’ve got Nicole’s attention, but now it’s time to show your best features. JavaScript, why don’t you start?
JAVASCRIPT: Gladly! In my case, I like to keep it simple. Here’s how I declare a variable:
let favoriteFood = "sushi";
console.log(favoriteFood); // sushi
No types, no frills—just pure, unfiltered code. Casual and easy.
HOST: Effortless, but some might say a little… too casual. TypeScript, what about you?
TYPESCRIPT: Luke, I like a little clarity in my relationships. Watch this:
let favoriteFood: string = "sushi";
console.log(favoriteFood); // sushi
See? I make sure there’s no confusion about what kind of data Nicole’s working with. Strong communication is key.
NICOLE: Hmm, I do love clarity… JavaScript, what happens if I try to do this?
favoriteFood = 42;
console.log(favoriteFood); // 42... wait, what?
JAVASCRIPT: Look, I’m flexible! Who says favoriteFood can’t be a number? I’m all about going with the flow.
TYPESCRIPT: That’s where I come in, Nicole. I would’ve caught that mistake before you even ran the code:
// Error: Type 'number' is not assignable to type 'string'.
See? I’ve got your back, always.
HOST: Alright, let’s talk about functions. JavaScript, how do you handle them?
JAVASCRIPT: I like to keep things open-ended. Let’s say Nicole wants to write a function to add two numbers:
const add = (a, b) => {
return a + b;
}
console.log(add(2, 3)); // 5
console.log(add("hello", 3)); // 'hello3'... kind of quirky, huh?
No big deal if Nicole slips a string in there—I’ll make it work!
TYPESCRIPT: Make it work? That’s not exactly a sustainable foundation. Nicole, I believe in setting expectations upfront:
const add = (a: number, b: number): number => {
return a + b;
}
console.log(add(2, 3)); // 5
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.
With me, there’s no guessing—your inputs and outputs are crystal clear.
NICOLE: Wow, you two have really different approaches. JavaScript, you’re so adaptable… but TypeScript, you’re like a safety net I didn’t know I needed!
HOST: Sounds like our darling developer has a lot to consider! Let’s move on to one final question: What’s your approach to… teamwork? How do you work in a big, complicated relationship—like a full-stack app?
JAVASCRIPT: Teamwork? I thrive in the chaos of collaboration. I can integrate anywhere, with anyone. Here’s me using a Promise to handle async work:
fetch("https://api.example.com")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
I’m straightforward and adaptable.
TYPESCRIPT: Sure, but let’s be honest, JavaScript—you can get a little sloppy in big teams. I bring structure and accountability to the relationship:
interface ApiResponse {
id: number;
name: string;
}
async function fetchData(): Promise<ApiResponse> {
const response = await fetch("https://api.example.com");
const data: ApiResponse = await response.json();
return data;
}
See? I ensure everyone knows exactly what to expect; no surprises, no unnecessary drama.
HOST: Nicole, you’ve got your hands full with these two. Do you want the adventurous spirit of JavaScript or the dependable structure of TypeScript? I guess we’ll leave that decision up to you—until next time on Full Stack Flirting!
[FUNKY OUTRO MUSIC PLAYS]
Through my exploration, I’ve learned a few key lessons about TypeScript that I think could help others expedite their learning:
- Start with JavaScript foundations: Understanding JavaScript first makes transitioning to TypeScript far easier.
- TypeScript adds to JavaScript, not replaces: Think of TypeScript as another tool in your web development tool box.
- Keep scalability in mind: When working on large projects or in teams, TypeScript’s structure shines by preventing small issues from becoming big problems.
As evidenced by the end of this sketch, I myself am still unsure whether I’ll use TypeScript or JavaScript as my primary coding language; both offer their advantages and drawbacks. I will say that my romp into TypeScript has been interesting. I will continue my learning of TypeScript by buliding a small-scale project in order to get used to applying the unique features. While creating this project, I’ll attempt to implement technologies I’m already familiar with, such as Vite or React. I also plan on diving deeper into the Next.js documentation and learning how to best utilize it.
If you’re looking to get into TypeScript yourself, here are some resources you may find helpful:
SOCIAL SHARE CARD GENERATOR