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?

2
  • 7
    You use TypeScript for anything you use Javascript for. TypeScript is Javascript + static type checking; it doesn't dictate any specific usage.
    – deceze
    Commented Apr 4, 2017 at 14:52
  • @deceze I'm saying I can't see anyone using it for that, not that you can't.
    – johnny
    Commented Apr 4, 2017 at 16:36

3 Answers 3

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.

4
  • 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
    Commented Apr 4, 2017 at 16:34
  • 3
    @johnny: The samples page 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. Commented Apr 4, 2017 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. Commented Apr 4, 2017 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... Commented Apr 4, 2017 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

0

So my understanding of this question is, do people actually use typescript for DOM manipulation? The answer, is yes, but not really.

At the time of writting this, typescript is popular in React, Angular, and other frameworks and libraries, but this points three downsides to using typescript for DOM manipulation, state management, build steps, and project.

First is state. When pulling state from the DB, you can make the assumption that the type of data will not change within the database (if it does, jesus christ, why?), and from there you can safely use a declerative approach within a modern JS framework to generate your HTML from the state that is controlled in your JS/TS.

With DOM manipulation, its more tricky, yes you can controll and view your HTML to have an awareness of the types that you will be pulling, and if you keep a certain strictness in design of your TS code and your HTML, you can avoid annoying gotchyas, and improve your code by being more strict and structured. You should also implement unit testing for local logic, and E2E and then we can all join hands and be happy. In pratice, deeling with getting your state from querySelectors, and being implementing a strict structure to manage that within typescript is tedius if the scope of your project is small, and if the scope of needed dynamic functionality is large, then you would probably want to use a framework, which isn't exactly DOM manipulation.

Imagine you are like 90% of web developers, you are hired to do create a popup in a wordpress site, and are being a payed a flat rate, you decide to use typescript and no framework, you setup a straight foward build process using gulp to transpile your typescript, all good. 2 months later your client comes back to you angry because they hired a new developer who is using a diferent OS than you and can't use your build process, oopsy!

If you are going to use a build process, you should probably only do it for large projects where typescript is really needed, if the project is really large and complex, you probably aren't going to be using just vanilla typescript though, you probably will be using a framework.

You can use typescript for DOM manipulation, but you can also just use JSdocs and call it a day, so thats why you don't see as much typescript being used for DOM manipulation.

I am aware this question was asked 7 years ago, and the landscape is diferent, but I think the above applies for the current development landscape.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.