イイダリョウのブログ。JSGulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしました。今回はAltJSのTypeScriptをコンパイルします。クモのようにコツコツと※参考:メタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)まとめqiita.comフォルダ作成→移動→package.json作成→Gulpインストールメタ言語選定編の記事でも書いた通り、AltJSはTypeScriptがスタンダードなようなのでこれに取り組む。クモのようにコツコツと前回までと同様、おなじみの手順でコンパイル環境を準備する。-vコンパイルを実行したいフォルダを作成する。今回は「gulp_ts」とする。Qiitaまた、上記の記事にはGulpを使わず「tsc」というコマンドを使う方法も書かれていた。tscはTypeScriptを開発しているMicrosoftが提供しているツール。output.簡易なコンパイルならこれで済みそう。パッケージ(gulp-typescript)をインストールする今回はこれまでと同様Gulpでコンパイルしたいので、Gulpのパッケージ「gulp-typescript」をインストールする。gulp-typescriptインストールに成功するとpackage.jsonに追記される。}ファイルを作る「gulp_ts」フォルダにファイルを追加する。このような構成gulp_ts├css│└common.css├js│└common.ts├index.html└gulpfile.jsjsフォルダの中のファイルの拡張子は.jsではなく.ts。これがTypeScriptで書かれたファイル、と認識される。gulpfile.jsにgulp.task()を記述Sass(SCSS)編の内容をベースに参考記事の内容を反映している。.pipe(gulp.dest('js'));});変数gulpでgulpを読み込む変数typescriptでgulp-typescriptを読み込むgulp.task()メソッド実行。引数はts、第二引数は無名関数(引数はなし)無名関数の中はgulp.src().pipe().js.pipe()とチェーンになっているsrc()の引数はcommon.tsのパス一つ目のpipe()の引数はtypescript()で、中のオプションはなしjsというプロパティが入るjsプロパティの次のpipe()の引数はgulp.dest()でjsフォルダに吐き出すSassとの違いはメソッドチェーンの中でjsというプロパティが入る部分。以前、AltJSの記事で書いた「TypeScript」の内容を元に作成。Settingの旅、JS編第3回。TypeScriptは静的型付け、クラス定義、ES対応などの特徴があるそうな。<br>CoffeeScriptと違ってJSの延長上の記法なので読み書きしやすそう。<li>変数に「:」で静的型付けができる。<p>素のJSでもそのまま行けるようなのでJSからの書き換えもしやすそう。src="js/common.js"></script></body></html>bodyの閉じタグの直前でjsファイルをリンクしているが、まだ該当ファイルは存在しない。AltJSの記事からcommon.tsファイルを作成する。'object'に存在しません。むむ?addEventListenerは存在しないってどういうこと?JSの正規なクリックイベントなんだが。こちらの記事ではグローバルにTypeScriptをインストールしている。PSYENCE:MEDIA入れてみる(アクセス権限でsudoが必要だった)→結果変わらず。typescriptclickを変数に入れてEventName.CLICKという形で呼び出す?→結果変わらず。Qiita変数btnの頭に<HTMLElement>を加える→結果変わらず。(!btn)でbtnが見つからなかった場合の処理を書く→結果変わらず。document.getElementById('btn');変数btnの型の指定をなくしてみる。false);ブラウザで動作確認ブラウザで動作確認してみる。TypeScriptアラート2:こんにちは、型スクリプトアラート3:JS編は第3回ですアラート4:おしまいCodePenと同じ挙動になった!最後にTypeScriptを初めてコンパイルできました!今回はエラーが起きてなかなか苦戦しました。CodePenでは問題なかった書き方もコンパイルではエラーになる。厳密なことがわかりました。これによって未然にエラーを防ぐ型を静的にするメリットはこの記事がわかりやすかったです。Qiitaハリー先輩「変数や関数のあるべき使い方を自分で定義して」ハリー先輩「その通りに実装せんと前に進めへん」ハリー先輩「これだけでちょっとしたテスト駆動開発みたいになるやん?」しかも、TypeScriptが用意する型だけでなく自分で独自の型も設定できると!(例にある自動販売機に入れられる硬貨、紙幣とか)エラーコードの読み方にもう少し慣れたらもっとメリットを感じることができると思います。memo複数人作業の規模になるとより有効になるように思いました。次回はBabelのコンパイルについて調べようと思います。22:40Tweet関連記事2020-01-11【JS】BabelでESをコンパイルするJSコンパイル系の続きで今回はBabelです。前回はAltJSのTypeScr...2019-12-17【CSS】Sass(SCSS)をGulpでコンパイルしてみるGulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパ...2019-11-29【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)Gulpの続きです。前回はローカルにインストールができました。...2019-11-14【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討したメタ言語のコンパイル環境を作る!続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。