jQueryを使ったJSをTypeScriptに変換したい

現在、JavaScriptを使いちょっとした機能を作っていますが、これをTypeScriptに移植する必要が出てきました。
一気にやる方法がよく分からなかったので、jQueryから生JSにまずは書き換えたのですが、最下部のDraggableでつまずき。
頑張ってこのままTypescriptに書き換えたく、ご教示いただければ幸いです。

<script>
var mini = $("#minimum");
var launcher = $(".launcherWrap");
var button = $(".Button");

$(button).hide();
$(mini).click(function(){
    button.toggle();
    console.log($(launcher).css('left'));
    console.log($(launcher).css('top'));
    $(button).css('left', $(launcher).css('left')) ;
    $(button).css('top' , $(launcher).css('top'));
    $(launcher).hide();
    console.log("最小化 Clicked");
});
$(button).click(function(){
    launcher.toggle();
    $(button).hide();
    console.log("表示設定 Clicked");
});
$(matomari).click(function(){
    console.log("まとまり Clicked");
});
$(kakikomi).click(function(){
    console.log("書き込み Clicked");
});
$(kakikomi1).click(function(){
    console.log("1 Clicked");
});
$(kakikomi2).click(function(){
    console.log("2 Clicked");
});
$(kakikomi3).click(function(){
    console.log("3 Clicked");
});
$(".Button, .launcherWrap" ).draggable();

<script>

<body>
    <div class="launcherWrap" id="launcher">
        <div class= "toolbox" id="matomari"></div>
        <div class="borderDiv"></div>
        <div class= "toolbox" id="kakikomi"></div>
            <a class= "tool-layer" id="kakikomi1"></a>
            <a class= "tool-layer" id="kakikomi2"></a>
            <a class= "tool-layer" id="kakikomi3"></a>
        <div class="borderDiv"></div>
        <div class= "toolbox-minimum" id="minimum"></div>
    </div>
    <div class="Button" id="btn"><span>表示設定</span></div>
</body>

.Button{
    width:100px;
    height:20px;
    border: 3px solid white;
    background-color: #0080FF;
    border-radius:10px;
    font-size:15px ;
    font-weight:bold;
    padding:10px;
    color:white;
    text-align: right;
    line-height: 20px;
}

.launcherWrap {
    width:320px;
    height: 50px;
    border: 1px solid #0080FF;
    background-color: white;
    border-radius:10px;
    justify-content: space-evenly;
    display: -webkit-flex;
    line-height: 50px;
}
#matomari{
    width:35px;
    height: 35px;
    margin:auto;
    text-align: center;
    /* margin-bottom:auto; */
    box-sizing: border-box;
    background:url("images/image007.png" );
    background-size:35px 35px;
}
#matomari:hover{
    background:url('images/image008.png');
    background-size:35px 35px;
}
#matomari:active{
    background:url('images/image009.png');
    background-size:35px 35px;
}


#kakikomi{
    width:35px;
    height: 35px;
    margin:auto;
    /* margin-bottom:auto; */
    box-sizing: border-box;
    text-align: center;
    background:url("images/image001.png");
    background-size:35px 35px;
}
#kakikomi:hover{
    background:url("images/image002.png");
    background-size:35px 35px;
}
#kakikomi:active{
    background:url("images/image003.png");
    background-size:35px 35px;
}
#kakikomi1 { 
    width:35px;
    height: 35px;
    margin:auto ;
    background:url("images/image021.png");
    background-size:35px 35px;
}
#kakikomi1:hover{
    background:url("images/image022.png");
    background-size:35px 35px;
}
#kakikomi1:active{ 
    background:url("images/image023.png");
    background-size:35px 35px;
}
#kakikomi2 { 
    width:35px;
    height: 35px;
    margin:auto ;
    background:url("images/image013.png");
    background-size:35px 35px;
}
#kakikomi2:hover{
    background:url("images/image014.png");
    background-size:35px 35px;
}
#kakikomi2:active{ 
    background:url("images/image015.png");
    background-size:35px 35px;
}
#kakikomi3 { 
    width:35px;
    height: 35px;
    margin:auto ;
    background:url("images/image018.png");
    background-size:35px 35px;
}
#kakikomi3:hover{
    background:url("images/image016.png");
    background-size:35px 35px;
}
#kakikomi3:active{ 
    background:url("images/image017.png");
    background-size:35px 35px;
}

