TypeScript + webpack で kintone カスタマイズ環境を構築する際の覚書です。

なぜTypeScriptを使うのか？

kintoneのカスタマイズをJavaScriptでやっていると、単純なところで思ったように動かなくて時間がかかる。

例えば下記のようなところ。

一覧画面のViewIDを取得する場面で、レコード一覧画面の表示後イベントのeventプロパティ中のviewIdは数値。
一覧の設定の取得APIを使って取得する一覧のID（views.（一覧名）.id）は文字列。

// views.一覧名.id は文字列。 record.viewIdは数値
if (views.一覧名.id === record.viewId) { return; } // 特にエラーは出ない。常にfalseなのでreturnすることは無い。

1.と2.をif文で比較しようとしても、エラーにもならず何か上手くいかないな？と結構悩む。
しばらくして、多分型が違うのかな？と気づいてドキュメントを確認して、型変換して。。。
それなら、型付できる言語で書きたいですよね。

次のコードの様に、自身で値を設定しているのなら間違いに気づくと思いますが、外のライブラリなどから値をセットしてとなると、なかなか気づけない。

const num = 100;
const str = "100";
if (num === str) {
    console.log("match!");
} else {
    console.log("unmatch!");
}

TyepScriptのコンパイラを通すと、上記もエラーとして知らせてくれます。

$ ./node_modules/.bin/tsc ./ts/test01.ts
ts/test01.ts:3:5 - error TS2367: This condition will always return 'false' since the types '100' and '"100"' have no overlap.

3 if (num === str) {
      ~~~~~~~~~~~

例があまり良く無いですが、もっと言うとこの様に書いてコンパイラを通さなくても分かる方が気持ち良い。

const num: number = 100;
const str: string = "100";

let matchStr = function testMatch (num: number, str: number) :string {
    if (num === str) {
        return "match";
    } else {
        return "unmatch";
    }
}
console.log(matchStr(num, str));

./node_modules/.bin/tsc ./ts/test02.ts
ts/test02.ts:11:27 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

11 console.log(matchStr(num, str));

こんな感じで、お知らせしてくれると嬉しい。

参考リンク