How to handle warnings for proprietary/custom properties of built-in objects in TypeScript

Question

I am using Personas which relies on the proprietary property navigator.id. Since this property is not standard, the TypeScript compiler generates the following warning:

$ tsc home.ts --out my_ts_generated_code.js
/Users/..../home.ts(27,18): The property 'id' does not exist on value of type 'Navigator'

But the .js file is successfully generated and runs on the FF15 browser without any warning/error message.
I also include a polyfill for navigator.id, as instructed by the documentation, so navigator.id will definitely by available in every browser.

Could someone suggest me how to deal with this warning?

index.html

<!-- some HTML omit above -->
<script src="https://login.persona.org/include.js"></script>
<script src="my_ts_generated_code.js"></script>
<button class="btn" id="signin">Sign in</button>
<button class="btn" id="signout">Sign out</button>
<!-- some HTML omit below -->

home.ts

declare var $;

class Student {
    fullname : string;
    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
}

interface Person {
    firstname: string;
    lastname: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}

var user = new Student("Jane", "M.", "User");

$(function() {
    $('#signin').on('click', function(e) {
        e.preventDefault();
        navigator.id.request();
    });

    $('#signout').on('click', function(e) {
        e.preventDefault();
        navigator.id.logout();
    });
    //document.body.innerHTML = greeter(user);
});

What is `navigator`? Where is it coming from? How is it declared? — Sidharth Mudgal, Oct 03 '12 at 06:53
@Sidharth: https://developer.mozilla.org/en-US/docs/DOM/window.navigator — Felix Kling, Oct 03 '12 at 06:55
Maybe relevant: https://developer.mozilla.org/en-US/docs/DOM/navigator.id ... it's a non-standard property. — Felix Kling, Oct 03 '12 at 06:56
@FelixKling - Tks for the info. Never used `id` on `navigator`. In fact, i try to stay away from using `navigator` all the time! — techfoobar, Oct 03 '12 at 06:57
Does this really have anything to do with TypeScript? If you are really using the script for Persona authentication, it might be helpful for others to add this information to your question and change the title accordingly. — Felix Kling, Oct 03 '12 at 06:59
@FelixKling - This is my snippet of code. I have another tested TypeScript code that I do not include in question. — GiVeR, Oct 03 '12 at 07:10
Ok, but if the question is not about TypeScript, then you should not tag it as such ;) — Felix Kling, Oct 03 '12 at 07:12
@FelixKling - The question still related with TypeScript because the .ts file has code both TypeScipt and Javascript code — GiVeR, Oct 03 '12 at 07:21
This should help: http://stackoverflow.com/questions/12701732/typescript-augmenting-built-in-types. I honestly recommend to use a different title and/or describe the problem different, like "How to avoid warnings for proprietary/custom properties on built-in objects" and explain what you are trying to do (integrating Personas) and it exhibits this problem (it uses `navigator.id`). — Felix Kling, Oct 03 '12 at 07:35
I took the liberty to reformulate your post to make the problem clearer, because I think this is a good question. Please feel free to roll back or adjust it. I don't think the compiled code is needed for this problem. — Felix Kling, Oct 03 '12 at 07:50

score 65 · Accepted Answer · answered Oct 03 '12 at 07:34

65

1) You can reinterpret navigator prop.

(<any>navigator).id.request();

2) You can declare id prop youself

mycompany.lib.d.ts

interface Navigator {
  id: any
}

app.ts

navigator.id.request();

see this video http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript/ There Anders tell as jQuery.UI add new methods to jQuery (see 46 min)

answered Oct 03 '12 at 07:34

Jack128

1,113
10
15

1

I went with Option 2 since it seems like the "Typescript Way" and helps minimize technical debt. – rinogo Jun 15 '16 at 22:46

score 2 · Answer 2 · answered Oct 03 '12 at 06:56

2

Add checks like if(navigator.id != null && typeof navigator.id != 'undefined') before stmt where navigator.id is referred

answered Oct 03 '12 at 06:56

rt2800

3,045
2
19
26

1

This will guard against undefined id at runtime, but the compiler will still complain that it breaks the interface. @Jack128's answer is good - add the interface definition. Better still, write a declaration header for the actual interface rather than just saying `navigator.id : any`. – Jason Suárez Oct 03 '12 at 17:01

How to handle warnings for proprietary/custom properties of built-in objects in TypeScript

2 Answers2

Linked