What is TypeScript, pros and cons and how it helps in Model Driven Apps

First of all I would like to say that I wanted to start this year with a fresh idea for my blog and that’s how my friend Ben den Blanken gave me the idea of this series of blog posts which is a guide about TypeScript applied in Model Driven apps.

I’m going to start by describing from the basics of TypeScript like what it is, what are its benefits, to practical examples in Model Driven Apps.

Without further introduction let’s start:

When we think about frontend development, the first words that come to our minds are HTML, CSS, and JavaScript, standard tools for structuring, styling, and scripting web pages in browsers. However, as we go deeper into the field, one is likely to encounter a popular word such as TypeScript.

The term “TypeScript” may already be familiar to you, if so then I’m not surprised because from its introduction in 2012, the language has consistently be in active development and sees a continuous increase in popularity with every year.

So the question then is: what precisely is TypeScript?

What is TypeScript?

TypeScript is an advanced programming language freely available as open-source, that was crafted by Microsoft to enhance JavaScript with a robust type system. Employed in conjunction with frontend frameworks like Angular, and React, TypeScript also showcase its versatility by facilitating backend development through integration with Node.js. This showcases the adaptable nature of TypeScript’s type system.

The primary distinction between TypeScript and JavaScript is that they are two different programming languages, though with TypeScript being closely rooted in JavaScript. Actually, TypeScript functions are a superset of JavaScript, meaning that any valid JavaScript code is also a valid TypeScript code.

TypeScript vs JavaScript

The primary enhancement introduced by TypeScript to JavaScript is about the implementation of a type system, hence the name “TypeScript.”

In the conventional setup, JavaScript follows a dynamic typing approach, similar to languages like Python. This implies that a variable can hold various types of data, could be text, number, or even an entire database entity, depending on the context and this flexibility is fine in JavaScript. TypeScript, on the other hand, imposes a strict definition on the content of a given variable.

For instance, imagine a developer creates an addNumbers function in TypeScript, specifying that the function exclusively accepts two numbers. If another developer attempts to supply text to the function, TypeScript will generate an error,  whereas in JavaScript such an operation would be perfectly acceptable.

Pros & Cons

Going deeper in technical detail, I can list some of the pros that TypeScript can give us:

  1. Strict typing

Everything stays the way we define it. Need a variable to always be a number? It’ll always be a number, then.

  1. Type annotations

A handy way of saying explicitly what type should be used.

  1. Code Maintainability

TypeScript enforces a more structured approach to coding. With explicit type annotations, code becomes self-documenting, making it easier for developers to understand and maintain.

  1. Enhanced Collaboration

When the project is developed by several developers, TypeScript helps to improve collaboration between them. The added type annotations make code more understandable, even for team members unfamiliar with a specific section of the codebase. Especially it increases quality and decreases time for code review, which is a part of each project development process. Also, it helps with onboarding and does it more smoothly for a new developer on a project.

  1. Object-oriented like

TypeScript introduced a great deal of syntax taken from object-oriented programming, including but not limited to:

  • interfaces,
  • classes,
  • enumerated types,
  • generics,
  • modules

Now for the cons that I’ve experienced:

  1. Complicated typing system (sometimes)

First of all, the typing system, while it’s a great tool in many regards, can sometimes be a little too complicated to use properly. This isn’t strictly a disadvantage of TypeScript, though, but rather a downside that comes from it being fully compatible with JavaScript, which itself leaves even more room for complications.

  1. Learning Curve

For developers who are familiar with plain JavaScript, there may be a learning curve when transitioning to TypeScript. You’ll need to understand type annotations, interfaces, and other TypeScript-specific features. However, the effort is usually worth it, as it can lead to better code quality and fewer bugs in the long run.

  1. Compatibility

TypeScript may not be the best choice for projects with a legacy JavaScript codebase, as it could require significant refactoring. Additionally, some developers may find it challenging to integrate TypeScript with existing build systems.

How it helps in Model Driven Apps

The advantages of using TypeScript in Model Driven Apps are the same as I have described before (Strict typing, Code Maintainability, Object-oriented like), but also from my personal experience I can say that now my code is much better structured than when I used JavaScript, before I did not use schema names, enums or handler classes, and it is true that you can also use all this in JavaScript, but with Typescript it is a matter of time before it becomes natural/out of the box.

The following image is a sneak peek of what will come in my next blogpost, but just to show you how you can structure your code when using TypeScript:

Of course, if we are working on a large project we could end up with huge .ts files with a lot of logic, so it is important to pay attention from the beginning and create a well-defined structure that works for you.

The following is more of a general advice, not everything is going to be TypeScript development and not everything is going to be C# development (plugins and Custom APIs), so the key is to understand the requirements and decide the best possible solution, it could even be a cloud flow.

Personally I prefer not to use business rules if I’m using JavaScript, so in my case I always end up applying well structured code instead of business rules, even if at the beginning it’s just about showing or hiding fields, usually most projects end up requiring much more complex logic than that and that’s why I end up applying only JavaScript from the beginning.

Going back to TypeScript, it’s true that Dataverse doesn’t understand TypeScript, so in the end we will have to upload a JavaScript file of web resources, but don’t worry because in my next blogpost I will guide you on how to do it.

Conclusion

I think TypeScript is a better choice over JavaScript in every aspect for a Dataverse project. Maybe you won’t notice it at the beginning, but because of its type system, it will help you to create a maintainable code, enhance the collaboration (if you are working in a development team).

It is also worth mentioning that TypeScript may not be the right choice in an existing project where there are a lot of JavaScript files with a lot of logic, because migrating the entire code base could even be another project.

Leave a Reply

Your email address will not be published. Required fields are marked *