How to handle DOM manipulation relevant javascript in the typescript?

Question

I am new in Typescript, actually, I would like to implement following type of javascript within typescript file.

http://jsfiddle.net/SgyEW/10/

$('.toggler').live('click', function() {

    var idname = $(this).attr('name');

    $('.content').hide();
    $('#' + idname).show();
});

#box {
    border: 1px solid gray;
    background-color: #f3f3f3;
    -webkit-transition: all 1s linear;
}
.content {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div>
    <button class="toggler" name="content1">content 1</button>
    <button class="toggler" name="content2">content 2</button>
    <button class="toggler" name="content3">content 3</button>
</div>

<div id="box">
    <div id="content1" class="content">
        Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend. Nunc quis justo.
    </div>
    <div id="content3" class="content">
        Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend. Nunc quis justo.Ut nulla. Vivamus bibendum, nulla ut congue fringilla, lorem ipsum ultricies risus, ut rutrum velit tortor vel purus. In hac habitasse platea dictumst. Duis fermentum, metus sed congue gravida, arcu dui ornare urna, ut imperdiet enim odio dignissim ipsum. Nulla facilisi. Cras magna ante, bibendum sit amet, porta vitae, laoreet ut, justo. Nam tortor sapien, pulvinar nec, malesuada in, ultrices in, tortor. Cras ultricies placerat eros. Quisque odio eros, feugiat non, iaculis nec, lobortis sed, arcu. Pellentesque sit amet sem et purus pretium consectetuer.
    </div>
    <div id="content2" class="content">
        Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend. Nunc quis justo.Ut nulla. Vivamus bibendum, nulla ut congue fringilla, lorem ipsum ultricies risus, ut rutrum velit tortor vel purus. In hac habitasse platea dictumst. Duis fermentum, metus sed congue gravida, arcu dui ornare urna, ut imperdiet enim odio dignissim ipsum. Nulla facilisi. Cras magna ante, bibendum sit amet, porta vitae, laoreet ut, justo. Nam tortor sapien, pulvinar nec, malesuada in, ultrices in, tortor. Cras ultricies placerat eros. Quisque odio eros, feugiat non, iaculis nec, lobortis sed, arcu. Pellentesque sit amet sem et purus pretium consectetuer.Ut nulla. Vivamus bibendum, nulla ut congue fringilla, lorem ipsum ultricies risus, ut rutrum velit tortor vel purus. In hac habitasse platea dictumst. Duis fermentum, metus sed congue gravida, arcu dui ornare urna, ut imperdiet enim odio dignissim ipsum. Nulla facilisi. Cras magna ante, bibendum sit amet, porta vitae, laoreet ut, justo. Nam tortor sapien, pulvinar nec, malesuada in, ultrices in, tortor. Cras ultricies placerat eros. Quisque odio eros, feugiat non, iaculis nec, lobortis sed, arcu. Pellentesque sit amet sem et purus pretium consectetuer.
    </div>

By toggling the button, I would like to make some element appeared or disappeared accordingly. My question is more focused on how to implement this type of javascript with typescript? I searched a lot, was not able to find clear answer about it yet. So... Which way makes more sense between to import javascript file into typescript or implement that function as typescript? Also, is there any example DOM manipulation with typescript?

Answer 1

TypeScript IS JavaScript. The difference is the type safety. So, if you want to implement your jQuery code in ts there is nothing more to do except using the types of jQuery:

How to use jQuery with TypeScript

more about types:

What is the difference between *.d.ts vs *.ts in typescript?

Edit:

if you want this:

$('.toggler').live('click', function() {

  var idname = $(this).attr('name');

  $('.content').hide();
  $('#' + idname).show();
});

without jQuery, do the following:

let element = document.getElementByClassName('toggler')[0]

element.addEventListener('click', () => 
{
  let idname = element.getAttribute('name');

  document.getElementByClassName('content')[0].style.display = 'none';
  document.getElementById(idname).style.display = 'block';
});

This is not tested but should also work.

If you are using Angular you should use @ViewChild() for DOM manipulations:

https://angular.io/api/core/ViewChild