287

How does one handle type casting in TypeScript or Javascript?

Say I have the following TypeScript code:

module Symbology { 

    export class SymbolFactory { 

        createStyle( symbolInfo : SymbolInfo) : any { 
            if (symbolInfo == null)
            {
                 return null;
            }

            if (symbolInfo.symbolShapeType === "marker") {      

                // how to cast to MarkerSymbolInfo          
                return this.createMarkerStyle((MarkerSymbolInfo) symbolInfo);
            }                                  
        }

        createMarkerStyle(markerSymbol : MarkerSymbolInfo ): any { 
            throw "createMarkerStyle not implemented";
        }              

    }
}

where SymbolInfo is a base class. How do I handle typecasting from SymbolInfo to MarkerSymbolInfo in TypeScript or Javascript?

3 Answers 3

416

You can cast like this:

return this.createMarkerStyle(<MarkerSymbolInfo> symbolInfo);

Or like this if you want to be compatible with tsx mode:

return this.createMarkerStyle(symbolInfo as MarkerSymbolInfo);

Just remember that this is a compile-time cast, and not a runtime cast.

4
  • 18
    Now, I see that in in doc, referred to as Type Assertions in section 4.13.
    – Klaus Nji
    Commented Nov 3, 2012 at 12:27
  • This answer does no longer provide the full picture of type assertion in typescript, whereas Alex's answer gives a more complete picture, and should be the accepted answer. Commented Jan 5, 2017 at 9:20
  • @KristofferDorph This answer is 4 years old. At the time of writing TypeScript was at version 0.8.1, and thus was the correct answer at the time. JSX support was only included 3 years later.
    – blorkfish
    Commented Jan 5, 2017 at 11:43
  • @blorkfish that is true, but it is good practice to follow the times, so people asking the same question today gets the current answer, and not as it where 4 years ago :-) Commented Jan 5, 2017 at 14:04
247

This is called type assertion in TypeScript, and since TypeScript 1.6, there are two ways to express this:

// Original syntax
var markerSymbolInfo = <MarkerSymbolInfo> symbolInfo;

// Newer additional syntax
var markerSymbolInfo = symbolInfo as MarkerSymbolInfo;

Both alternatives are functionally identical. The reason for introducing the as-syntax is that the original syntax conflicts with JSX, see the design discussion here.

If you are in a position to choose, just use the syntax that you feel more comfortable with. I personally prefer the as-syntax as it feels more fluent to read and write.

4
  • 3
    How do you indicate to typescript that you have converted an object to another type? For example a func that returns type2, inside it it http gets type 1, does logic to convert, and returns what was type1 but is now type2? Commented Jul 5, 2018 at 5:56
  • @TonyGutierrez How do you do the conversion?
    – Alex
    Commented Jul 5, 2018 at 7:49
  • 3
    Basically take one property and modify. The only way I have found to do this is to create a new var (type2) and copy in the props from the type1var and then return it. You can't modify the type1 and return, or you get a "Can't cast" error. Commented Jul 5, 2018 at 12:50
  • 1
    "the original syntax conflicted with JSX" - I think "conflicts" would be a better wording, since the conflict is still there with the original syntax.
    – MEMark
    Commented Sep 12, 2021 at 19:49
4

In typescript it is possible to do an instanceof check in an if statement and you will have access to the same variable with the Typed properties.

So let's say MarkerSymbolInfo has a property on it called marker. You can do the following:

if (symbolInfo instanceof MarkerSymbol) {
    // access .marker here
    const marker = symbolInfo.marker
}

It's a nice little trick to get the instance of a variable using the same variable without needing to reassign it to a different variable name.

Check out these two resources for more information:

TypeScript instanceof & JavaScript instanceof

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.