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`のスコープに対する`{}`を正確に配置すること

```TypeScript
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);
```

:::note info
`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でファイル作成するコマンドは下記
```powershell
New-Item -Path src/index.ts -ItemType File
```

- このディレクトリ構成はコマンドではなく確認するもの
```typescript
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"`がエラー箇所
```typescript
import { renderCalendar, setupNavigation } from "./dist/index.js";
```

## HTML側
同じ箇所を宣言しているHTML側のコード
```typescript
 <script type="module" src="./dist/index.js"></script>
 ```