Question

45

How to write literal Javascript in Typescript

rated 0 times [ 46] [ 1] / answers: 1 / hits: 28879 / 9 Years ago, sun, july 5, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jameson

Add To Favorites

Follow

Total Points: 534

Total Questions: 103

Total Answers: 102

Location: Lithuania

Member since Fri, Sep 4, 2020

4 Years ago

jameson questions

1 React native navigation v6 authentication flow

Tue, Jan 4, 22, 00:00, 2 Years ago

1 how to make slide transition smoother and not instant on swiper update - Swiper API

Thu, Oct 21, 21, 00:00, 3 Years ago

1 NextJS calling API in a form submit

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React setState inside componentDidUpdare leads to Maximum update depth exceeded

Thu, Dec 10, 20, 00:00, 4 Years ago

1 How to export all components in index.js?

Sat, Jul 4, 20, 00:00, 4 Years ago

View All

answered 9 Years ago laytonlamontm · Accepted Answer

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).