TypeScript勉強中に起こったエラー一覧

1.TypeScriptからJavaScriptにコンパイルされない

TSからJSコンパイルコマンドを打ってもJSが作成されるだけで中身がなかった。プロパティの参照が違ったりしたが大きな原因はHTML5がQuirks Mode（互換モード）でレンダリングされてしまっていた事。古い方になってしまっていた。ローカル環境で file:// プロトコルを使用してHTMLを開くと、Quirks Mode が発生することがあるみたい。Visual Studio Code の Live Server を使用して解決。これを使った瞬間にJSへコンパイルもされた。

2.npm startしても実行されない

エラーが出てしまっていた。npmはインストール確認済cat package.jsonで確認したらsrartがうまく反映されていなかった。保存を押して解決。30分ほどで解決したがカンマもなかった。

3.add関数がうまく動かない

エラーが出て出力されない。returnが2つ・カンマがドット・スペルミスもあったがそれらを修正し正しい構文にしても動かなかった。原因は誤った{}スコープの配置により意図通りの挙動になっていなかった。入れ子やelseのスコープに対する{}を正確に配置すること

function add(n1: number, n2:number, showResult: boolean) {
    // if (typeof n1 !== 'number' || typeof n2 !=='number'){
    //     throw new Error('入力値が正しくありません');
    /// }
    if (showResult) {
        console.log(n1 + n2);
        return;
    }
        return n1 + n2;
}


const number1 = 5;
const number2 = 2.8;
const printResult = true;

add(number1, number2, printResult);

add関数
・n1（数値型）
・n2（数値型）
・showResule（真偽値）
showResultがtureの場合コンソールにn1 +n2の結果を表示する
showResultがfalseの場合、n1 +n2を戻り値として返す

• add関数
  数値同士の加算（足し算）を行い、その結果を表示または返す機能を持つ関数

• showResult
add関数に渡される引数の一つで、「計算結果を表示するかどうか」を制御するための 真偽値（boolean型）

• 真偽値（boolean型）
  プログラミングにおけるデータ型の一つで、「真」または「偽」 を表す値。true（真）とfalse（偽）の値が存在する。このデータ型は主に条件分岐やフラグとして使用されプログラムの動作を制御する

• console.log
  JavaScript および TypeScript において、プログラムの実行中に情報を出力するための関数。主にデバッグや開発中にコードの挙動を確認するために使われる。

• else
  条件分岐の一部として使用されるキーワードで、if 文で指定した条件が 成立しなかった場合の処理 を記述するために使う

• printResult
  関数addの引数showResultに渡される 真偽値（trueまたはfalse）を保持する変数。この変数の役割は、「計算結果を 表示するか、それとも戻り値として返すのか」を制御すること

ここにあったけど消したコマンド

• void
  TypeScript や JavaScript において 「値を返さない」 ことを示す特殊な型。特に関数の戻り値に使用され、「何も返さない関数」を表現。今回はこのvoidがなくても動作する。TypeScriptの型推論によるもの（TypeScriptでは、関数の戻り値の型を明示的に指定しなくても、コードの内容から自動的に型を推論する。この例では、return 文が存在しているため、TypeScriptが戻り値の型を適切に解釈している）

つまり、n1とn2を計算して「表示する」か「戻り値として繰り返す」かを指定するフラグ。今回のこのコードはshowResultがtrueまたはfalseのどちらであっても計算結果は7.8となる。ただしshowResultの値によって結果の処理方法が異なる（表示か戻り値か）

printResult = trueの場合

• 関数の流れ
  ①if (showResult)はtrue
  ②console.log(n1 + n2)が実行され計算結果7.8がコンソールに表示される
  ③returnによって関数が終了する
• 結果
  コンソール出力：7.8
  戻り値：なし（undefined）

printResult = falseの場合

• 関数の流れ
• ①if (showResult)はfalse
  ②ifの中身はスキップされreturn n1 + n2が実行される
  ③計算結果7.8を戻り値として返す
• 結果
  コンソール出力：なし
  戻り値：7.8

まとめ

• 計算結果（n1 + n2）自体は7.8で固定（n1 = 5、n2 = 2.8の値は変更されない為）
• showResultの役割
  tureの場合：計算結果を表示する
  falseの場合：計算結果を戻り値として返す

4.TypeScriptの開発環境手順ミス

個人開発する手順をまとめいざ実行したらエラー、touchコマンドがWindowsでは使えなかった。自分で作成した手順書がWindowas、LinuxやmacOSのコマンドが混合していまっていた。記事がメンションされ、その後外されていたのだが納得…。まとめ直しをする事に

• PowerShellでファイル作成するコマンドは下記

New-Item -Path src/index.ts -ItemType File

• このディレクトリ構成はコマンドではなく確認するもの

my-typescript-project/
├── src/
│   └── index.ts
├── dist/
├── index.html
├── tsconfig.json
├── package.json
├── package-lock.json

5.TypeScriptの型宣言が見つからない

カレンダーツールを作成中、main.txとindex.jsの関連付けが上手くいかず「モジュールまたは対応する型宣言が見つかりません」というエラーがTypeScript側で起こってしまった。

TypeScript側

from "./dist/index.js"がエラー箇所

import { renderCalendar, setupNavigation } from "./dist/index.js";

HTML側

同じ箇所を宣言しているHTML側のコード

 <script type="module" src="./dist/index.js"></script>