TypeScript初心者がやりがちなミスとその回避法をやさしく解説！

1. 変数の型を指定し忘れる

1. 変数の型を指定し忘れる

TypeScriptでは、変数に型（データの種類）を指定することで、安全にコードを書くことができます。しかし、型を省略してしまうと、TypeScriptの利点が活かせず、間違った使い方をしてもエラーにならないことがあります。

例えば、数値を入れるつもりの変数に文字を入れてしまっても、型を指定していなければ気づかないことがあります。

let price; // 型を指定していない
price = 100;
price = "高い"; // 本来は数値だけ入れたかったのに文字も入ってしまう

このようなミスを防ぐためには、numberやstringなど、型を明示的に指定する習慣をつけましょう。

let price: number;
price = 100;
// price = "高い"; // エラーが出るので、間違いに気づける！

2. 小文字・大文字を間違える

2. 小文字・大文字を間違える

TypeScript（タイプスクリプト）は大文字と小文字を区別する言語です。たとえば、myNameとMyNameは別の変数として扱われます。

そのため、変数名や関数名を書くときに、大文字・小文字の使い分けに注意しましょう。

let userName = "Taro";
console.log(UserName); // エラー！ "userName"と"UserName"は別物

変数名は一貫して同じ表記にしましょう。小文字で始めるキャメルケース（例：userName）が一般的です。

3. セミコロンの付け忘れ

3. セミコロンの付け忘れ

TypeScriptでは、文の終わりに;（セミコロン）をつけるのが基本です。JavaScriptと違って、エラーになることは少ないですが、セミコロンを忘れると読みづらくなったり、思わぬ動作をすることがあります。

let name = "Taro"
console.log(name)

このような書き方でも動くことはありますが、バグの原因になりやすいので、次のように正しく書きましょう。

let name = "Taro";
console.log(name);

4. 値を代入せずに使う

4. 値を代入せずに使う

変数を宣言しただけで値を入れていない状態のまま使うと、undefined（未定義）として扱われ、エラーの原因になります。

let message: string;
console.log(message); // 初期化していないのでundefinedになる

このミスを防ぐには、変数を使う前にしっかり値を入れておきましょう。

let message: string = "こんにちは！";
console.log(message);

5. 関数の引数に型をつけない

5. 関数の引数に型をつけない

TypeScriptでは、関数にも引数の型を指定できます。型を指定しないと、間違った値を渡しても気づけないことがあります。

function greet(name) {
    console.log("こんにちは " + name);
}
greet(100); // 数値でも通ってしまう！

型を明示することで、間違いを防げます。

function greet(name: string) {
    console.log("こんにちは " + name);
}
greet("太郎");
// greet(100); // エラーになるので安全

6. 間違ったコメントの書き方

6. 間違ったコメントの書き方

TypeScriptでは、コメントを使ってコードにメモを書くことができますが、書き方を間違えるとエラーになります。

コメントの正しい書き方は次の2つです：

• // を使うと1行コメント
• /* ... */ を使うと複数行コメント

// これは1行コメントです

/*
これは複数行の
コメントです
*/

逆に、コメントを書いたつもりで/だけを書いてしまうと、エラーになりますので注意しましょう。

7. コンパイルせずに実行しようとする

7. コンパイルせずに実行しようとする

TypeScriptはトランスパイル（変換）してから実行する必要があります。いきなり.tsファイルをブラウザで開こうとしても動作しません。

コンパイルとは、TypeScriptのコードをJavaScriptに変換することです。コマンドプロンプト（黒い画面）などで以下のように入力します。

tsc ファイル名.ts

これにより、同じフォルダに.jsファイルが作られ、それを実行することでプログラムが動きます。

8. ファイル名の拡張子を間違える

8. ファイル名の拡張子を間違える

TypeScriptファイルは.tsという拡張子で保存する必要があります。これを.jsや.txtなどにしてしまうと、TypeScriptとして認識されず、エラーや警告が表示されません。

