CODEWITHSUNDEEP
javascriptdomtypescript
johnny
johnny

Reputation: 19735

Is TypeScript's purpose to be used for manipulating the DOM like JavaScript is?

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?

Upvotes: 8

Views: 7717

Answers (3)

oreoorbitz
oreoorbitz

Reputation: 109

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.

Upvotes: 0

Yago Lopez
Yago Lopez

Reputation: 79

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

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074335

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.

Upvotes: 9

Related Questions