How to write literal Javascript in Typescript

Question

I need to add a member to an HTMLElement, in other words, I need to store data into an element. This is what I would like to achieve as if I am coding in ScriptSharp.

/** My method */
public DoIt(element: Element, obj: Object) {
  Literal("{0}.extended = {1}", element, obj); // This is not standard Typescript!
}

In my example ScriptSharp (a project to convert C# code into Javascript) provides a Script.Literal object that allows developers to write plain Javascript when a C# abstraction is not possible.

So that the Javascript output is:

// Probably Typescript will render it a bit differently, but basically
// this is what we get in the end...
var _doit = function(element, obj) {
  element.extended = obj;
};

How can I achieve this in Typescript? Or maybe I should handle this problem in a different way?

Answer 1

Any valid JavaScript is also valid TypeScript. This means that you can write literal JS in any place in your code.

var _doit = function(element, obj) {
  element.extended = obj;
};

This is valid JS and TS.

However, since you use TypeScript, you may also want to use static typing with your code. If you just add types to your code, it will compile correctly, but you'll get a semantic error:

var _doit = function(element:HTMLElement, obj) {
  element.extended = obj; // error: HTMLElement doesn't have property 'extended'
};

To prevent this error, you can notify the compiler that you intend to create a new property on HTMLElement:

interface HTMLElement {
  extended?: any;
}

Now the compiler knows that you have an (optional) property extended on HTMLElement and will compile without errors. You will also get code autocompletion on this property (and JSDoc if provided).

Answer 2

This worked for me:

class Foo {
  public DoIt(element: Element, obj: Object) {
    var anyElement: any = element;
    anyElement.extended = obj;
  }
}

The problem (as you probably noticed) is that Element does not declare a property with the name extended, so TypeScript does its job and enforces the Element type. If you want to work around this, you can use the any type to do this.