保存するときは必ずファイル名の末尾が.tsであることを確認しましょう。

まとめ

まとめ

TypeScriptを学び始めたばかりの段階では、変数の型を指定し忘れたり、大文字と小文字を間違えてしまったり、コメントの書き方を誤ったりすることが珍しくありません。これらの間違いは一見すると小さなつまずきに感じられますが、積み重なることでコード全体の見通しが悪くなったり、原因の分からないエラーに直面したりするきっかけになるため、初心者のうちから丁寧に正しい書き方を身につけておくことがとても重要です。特にTypeScriptは型を扱う特徴があるため、型を指定する習慣が自然と身についていれば、後から複雑なプログラムを作成する際にも大きな助けとなり、間違いやすい箇所を未然に防ぐ備えになります。こうした基礎的な部分に気をつけながらコードを書く練習を重ねていけば、プログラムの動きが予測しやすくなり、トラブルが起きたときにも素早く原因を絞り込めるようになります。

また、ファイルの拡張子を間違えたり、トランスパイルせずに実行しようとしたりするミスも初心者にはよく見られる失敗のひとつです。TypeScriptはJavaScriptに変換してから動かすという性質を理解しておかないと、意図した動きをしてくれない場面に遭遇することがあります。さらに、関数の引数に型をつけ忘れたり、変数を初期化せずに使おうとした場合、正確なデータの流れが見えにくくなり、思っていた結果と違う値が出てしまうこともあります。このように、コードを書くときに少しずつ意識しておけば防げることがほとんどなので、毎回の記述で気を配りながら練習を重ねると良いでしょう。特に関数はプログラム内で頻繁に登場するため、引数や戻り値の型指定を丁寧に行うことで、より堅牢で見通しの良いコードを書くことができます。

大文字と小文字を区別するルールに慣れることも、TypeScriptでつまずかないための大切なポイントです。プログラムではほんの一文字違うだけで変数名や関数名が別物として扱われるため、名前をつける際には自分なりの一貫した書き方を決めておくと混乱を避けられます。たとえば、キャメルケースで表記する習慣を持てば、読みやすい名前をつけながら間違いも減らせるというメリットがあります。そして、セミコロンのつけ忘れやコメントの記述漏れなども、日常的に丁寧な書き方を意識しておけば自然と防げるようになります。特に複数人で作業する場面では、コードの読みやすさがトラブルを防ぐ鍵になるため、こうした基本的なポイントを守ることが後々大きな意味を持ちます。

サンプルプログラムで振り返る

以下は、初心者が間違えやすいポイントを整理した簡単なサンプルコードで、正しい型指定や大文字小文字の扱いなどをおさらいできる内容になっています。

// 正しい型指定を行う例
function calculateTotal(price: number, count: number): number {
    return price * count;
}

let total: number = calculateTotal(300, 2);
console.log(total);

// 大文字小文字の違いに注意する例
let userEmail = "sample@example.com";
// console.log(UserEmail); // 誤り。大文字小文字が異なるため別扱いになる。

// セミコロンを忘れずに書く例
let message: string = "こんにちは";
console.log(message);

// 初期化を忘れない例
let name: string = "太郎";
console.log(name);

このように、ほんの少し気をつけるだけでコードの読みやすさや安全性が高まり、エラーに悩まされる場面が大きく減ります。特にTypeScriptは型を扱う特徴があるため、型に関するミスがそのままプログラムの不具合に直結することも多く、初心者のうちから型の扱いに慣れておくことで、より複雑なアプリケーションにも挑戦しやすくなります。プログラミングを楽しく続けるためにも、今回の基本をしっかり振り返り、日常的なコード作成の中に自然と取り入れていくことが大切です。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

TypeScriptで変数の型を指定しないとどんな問題が起きますか？

TypeScriptで型を指定しないと、意図しないデータ型を代入してしまってもエラーが出ず、バグの原因になります。型を明示することで、エディタの補完やエラー検出が働き、初心者でも安全にコーディングできます。