TypeScript for the C# Developer

This is the first article of a few that will introduce the C# developer to TypeScript. It’s aimed primarily at back-end developers who are looking to start doing more JavaScript and front-end related work. In this article, I’ll introduce you to TypeScript, what it is, and its type system.

What Exactly Is TypeScript?

I’m sure you’ve heard many people mention it by now, including a lot of your colleagues, but what exactly is this TypeScript thing?

The first thing that’s important to remember about TypeScript (TS for short) is that it’s NOT a replacement for JavaScript, despite what some might say.

TS is actually what’s described as a super set of extensions to the JavaScript language, allowing you to use many of the advanced high-level language features you might be used to in languages such as C#.

It’s classed as a super set, mostly because instead of replacing things, it adds to them, making them much better.

In many ways, it’s also a “Transpiler,” because it enables many of the modern day ES6/7 JavaScript features to be used in your front-end code, while still maintaining compatibility with older non–ES6/7-compatible browsers.

Essentially, you can write code using new cutting edge syntax, but generate output that works on older browsers and JavaScript run-times.

Another not dissimilar product you might have heard of is called “Babel,” that does broadly the same thing, but instead of adding features to the language as TS does, it just allows use of the “Newer features.”

So, What Exactly Does TypeScript Bring to the Party, Then?

Well, first off, it brings in type safety.

One thing that we C# developers like about the language is its Type Safety. A string is a string, and an int is an int; try to mix the two of them and bad things happen.

This is NOT the case in the world of JavaScript. You can freely create a string variable, then assign an integer to it, followed by assigning a string back to it later on. In fact, you can freely repurpose variables in JS at will and swap them around with complete wild abandon. For a good example of just what this means, a quick watch of Gary Bernhardt’s destroy all software talk is both humorous and very eye opening.

TypeScript brings this type system into the world of JavaScript, and even though it doesn’t prevent you from blowing your foot off (you can override it quite easily), it does prevent you from doing so accidentally.

For example, in C# you might have the following:

public int ID { get; set; }
public string Name { get; set; }
public string Description { get; set; }

This means that we can only ever assign an integer to ID, and strings to Name and Description. By using TypeScript, we can achieve the same, with the following TS code:

public ID: number;
public Name: string;
public Description: string;

From this point forward, if you try to assign a string to ID, or a number to Name/Description, the TS interpreter will halt processing of the file and not generate any JavaScript output, allowing you to capture type assignment errors in your code before you deploy it.

This is the main reason that TypeScript was originally conceived—so that developers creating applications in environments such as ASP.NET MVC, where they might be performing both front- and back-end coding work, were able to maintain type safety. Since then, however, it’s come a long way, and in other articles, we’ll take a closer look at other features in the language.

When Is a Number a Number?

If you’re paying attention, you might have noticed in the preceding TS snippet that our integer’s type became “number.” This is because, in the world of JavaScript, there is no differentiation between different number types. As far as any JS interpreter is concerned, integers, floats, and decimals are all the same—numerical.

Because this is baked deeply into the JS engines in most browsers, not even TS can do anything here to help you, so a number is always a number.

In fact, JavaScript has only three base types that it understands. These are:

  • number
  • string
  • Boolean

Everything else is either ignored or treated as though it were a generic object.

One thing that TypeScript can do to help us, however, is allow us to define our own types.

This is done through the use of the interface keyword, and the use of classes. I’m not going to go into classes in this article. I’ll leave that for one of the others, but by using interface, you easily can do something like the following:

public interface CustomType {
   public ID: number;
   public Name: string;
   public Description: string;
}

This then allows you to define regular TypeScript properties and variables, like so:

public myData:CustomType;

or

let myData:CustomType = null;

If you use a class instead of an interface, you also can add getters & setters, which then would allow you to easily add things like “float,” “decimal,” and other specific numerical types that you may be used to.

All of this type safety then will be enforced in the same way as the three built-in types.

There’s also one special type that’s defined by TS, that you can use. That’s the ANY type.

ANY means exactly that—the type can be assigned to any data you choose, and is essentially the same as using raw un-typed JavaScript.

Although this may seem counter intuitive to TypeScript’s reason for being, it does make sense in some cases.

For example, when loading data from your back-end service, you would normally use JSON as the transport format. Because JSON doesn’t carry any type information, only structure, it often helps to set types on the properties, but not on the overall object, especially if you have an API where the properties inside the object can change.

The ANY type helps here, because without it, TS works its way back up the chain of usage and tries to infer an object’s base type, which often can be just a plain JS object.

This leads TS to fail compilation if, for example, you try to access a property you know will be there in the JSON, but which TS cannot work out or imply in advance.

In the following articles, we’ll look in more depth at things like Classes and even Generics, as well as some of the ES6/7 features (for example, for-each loops) that you can use in JavaScript thanks to the magic of TypeScript.

Until next time, happy coding.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read