Help us understand the problem. What is going on with this article?

Visual Studio Code+TypeScriptでJavaScriptの開発をしてみる(超入門)

私はvimが大好きです。
JavaScriptを直接書くなら迷わずvimを起動します。
しかし、時代の波はJavaScriptを直接書くことを許してくれないようです。
BabelやCoffeeScriptなどで開発したソースをトランスパイルすることでJavaScriptにする。(各種ブラウザやバージョンに対応するのは人間にはシンドイ世の中になってきました)
そんな中、普段からVisual Studioを使用する機会が多い私はVSCodeを使いたいです。
ということはTypeScriptの出番ですね。

TypeScriptからJavaScriptを生成するまでの手順を簡単にまとめます。

Visual Studio Codeのインストール

公式サイト:Download Visual Studio Codeからdownload→インストールでOK。
日本語はインストール後に「拡張機能」から「Japanese Language Pack for Visual Studio Code」をインストールしてvscodeを再起動すればOK。
ちなみに、Language Packには『インストールが完了したら、Japanese Language Pack を読み込むために locale.json 内で "locale": "ja" を設定します。』という説明があるのですが、自分はインストール+再起動だけで日本語になったんですよね・・・?
あれ、localeの設定って最近は必要無い?

npm, Node.jsのインストール

npmとNode.jsをインストールします。
npmとNode.jsのバージョンを切り替えて使用できるようにしたい場合はnvmあたりを使用しましょう。
インストール方法は既に先人の方々が説明してくれているので。。。

npmとNode.jsを直接インストールする場合

Windowsでのnode.jsとnpmのインストール方法
Node.js Windows 版バージョン 10.15.3 のインストール
などを参考にインストールしましょう。

バージョンを切り替えられるようにする場合

nvm + Node.js + npmのインストール
nvmを使ったNode.jsのインストール&バージョンアップ手順
が参考になると思います。

準備(お試しテスト環境)

ここまででvscodeとnpm+Node.jsが使えるようになりました。
これだけで開発環境は整っています、後は使い方だけです。
という事で、お試しでtsからjsを生成してみます。(このTypeScriptで書かれたプログラムからJavaScriptのコードを生成することをトランスパイルといいます)

ディレクトリ準備

どこでもよいので以下のようなディレクトリを用意します。

/ts_test
   中身は空

はい、用意というかディレクトリ切っただけでした。

package.jsonの生成

以下のコマンドはvscodeからも実行出来ますが、個人的にコマンドはプロンプトから実行するのが好きなので(CUIバンザイ)コマンドプロンプトから実行する方法で説明します。

  1. コマンドプロンプトを起動
    cmd.png

  2. ts_testディレクトリに移動

  3. npm initを実行
    npm_init.png

  4. とりあえずテストなのですべて未設定でOKにする
    npm_init_input.png

すべて完了したらディレクトリを確認します。
dir.png
無事package.josnが生成されています。
package.jsonが何か?という疑問に関して、これまた先人の方が詳しく説明してくれているので、
npmでライブラリをインストールする方法
package-lock.jsonの役割とは?【Node.js】
お任せしたいと思います(おいおい)

typescriptのインストール

package.jsonが出来たところ、Typescriptを使うためのパッケージをインストールしたいと思います。

npm install -D typescript

まず-Dですが、これは--save-devを短くしたものです。
--save-devで指定されたパッケージはpackage.josnのdevDependenciesに追加されます。
devDependenciesは開発時のみ使用するパッケージを指します。

typescritpなどのパッケージのインストール方法の説明で多いのが-gを付けてインストールする方法ですが、、、-gはグローバル環境にtypescriptをインストールしてね。という設定になります。
個人的にはネットワーク速度も速く、HDDも余裕のある現在、パッケージはプロジェクト毎にインストールした方が環境に依存しないpackage.jsonを作れるため良いのではないかと思っています。
(-gでインストールしている場合、別のどこかでインストールされたパッケージが既に入っているから自分の環境だと問題ない。なんて現象も起きたりします)

tscコマンドをnpmで実行出来る様にする

しかし!
-gでtypescriptをインストールしていない場合、以下のコマンドが使えません。

tsc -v

これは、グローバル環境にtypescriptをインストールしていないため、tscコマンドが解決されていないため発生する現象になります。
そのため、tscコマンドを実行するために以下の設定を行います。

package.json
  "scripts": {
    "tsc": "tsc",         <--------これを追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },

package.jsonの設定後に以下の様にコマンドを実行します。

npm run tsc -- -v

今度はちゃんとバージョンが表示されました。
tsc_v.png
scriptsに"tsc"を追加したことにより、npm runコマンドでtscが実行出来る様になりました。
"tsc"だけで実行するより不便かもしれませんが、環境を汚さないことを考えたら許容できないですか?
尚、npm run tscの場合、引数は--の後に渡す必要があるため-- -vとなっています。

tsconfig.jsonの生成

これでtscコマンドが使えるようになったので、次にtsconfig.jsonを生成します。

  1. npm run tsc -- --initを実行
  2. vscodeからtsconfig.jsonを編集

編集内容はテストなのでts_testディレクトリ直下のtsファイルをindex.jsにまとめることにする。

tsconfig.json
"compilerOptions": {
    "outDir": "./",         <---- コメントを外す
},                          <---- 意外と忘れるカンマの追加
"exclude": [                <---- これを追加
    "node_modules"
]

index.tsを新規作成

これまたテストなので適当な内容を準備する。

index.ts
console.log("test");

ビルドしてみる

vscodeからビルドをする。
build.png
build2.png

jsファイルが生成された

ビルドが正常に終了するとindex.jsファイルがディレクトリ直下に生成される。
exp.png

最後に

ここで実行した内容は単純にts→jsを体験してみようという内容になっています。

そのため実際の開発では、ディレクトリ直下のtsファイルを全部読んで、ディレクトリ直下にjsファイルを生成する。
なんて乱暴なことはないので、srcディレクトリ以下にtsファイルを管理して、assetsなりbuildなりのディレクトリに使用するjsファイルを生成する。
なんて流れになると思います。
また、jQueryを使用するためにjquery用の型定義ファイルであるindex.d.tsを追加する。ということも往々にしてあると思います。

次はもっと開発に沿った内容でまとめたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away