【ワレコの講座】JavaScriptをTypeScriptに移植でうっかりミス【解決】

以下、ワテ用の備忘録なので、皆さんにはあまり役に立たないかもしれない。

では、本題に入ろう。

JavaScriptのプログラムが収拾付かなくなって来た
結論
1. TypeScriptを習う

JavaScriptのプログラムが収拾付かなくなって来た

このところ、猛烈にTypeScriptを習得している。

Visual Studio 2013の環境で過去に作成したJavaScriptのソースをTypeScript化しているのだ。

特にWarekoMapsプロジェクトなどを。

その理由は、JavaScriptのソースコードが2万行くらいになって来て、行き当たりばったりで機能を拡張してきたので収拾がつかなくなったのを修正しているのだ。

具体的に言うと、

グローバル変数名とローカル変数名が同じだったり
関数の引数にもグローバル変数と同じ名前のものがあったり
行き当たりばったりで即席で付けた関数名の規則性の無さ
同じような機能の関数が複数の場所にあったり

と、もう、訳分からない状態になってしまったからだ。

悪いプログラミングの手本のような状態だ。

ワテの場合、CやC++などでコードを書いていると良くそういう状態になるのだが、通常は、もう少し早い段階でこういう問題は整理整頓してコードをスッキリさせている。

というよりは、ビルドでエラーが多発して修正せざるを得ない場合が多い。

ところが、JavaScriptはスクリプト言語なので、プログラムの中に多少問題があっても実行出来てしまう。

問題の箇所を実行した時には、その問題が発覚する場合もあるがそれまでは気付かない事も多い。

その結果、取り敢えず動くからと言う理由で、整理整頓をしないまま機能を継ぎ足して行った結果、こんな状態になってしまった。

あかん。

で、JavaScriptをオブジェクト指向に拡張したTypeScriptを使って書き換えているのだ。

で、先日、こんな失敗をした。

ワテの失敗

こんな感じの JavaScript のコードがあった。

"use strict";
 
window.onload = function () {
    func1(2);
}
 
function func1(n) {
 
    if (n == 1) {
        var obj = { 'parm1': 100 }
    } else if (n == 2) {
        var obj = { 'parm1': 200, 'parm2': 'オプションデータ' }
    } 
    func2(obj);
}
 
function func2(obj) {
    alert(JSON.stringify(obj));
}

ファイル：　JavaScript.js

つまり func2(obj) はオブジェクト型の引数を取るのだが、objの中の要素の数が異なる場合がある。JavaScriptなら文法的には全く問題ない。

で、このコードを拡張子 .ts のファイル (TypeScript.ts) にコピペすると、二番目の var obj のところで

エラー 386 Subsequent variable declarations must have the same type. Variable ‘obj’ must be of type ‘{ ‘parm1′: number; }’, but here has type ‘{ ‘parm1’: number; ‘parm2′: string; }’.

となる。

つまり、TypeScript の文法では一旦 obj という変数を宣言しているので、それとは別のデータ構造の変数 obj を別の場所で宣言する事は出来ないようだ。

なので、TypeScript.ts の中の func1(n) を即席で修正して、

function func1(n) {
 
    if (n == 1) {
        var obj = { 'parm1': 100 }
    } else if (n == 2) {
    //var obj = { 'parm1': 200, 'parm2': 'オプションデータ' }
      var obj2 = { 'parm1': 200, 'parm2': 'オプションデータ' }
    } 
    func2(obj);
}

ファイル：　JavaScript.ts

こんなふうにした .ts ファイルを作成した。

修正と言うよりは、単にエラーを回避したかっただけなので、手抜きでこんな事をしたと言うのが正しい。

これでエラーせずに TypeScript から JavaScript の生成が出来るようになるが、見ての通り n=2 で関数が実行された場合には、obj が未定義のままなので func2(obj) でエラーした（この例ではエラーしないが、実際の状況でエラーした）。

数十個の JavaScript ファイルを .ts 化している最中に、とりあえずエラー回避の為に即席でこういう修正をしたのだが、それが失敗だった。あとで修正するつもりだったのだが、忘れてしまったのだ。

分かってみると単純なミスなのだが。

正しくは、以下のように修正するべきだった。

        var obj;
        if (n == 1) {
            obj = { 'parm1': 100 }
        } else if (n == 2) {
            obj = { 'parm1': 200, 'parm2': 'オプションデータ' }
        }
        func2(obj);

この原因を突き止めるのに半日くらい掛かってしまった。

その理由は、Visual Studio で TypeScript をやるには、別の問題があるようなのだ。