ここ最近ずっと導入したいと考えていたものの、中々手を出せずにいたTypeScriptの導入に乗り出しました。Web制作用のひな型として使っているgulp + webpack + babelなプロジェクトを、JavaScriptからTypeScriptに置き換えるという内容です。

ひとまずgulpでビルドが通るところまではできたので、そこに至るまでにハマったポイントと解決方法をメモっておきます。

TypeScriptのインストールと設定

何はともあれTypeScriptをインストールします。

$ npm i -D typescript

続いてプロジェクトのルート直下にtsconfig.jsonファイルを作成します。

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "es2015"
  },
  "moduleResolution": "node"
}

webpackの設定

webpackもTypeScript用に設定の変更が必要です。まずはTypeScript用のloaderであるts-loaderをインストール。

$ npm i -D ts-loader

続いてwebpack.config.jsを編集します。

module.exports = {
  mode: 'development',
  entry: {
    app: ['./app/src/ts/app.ts']
  },
  output: {
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'ts-loader'
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    },
    extensions: ['.ts', '.webpack.js', '.web.js', '.js']
  },
  devtool: 'eval-source-map'
};

変更点ですが、loaderをts-loaderにしたり、entryポイントを.jsから.tsに変えたりしています。

また、gulpfile.jsの方でもsrcで読み込むファイルをjsからtsに変えておきました。

node_modulsのエラーを解消

ビルド周りの設定はできたので、続けてjsをtsに置き換えておきます。おもむろに拡張子を単純にjsからtsに変更してみると、エディターに大量のアラートが表示されました。まず目につくのはvue、jquery、howlerなど、importしているモジュールのエラーでした。

これらのモジュールが見つからないという趣旨の警告が出ていているのですが、調べてみるとその要因はモジュールの型定義ファイルがないためのようでした。有名どころのモジュールは@types/モジュール名として型定義ファイルが公開されているとのこと。そこで、以下のコマンドで型定義ファイルの追加を試みました。

$ npm i -D @types/gsap
$ npm i -D @types/howler
$ npm i -D @types/imagesloaded
$ npm i -D @types/jquery
$ npm i -D @types/slick-carousel
$ npm i -D @types/vue

ほとんどが@typesに存在していてインストールできましたが、@types/scrollmagigcだけは型定義ファイルが見つかりませんでした。ないものは自分で定義ファイルを用意する必要があるため、/src/@typesディレクトリを作り、そこにtypes.d.tsファイルを作って以下の内容を記述しました。

declare module 'scrollmagic';

これですべてエラーが消えるかと思いきや、なぜかVueのimportだけモジュールが見つからないという警告を出し続けています。不思議に思って@types/vueのページを見ると「Vue.jsは独自の型定義を提供するため、@types/vueをインストールする必要はありません！」という内容が赤字で書かれているじゃありませんか。

そこで、$ npm uninstall @types/vue をしてから、先ほど作成した/src/@types/types.d.tsファイルにvueも追記してあげました。こうです↓。

declare module 'vue';
declare module 'scrollmagic';

ここまでやってようやくimportのエラーが解決。これでようやくgulpのビルドが通るようになりました。引き続きTypeScriptへの置き換え進めていく。