TypeScript: console is undefined in IE

Question

For JavaScript I found the following solution for Internet Explorer to be able to deal with console.log without hitting F12. 'console' is undefined error for Internet Explorer

however when I use the following lines in Typescript I can't compile.

if (!console) console = {log: function() {}};

Any ideas?

score 4 · Accepted Answer · answered Oct 23 '12 at 16:42

4

You are getting an error because the object literal you wrote doesn't have all the same members as a regular console. Simplest fix would just be to type-assert as any:

if (!console) console = <any>{log: function() {}};

Obviously you'll need to not call anything off console other than log.

answered Oct 23 '12 at 16:42

Ryan Cavanaugh

209,514
56
272
235

I had to use this in IE 9: 'try { console } catch (e) { console = { log: function () { } }; }' – beatoss Oct 24 '12 at 07:39
@beatoss you cannot check `if(!somethingNonExistent)` in the global context which is why you get the exception. Recommend you use `typeof` instead. See my answer. – basarat Feb 22 '14 at 05:25

score 3 · Answer 2 · answered Oct 23 '12 at 22:22

3

I find the easiest way to handle this is abstract the console...

class Logger {
    static log(message: string) {
        if (typeof window.console !== 'undefined') {
            window.console.log(message);
        }
    }
}

Logger.log("Works with the console and doesn't ever error");

This also opens up other possibilities, such as handling the no console scenario with a message window, or logging errors to your server or whatever else you might want to do over and above logging to a console - it also makes it easier to run your code in a windowless context!

answered Oct 23 '12 at 22:22

Fenton

241,084
71
387
401

In a windowless context, `window` will be undefined and you will get an error on `typeof window.console` – basarat Feb 22 '14 at 05:22
If you are using something other than a browser, you can check the console wherever it exists in that environment. On the whole though, it is only the browser environment were console comes and goes in such a whimsical way (i.e. whether the console is open or not). – Fenton Feb 22 '14 at 20:51
E.g in nodejs console exists. But 'if (typeof window.console !== 'undefined') {' would throw an error since window does not exist and you just tried to reference a property on it – basarat Feb 22 '14 at 22:01
Why would you even check if you writing a NodeJS program? – Fenton Feb 24 '14 at 13:44
You wouldn't *need* to check, but would happen if you reuse the code there. I though that is what you meant with "windowless context". I get the confusion now: comes and goes in such a whimsical way (i.e. whether the console is open or not): Not true. Irrespective of whether you have it open or not, it is (always) there on supported browsers, absent on old :) – basarat Feb 24 '14 at 22:52
I personally wouldn't reuse the logger - I'd use the strategy pattern to supply a logger appropriate to the environment. The code would depend on the abstract logger and not on `console`. – Fenton Feb 25 '14 at 08:40

score 0 · Answer 3 · answered Oct 24 '12 at 09:52

Have a look at console.js. It handles console logging in all browers, and more. In order to compile with typescript, you will need to define console.log in a console.d.ts module definition, and then reference the d.ts file wherever you use console.log.

score 0 · Answer 4 · answered Feb 22 '14 at 05:23

0

The only operator valid on an undefined variable when in the global context is typeof. So I recommend the following code snippet:

if (typeof console == "undefined" || typeof console.log == "undefined") 
    console = <any>{ log: function () { } };

answered Feb 22 '14 at 05:23

basarat

261,912
58
460
511

TypeScript: console is undefined in IE

4 Answers4

Linked