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.



About the Author

Peter Shaw

As an early adopter of IT back in the late 1970s to early 1980s, I started out with a humble little 1KB Sinclair ZX81 home computer. Within a very short space of time, this small 1KB machine became a 16KB Tandy TRS-80, followed by an Acorn Electron and, eventually, after going through many other different machines, a 4MB, ARM-powered Acorn A5000. After leaving school and getting involved with DOS-based PCs, I went on to train in many different disciplines in the computer networking and communications industries. After returning to university in the mid-1990s and gaining a Bachelor of Science in Computing for Industry, I now run my own consulting business in the northeast of England called Digital Solutions Computer Software, Ltd. I advise clients at both a hardware and software level in many different IT disciplines, covering a wide range of domain-specific knowledge—from mobile communications and networks right through to geographic information systems and banking and finance.

Related Articles

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date