#minimum{
    width:35px;
    height: 35px;
    margin:auto;
    /* margin-bottom:auto; */
    box-sizing: border-box;
    background:url("images/image004.png");
    background-size:35px 35px;
}
#minimum:hover{
    background:url("images/image005.png");
    background-size:35px 35px;
}
#minimum:active{
    background:url("images/image006.png");
    background-size:35px 35px;
}
.borderDiv {
    background: #97938a;
    display: block;
    width: 2px;
    height: 30%;
    top: 0;
    /* bottom: 0; */
    margin-bottom: auto;
    margin-top: auto;
}

補足があります。
・環境（コンパイラー、モジュール等）は既に整っており、進行中プロジェクトの中に組み込むサンプルコンテンツを、自分がjsで作ってしまったことが、事の発端であります。
・html,cssを追加しました。
よろしくお願い致します。

m.ts10806

2019/02/28 02:47

そもそもどのような機能(目的)を実現したコードなのか、仕様や要件を具体的に記載されたほうが良いと思います。仕様を知らない他人が単に置き換えたものがそのまま仕様どおり動くとは限りません。また、「jQueryから生JSにまずは書き換えた」とありますが、提示されたコードはjQueryのものではないでしょうか。

m.ts10806

2019/02/28 02:49

あの「ちょっとした機能」の方で、「それって何の機能なの」ということを書いて欲しいのですが。。

YHoshi

2019/02/28 02:54

コメントありがとうございます。質問自体が雑になってしまい、大変失礼致しました。 htmlとcssを追加しましたので、ご参考頂けますと幸いです。また、scriptにつきましては書き換えたjsよりも、元々のjquery+jsを記載した方が jquery+js =>js => ts =>jquery+ts　といった工程を省略が可能かと思い、 jquery+tsの書き方を御指南頂きたく、素のまま記載した次第です。

行動規範の内容に同意します

回答3件

いや･･･jQueryをTypeScriptにするんじゃあねぇ･･･！！
"jQueryをTypeScriptで書けばええ"のじゃ･･･！！

jQueryとjQueryUIのdtsはGitHubにあるが、第三者が作った型定義ファイルだから気合で追従してるだけだし、型定義が間違ってるかもしれない。まあ、それはご愛嬌ということで
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/JQuery.d.ts
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jqueryui/index.d.ts

投稿2019/02/28 03:41

編集2019/02/28 03:52

退会済みユーザー

総合スコア0

ベストアンサー

draggableはjQuery-uiまで絡むので完全移植は難しいですね
たんにイベントをを拾って自作するならMDNにサンプルが上がっています

DragEvent
drag(サンプルあり)

投稿2019/02/28 03:01

yambejp

総合スコア114839

手軽な方法は、そのjavascript（scriptタグ以外）を拡張子tsで保存してください。
基本的にそれだけでTypescriptです。
matomari、kakikomi、kakikomi1などが未定義なのでそこは定義してください。
draggableはjquery-uiですかね？

とにかくnpmでjQueryとjQuery UIを取得しましょう
そして型定義を取ってきましょう。

npm
1npm i -D @types/jquery @types/jqueryui

jQueryとjQuery UIをrequireなりimportなりしてください。
エラー、警告などは消えて、コンパイルも通ると思います。

あと必要なのは呼び出し方ですね。
モジュール化(export)して呼ぶのか、直接DOMContentLoaded書いて、エントリーポイントにしてしまうのか。
コンパイラー、モジュール等、環境、プロジェクトの方針等よくわからないので最終的な仕上げ方がよくわかりませんが、今回はなんちゃってTypescriptでお茶を濁すということで…

投稿2019/02/28 04:22