TypeScript + Vue.js + Webpack の環境構築でクッソはまらないように(TypeScript導入まで)

はじめに

TypeScript + Vue.js を使って何かアプリを作ってみたいと思ったのですが、環境構築でくっそハマったので、僕のような被害者を出さないように久しぶりに筆をとった次第です。

環境は、以下の通りです。

  • centOS 7.3.1611
  • Node.js 8.9.4
  • npm 5.3.0
  • TypeScript 2.7.1
  • Vue.js 2.5.13
  • webpack 3.11.0
  • webpack-dev-server 2.11.1

したいこと

  • TypeScript でコーディング
  • Vue.js を使う
  • webpack でビルドする
  • webpack-dev-server を導入
    (ソースの変更時に自動コンパイルしてくれるようにする)
  • vue.jsの公式ガイドをTypeScriptでできるようにする!

環境構築

の前に

まず、node.jsをインストールしておきます。
ここは、検索すれば詳しい解説がいくらでも見つかるので割愛。
コンソールで node -v を叩いてバージョンが表示されればインストールできています。
node.js をインストールするとパッケージマネージャの npm も一緒にインストールされているはずなので、そちらも確認しておきましょう。

[vagrant@localhost ~]$ node -v  
v8.9.4  
[vagrant@localhost ~]$ npm -v  
5.6.0  

TypeScript の導入

ではTypeScriptを導入していきます。
まずプロジェクト用にディレクトリを作ります。

[vagrant@localhost ~]$ mkdir test_ts
[vagrant@localhost ~]$ cd test_ts/

作成したディレクトリに移動したらコンソールで npm init を叩いて package.json を作成します。
色々と聞かれますがとりあえず、全てyesでいいです。

次に、npmでローカル環境にTypeScriptをインストールします。

[vagrant@localhost test_ts]$ npm i -D typescript
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test_ts@1.0.0 No description
npm WARN test_ts@1.0.0 No repository field.

+ typescript@2.7.1
added 1 package in 0.782s

package.json をちゃんと書きなさいよという警告が出ていますが、無視します。
iinstall の略、 -D--save-dev の略で、package.json の "devDependencies" にインストールしたモジュールが追加されます。
開発用に使うツール等は -D を指定してインストールするらしいです。

インストールができたら、$(npm bin)/tsc --init で tsconfig.json を作ります。
ローカール環境にインストールしたバイナリにはパスが通っていないのでインストール場所を$(npm bin)/で指定してやります。
できた tsconfig.json にTypeScriptをJavaScriptにトランスパイルする際の設定を書きますが、今はそのまま触らずにおきます。

これでTypeScriptが使えるようになりました。
早速使ってみましょう。
test_ts配下にmain.jsというファイルを作り、以下のようなコードを書いてみます。

let msg: string  = 'Hello World!';
console.log(msg);

tsファイルをjsファイルにトランスパイルするにはtscコマンドを使います。

[vagrant@localhost test_ts]$ $(npm bin)/tsc main.ts

main.jsができたら中を確認してみます。

var msg = 'Hello World!';
console.log(msg);

ちゃんとトランスパイルされていますね。
TypeScriptの導入はこれでokです。

思いの外長くなってしまったので一旦切ります。