3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Visual Studio 2017 ではじめるTypeScript(2) ~プロジェクトの作成と実行~

Last updated at Posted at 2018-12-05

はじめに

前回は環境構築で終了したので、今回はプロジェクトの作成と、実際に実行するところまで進めていきます。

プロジェクトテンプレートのダウンロードとインストール

なぜかデフォルトではTypeScript(以下TS)のプロジェクトテンプレートが存在しないので、まずはオンラインからプロジェクトテンプレートをダウンロードします。
01.png
を選択し、オンラインの右上の検索窓に「TypeScript」と入力し、「TypeScript HTML Application Template」を選択します。
02.png
するとインストーラーが起動するのでVSを終了させ、テンプレートがインストールされるのを待ちます。
03.png

プロジェクトの作成

テンプレートがインストールされたら、VSを起動しプロジェクトを作成します。
左側のツリーに「TypeScript」があるので、その中から「HTML Application with TypeScript」を選択します。
04.png

途中、TSのバージョンを更新するか聞かれると思うので、「はい」を選択してください。
(ここで表示されるTSのバージョンは端末にインストールされているTSのバージョになります)
05.png

実行

まあとにかく実行ということで、「F5」キーか、メニューを選択して実行してみます。
06.png
ここで選択されるブラウザですが、OSの規定のブラウザがデフォルトで表示されるかと思いますが、枠内の↓矢印で変更可能です。
07.png
で、実行結果ですが、ただの時計が表示されます。
08.png

JavaScriptファイルはどこ?

ブラウザを閉じるなりしてデバッグを終了させます。
ここで、ソリューションエクスプローラーを見るとTSファイルしか存在しません。TSをトランスパイルしたJavaScript(以下JS)ファイルが見当たりません。
09.png
(トランスパイルとは、ある言語で書かれたコードを元に、別の言語のコードを生成することらしいです。)
そんなときはソリューションエクスプローラーの「すべてのファイルを表示」をチェクします。
10.png
しっかりとJSファイルが作成されていますね。
TSファイルとJSファイルを見比べると「へぇ~、こんな感じに変換されるんだ~。」と思うかと。

おわりに

今回はこれで終わりです。
コードを1行も書くことなく、ここまでできてしまうんですね。さすがVS!なのかな?
次回からはTSの入門に進みたいと思います。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?