Set window.location with TypeScript

Question

I am getting an error with the following TypeScript code:

 ///<reference path='../../../Shared/typescript/jquery.d.ts' />
 ///<reference path='../../../Shared/typescript/jqueryStatic.d.ts' />

 function accessControls(action: Action) {
    $('#logoutLink')
        .click(function () {
            var $link = $(this);
            window.location = $link.attr('data-href');
        });

 }

I am getting an underlined red error for the following:

$link.attr('data-href'); 

The message says:

Cannot convert 'string' to 'Location': Type 'String' is missing property 'reload' from type 'Location'

Does anyone know what this means?

Answer 1

window.location is of type Location while .attr('data-href') returns a string, so you have to assign it to window.location.href which is of string type too. For that replace your following line:

window.location = $link.attr('data-href');

for this one:

window.location.href = $link.attr('data-href');

Answer 2

you have missed the href:

Standard, To use window.location.href as window.location is technically an object containing:

Properties
hash 
host 
hostname
href    <--- you need this
pathname (relative to the host)
port 
protocol 
search 

try

 window.location.href = $link.attr('data-href');

Answer 3

There's an assign method on the Location interface that plays perfectly well with typescript when passed a string and works the same as window.location = LOCATION.

window.location.assign('http://example.com');

interface Location {
    ...
    /** Navigates to the given URL. */
    assign(url: string | URL): void;
}

The method seems to have be around for a long time (IE 5.5!).

https://developer.mozilla.org/en-US/docs/Web/API/Location/assign

Answer 4

While implementing a complex PayPal integration, I noticed a very compelling reason to use window.location, that it does not require SAME ORIGIN.

Hence we did something like:

(<any> window).location = myUrl;

Instead of:

window.location.href = myUrl;

Where in OP's case:

var myUrl = $link.attr('data-href');

Answer 5

Just add href

Like this:

window.location.href = $link.attr('data-href');