5 Reasons To Not Use C# IDE For TypeScript Development

CodeJourney - IDE for TypeScript

I know a few fellow devs who still use Visual Studio or Rider as their IDE for Typescript. If you’re one of them, this is going to be a little rant on you all 😄

In this short article, I will give you my 5 reasons why the backend code editor might not be the best IDE for frontend development 😉

NOTE: calling this post a “rant” is obviously humorous 😉 This article is my own opinion, not a hate on anyone using different IDEs than I do.

TypeScript Compiler Explained

As a frontend developer, one of the things you should know is how TypeScript compiler works. Sooner or later you will work with this language (which I sincerely wish you!), so it’s good to know your stuff 😉

In this article, I will explain TypeScript compiler to you in simple terms. We will avoid complex stuff – only what you need for your everyday frontend developer’s work. We will not explore the inner workings of the TypeScript compiler Instead, we’ll see some practical implications of its workings for TypeScript developer. Let’s dive in 🙂

What Is A JavaScript Bundler?

What is a JavaScript bundler?

If you asked me 5 years ago what a JavaScript bundler is, I’d probably tell you it’s something people fight with for hours, just to get a simple web app set up 🤪 While this might have been closer to the truth in 2018, a lot has changed in JavaScript ecosystem until today.

If you’re starting your web development journey, or maybe have already dived into it, but are not really sure what JS bundlers are and what’s their role, you’re reading a proper piece of explanation 🙂

How To Fix Visual Studio Code IntelliSense Loading Infinitely

Continuing with weird errors you might encounter in JavaScript world, I have another one: Visual Studio Code IntelliSense loading infinitely 😀 Solution included, of course!

The symptoms of this issue are putting your mouse on something where you’d expect the IntelliSense guidelines, but instead you only see the “Loading…” text.

In this short article, I’m sharing the reason of this issue and my way of fixing it.

Typing API Responses With Zod

Have you ever needed to synchronize types in your frontend app with the backend API?

If you ever had an API action defined like that in your controller:

public record UserViewModel(Guid Id, string Name, string LastName, string Login,
bool IsActive, int LoyaltyPoints, AddressViewModel? Address = null);
// …
public List<UserViewModel> AllUsers()
{
var usersViewModels = TestDataGenerator.GetTestUsers();
return usersViewModels.OrderBy(uvm => uvm.Name).ToList();
}

and fetched this data using TypeScript in the following way:

getAllUsers = async (): Promise<UserViewModel[]> => {
const url = `${this.apiEndpoint}/AllUsers`;
const response = await fetch(url);
const users = (await response.json()) as UserViewModel[];
return users;
};

at some point, you probably also experienced the desynchronization of backend (C#, in our example) and frontend (TypeScript) types definitions. What if someone has changed the C# version of UserViewModel, but no one corrected its TypeScript’s equivalent?

Your TypeScript fetching code will tell nothing about that. There will be no error, even though the fetched data doesn’t match the expected UserViewModel type.

I’ll try to address this issue in this article 🙂 Let’s see how typing API responses with zod can help us here.