webpack入門_typescript

公式のドキュメントを参考にwebpackをTypescriptに対応させたいと思います。

まず以下のコマンドでtypescriptとts-loaderをインストールします。

npm install --save-dev typescript ts-loader

次にtsconfig.jsonを作成します。

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

それからwebpackに以下の設定を追加します。

<!-- 省略 -->

module.exports = {
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
<!-- 省略 -->
  module : {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
<!-- 省略 -->

次にビルド対象のtsファイルを作成し、これをエントリーポイントに追加しておきます。

index2.ts

import * as _ from 'lodash';

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user1 = new Student("Jane", "M.", "User1");
let user2 = new Student("Jone", "D.", "User2");

document.body.innerHTML += _.join([greeter(user1), greeter(user2)], '<br />');

それからビルドを実行してみるとコンソールに以下のように出力されエラーになることが確認できます。

[tsl] ERROR in /Users/***/webpack-demo/src/index2.ts(1,20)
      TS7016: Could not find a declaration file for module 'lodash'. '/Users/***/webpack-demo/node_modules/lodash/lodash.js' implicitly has an 'any' type.
Child html-webpack-plugin for "index.html":

これについてtypescriptは静的型付けの言語になっているのですが、javascriptは動的型付け言語で既存のEcmascriptで作られたライブラリも型の情報がないのでそのままでは型の情報がなく利用することができないためです。

型定義ファイルを作成することで既存のライブラリをTypescriptでも使用可能になるのですが、自分で作成しなくても有名なものについては@typesのパッケージで管理されています。
lodashであれば以下のように@types/lodashを指定してインストールすればTypescriptでも利用可能になります。型情報はビルド時に必要なものなので--save-devでインストールします。

npm install --save-dev @types/lodash

@typesのパッケージで管理されているかどうかは以下のページで確認できます。
https://www.npmjs.com/~types

@types/lodashをインストールしたらビルドに成功しブラウザで表示して確認できるかと思います。