Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using Casting in TypeScript

DZone's Guide to

Using Casting in TypeScript

While JavaScript doesn't have casting like Object-Oriented languages, TypeScript language does.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Using Casting in TypeScriptOne of the things that are very common in Object-Oriented languages is type casting. In JavaScript, which is a dynamic language, you don’t have the concept of casting. On the other hand, TypeScript language, which compiles into JavaScript, does include casting. This post explains how to use casting in TypeScript.

Down Casting in TypeScript

TypeScript includes the ability to cast types. In order to cast a type in TypeScript you use the <> brackets with the relevant type to cast. In order to show how you can use casting lets take the Greeter example that is included in TypeScript website:

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor (element: HTMLElement) { 
        this.element = element;
        this.element.innerText += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};


In the Greeter class we expect a span which is of type HTMLElement. TypeScript includes a type called HTMLSpanElement which is extends the HTMLElement type. So if we change the declaration of the span field to

span: HTMLSpanElement;


you will get syntax error in the following constructor line:

this.span = document.createElement('span');


The error occurs because the document.createElement function returns a HTMLElement and not a HTMLSpanElement. In order to fix the problem you will need to use the casting in that line of code:

this.span = <HTMLSpanElement>document.createElement('span');


The <HTMLSpanElement> will tell the TypeScript compiler to cast the HTMLElement returned from document.createElement function into HTMLSpanElement. That will fix the syntax error. 

Pay attention that the generated JavaScript will look the same for both of the options (the not modified and the modified Greeter examples) and this is because of the dynamic nature of JavaScript.

Up Casting in TypeScript

As opposed to the previous down cast example, the option to up cast a type is straight forward in TypeScript. For example, the following code is valid:

var el: HTMLElement;
el = new HTMLSpanElement();


Since HTMLSpanElement extends the HTMLElement type it is possible to set a HTMLSpanElement instead of HTMLElement.The generated JavaScript for the previous code will be:

var el;
el = new HTMLSpanElement();


Summary

TypeScript includes the ability to down cast and to up cast types. You use the <> brackets in order to down cast a type. In up cast, you just need to know that one type is a subclass of another type. 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
css ,html5 ,javascript ,tips and tricks

Published at DZone with permission of Gil Fink, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}