All is lost

Typescript is a veneer language for Javascript, not a language in its own right. It is not interpreted like Javascript, nor is it compiled like traditional languages such as C, Java or Pascal (remember that old chestnut?). Instead, it is transpiled or converted into Javascript, which is then interpreted by your browser.

Because of this, it has certain features which do not correlate to Javascript. Notably, type information. Consider the following:

let my_object: MyType = null;

fetch ("someurl.com")
	.then (response => response.json ())
	.then ((response: SomeType) => 
		my_object = response);

This sends a request to someurl.com and places the JSON data returned into a variable called “my_object”. One would expect that my_object would be of the type “MyType” but, guess what? It doesn’t. If you look at the resulting Javascript object using your browser’s object inspector, you would find that it has the generic Javascript type: function.

Why is this?

When the typescript code is transpiled into Javascript it loses all of its type information because Javascript does not have a mechanism for retaining this information.

You will hear people say on all of the programming support forums that type information is stripped from the code and is not available at runtime. This is true. Well, sort of true (not 100% true).

Javascript does have types and you can create them. Consider the following:

var MyThing = function () {
	var x = 57;
}
var my_thing = new MyThing ();

Here, we are creating a Javascript type. If you look at “my_thing” with your object inspector, you will find that it is, indeed, of the type MyThing. So Javascript does have types, just not the same types as Typescript.

Can you force a Typescript type to be a Javascript type? Yes, you can. If you simply assign an object to a type in Typescript, as we did in the first example, then it is true, you lose all type information. However, if you create a type then it creates the Javascript equivalent.

let my_object: MyType = new MyType ();

Now, “my_object” will be a MyType, the same as if you had created the object with native Javascript. You can also assign values to your type using the Object.assign method (although, be warned, its functionality is somewhat limited). Therefore, if you want to retain your type information in the first example, instead you can say:

let my_object: MyType = null;

fetch ("someurl.com")
	.then (response => response.json ())
	.then ((response: MyType) => {
		my_object = new MyType ();
		Object.assign (my_object, response);
	}

Then you will have a MyType object which retains all of the wholesome goodness of its Typescript equivalent.

Why would you want to retain the type information? There are a myriad of reasons, the most immediate of which is to determine whether your object is, indeed, of that particular type at a later point in the code. For example, you could say:

if (myobject instanceof MyType) do_something_awesome ()

On a side note, a more detailed explanation of the differences between compiling, transpiling and interpreting is forthcoming.


Comments

Leave a Reply

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