8

Every TypeScript example and tutorial I have found thus far is about language features, Static typing, Visual Studio, etc. I cannot find anything to tell me how I should be using it with reference to JavaScript and the DOM.

My understanding it you can use TypeScript for the DOM. But, I never see anyone using it for that. I have a set of JavaScript IIFE objects, and I want to convert them, but as these manipulate the DOM, I'm not sure what part TypeScript plays here.

As it concerns manipulating the DOM, should I be using TypeScript for this? Not can I. Is it expected that I should, given I am using TypeScript in a new Web Application Project.

I do not know this answers it, What is TypeScript and why would I use it in place of JavaScript?

Edit: I understand what TypeScript is and does. My question is more why don't I see more people using it for the DOM? Is it not supposed to be used that way with the DOM, even though it can be used that way?

Community
  • 1
  • 1
johnny
  • 19,272
  • 52
  • 157
  • 259
  • 6
    You use TypeScript for anything you use Javascript for. TypeScript is Javascript + static type checking; it doesn't dictate any specific usage. – deceze Apr 04 '17 at 14:52
  • @deceze I'm saying I can't see anyone using it for that, not that you can't. – johnny Apr 04 '17 at 16:36

2 Answers2

9

TypeScript can be used for anything JavaScript can be used for. It's JavaScript plus a layer of type information (and usually adopts newer JavaScript features fairly quickly), which is then compiled to JavaScript for deployment and use in the wild.

When using TypeScript to manipulate the DOM, you'll need type information for the DOM; see this question and its answers for more about getting DOM type information into your project.

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • The problem I have is I never see anyone using it for this. Data yes, DOM, I can't find. I admit my searching may not be great. – johnny Apr 04 '17 at 16:34
  • 3
    @johnny: The [samples page](http://www.typescriptlang.org/samples/index.html) on the TypeScript website has two jQuery samples and one d3 sample; those all involve DOM manipulation. But the kind of people who tend to use TypeScript also tend to use things like Angular, React, Backbone, etc., and so the DOM manipulation is managed by those libraries (e.g., done indirectly). Increasingly, that's the case for people writing in JavaScript, too; the MVC/MVVM/pick-your-acronym approach has proven benefits and has come on a LOT in the last few years. – T.J. Crowder Apr 04 '17 at 16:44
  • 1
    There aren't TS-specific DOM examples because TS code that manipulates the DOM is indistinguishable from JS code that manipulates the DOM. People explaining TS assume you know enough JS to do basic DOM stuff already and don't bother writing trivial examples with a higher concept count than necessary. – Ryan Cavanaugh Apr 04 '17 at 17:02
  • 1
    @RyanCavanaugh: Similar, but distinguishable. Consider: `const el:HTMLInputElement = document.getElementById("foo");` (TypeScript) vs. `var el = document.getElementById("foo");` (ES5-level JavaScript) But I think you're bang on-target about why there are relatively few: Historically, by the time you're thinking TypeScript, which was seen as a bit advanced, you're already up-to-speed on the environment. That may be less true as it's become more mainstream... – T.J. Crowder Apr 04 '17 at 17:07
2

Typescript is excelent for DOM manipulation. You get a great amount of compiler support during development time thanks to types, and save a lot of bugs hard to discover only with Javascript.

Here is a small example of dom manipulation (look at the class definition):

Link to example

This is part of a Angular Library of UI Components I have made. You can take a look here:

Material Light. UI Components for Angular 4

Yago Lopez
  • 79
  • 2
  • 8