If you're using Visual Studio 2012 and you've added the TypeScript for Microsoft Visual Studio 2012 extension then you will be able to jump start a TypeScript project using the template. If you click File > New > Project and look under the Visual C# templates you'll see a template called HTML Application with TypeScript. Selecting this template will generate a new project with a TypeScript file with the following contents:
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();
};
The problem with this code is the use of the .innerText property which is called .textContent in FireFox.
Here is a replacement to the above template that will work in FireFox and other browsers to get you moving forward again.
Tested on:
FireFox 16.0.2
Safari for Windows 5.1.7
IE9
Chrome 23.0.1271.64 m
Opera 12.10
class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
hasInnerText: bool;
constructor (element: HTMLElement) {
this.element = element;
// Firefox uses textContent
this.hasInnerText = !this.element.textContent;
this.appendElementText(this.element, "The time is: ");
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.setElementText(this.span, new Date().toUTCString());
}
setElementText(elem: HTMLElement, value: string) {
if (this.hasInnerText) {
elem.innerText = value;
} else {
elem.textContent = value;
}
}
appendElementText(elem: HTMLElement, value: string) {
if (this.hasInnerText) {
elem.innerText += value;
} else {
elem.textContent += value;
}
}
start() {
this.timerToken = setInterval(() =>
this.setElementText(this.span, new Date().toUTCString()), 500);
}
stop() {
clearTimeout(this.timerToken);
}
}
window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};
thanks for posting that. I was playing with ts and wondered why it didn't work in FF..
ReplyDelete