【保存版】Visual Studio CodeでTypeScriptをコンパイルできない時の対処法！エラー「tsc is not recognized」解決策【画像付き】

Visual Studio CodeでTypeScriptをコンパイルするときに「tsc is not recognized as internal or external command」エラーが発生する原因と解決策

このエラーは、主に以下の3つの原因が考えられます。

1. TypeScriptがインストールされていない
2. PATH環境変数にtscが設定されていない
3. Visual Studio Codeの設定が正しくされていない

解決策

以下の手順で、順に解決策を試してみてください。

以下のコマンドを実行して、TypeScriptをグローバルにインストールします。

npm install -g typescript

PATH環境変数にtscを追加する

Windowsの場合

1. コントロールパネルを開きます。
2. 「システムとセキュリティ」 > 「システム」 > 「詳細設定」 > 「環境変数」を選択します。
3. システム環境変数領域で、「パス」変数を選択します。
4. 「編集」ボタンをクリックします。
5. 変数値の末尾にセミコロン「;」を入力し、以下のパスを追加します。

C:\Users\<ユーザー名>\AppData\Roaming\npm\node_modules\.bin

1. 「OK」ボタンを3回クリックして、設定を保存します。

Macの場合

1. ターミナルを開きます。
2. 以下のコマンドを実行します。

export PATH=$PATH:`npm bin -g`

1. プロファイルを再読み込みするか、コンピュータを再起動します。

Linuxの場合

echo 'export PATH=$PATH:~/.npm/bin' >> ~/.bashrc
source ~/.bashrc

Visual Studio Codeの設定で、TypeScriptコンパイラが正しく設定されていることを確認します。

1. Visual Studio Codeを開きます。
2. 「Code」メニュー > 「設定」を選択します。
3. 左側の検索バーに「TypeScript」と入力します。
4. 「TypeScript」設定項目が表示されます。
5. 「TypeScript: フォルダー内の tsconfig.json ファイルを使用する」オプションが有効になっていることを確認します。
6. 上記オプションが有効でない場合は、有効にして「OK」ボタンをクリックします。

それでもエラーが解決しない場合

上記の手順で解決しない場合は、以下の原因が考えられます。

• Node.jsのバージョンが古すぎる
• npmキャッシュが破損している

• npmキャッシュを削除する：

npm cache clean --force

• 使用しているOS
• TypeScriptのバージョン
• エラーメッセージの詳細

補足

• 上記の手順は、Windows、Mac、Linuxで共通していますが、OSによってコマンドやパスなどが異なる場合があります。

TypeScript サンプルコード

変数と型

let name: string = "Taro";
let age: number = 30;

console.log("名前：" + name);
console.log("年齢：" + age);

このコードは、以下のことを行います。

• name という名前の変数に文字列 "Taro" を代入します。
• コンソールに "名前：Taro" と "年齢：30" を出力します。

関数

function greet(name: string): string {
  return "こんにちは、" + name + "さん！";
}

const message = greet("Hanako");
console.log(message);

• greet という名前の関数を作成します。この関数は、name という名前の文字列を引数として受け取り、"こんにちは、" + name + "さん！" という文字列を返します。
• greet 関数を実行し、"Hanako" という文字列を渡します。
• 関数からの戻り値を message 変数に格納します。
• コンソールに message 変数の値を出力します。

クラス

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("こんにちは、私の名前は" + this.name + "です。");
  }
}

const taro = new Person("Taro", 30);
taro.greet();

• Person という名前のクラスを作成します。このクラスは、name と age というプロパティを持つオブジェクトを表します。
• constructor メソッドを作成します。このメソッドは、新しい Person オブジェクトを作成する際に呼び出されます。
• greet メソッドを作成します。このメソッドは、コンソールに "こんにちは、私の名前は" + this.name + "です。" という文字列を出力します。
• taro という名前の新しい Person オブジェクトを作成します。
• taro オブジェクトの greet メソッドを呼び出します。

インターフェース

interface Shape {
  area(): number;
}

class Circle implements Shape {
  radius: number;

  constructor(radius: number) {
    this.radius = radius;
  }

  area(): number {
    return Math.PI * this.radius * this.radius;
  }
}

const circle = new Circle(5);
console.log("円の面積：" + circle.area());

• Shape という名前のインターフェースを作成します。このインターフェースは、area というメソッドを持つオブジェクトを表します。
• area メソッドを作成します。このメソッドは、円の面積を計算して返します。
• circle オブジェクトの area メソッドを呼び出し、円の面積を出力します。

ジェネリック

function swap<T>(x: T, y: T): [T, T] {
  return [y, x];
}

const numbers = [1, 2];
const [a, b] = swap(numbers[0], numbers[1]);
console.log("a:", a);
console.log("b:", b);

const strings = ["Hello", "World"];
const [c, d] = swap(strings[0], strings[1]);
console.log("c:", c);
console.log("d:", d);

• swap という名前のジェネリック関数を作成します。この関数は、2つの引数を受け取り、それらを入れ替えます。
• numbers という名前の配

Visual Studio CodeでTypeScriptをコンパイルするその他の方法

タスクランナーを使用する

GulpやGruntなどのタスクランナーを使用すると、コンパイルタスクを自動化することができます。

例：Gulpの場合

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsConfig = require('./tsconfig.json');

gulp.task('compile', function() {
  return gulp.src('src/**/*.ts')
    .pipe(ts(tsConfig))
    .pipe(gulp.dest('dist'));
});

上記のコードは、src ディレクトリ内のすべての .ts ファイルをコンパイルし、dist ディレクトリに出力します。

• TSLint：コードの静的解析とフォーマットを行います。
• ESLint：JavaScriptとTypeScriptのコードの静的解析を行います。
• Prettier：コードのフォーマットを行います。

これらの拡張機能は、Visual Studio Code Marketplaceからインストールできます。

Webpackを使用する

Webpackは、モジュールバンドルツールです。TypeScriptのコンパイルだけでなく、コードのバンドル化、 minification、その他のタスクも実行できます。

最適な方法を選択する

使用する方法は、プロジェクトの規模や複雑さによって異なります。

• 小規模なプロジェクトの場合は、上記で紹介した最初の手順を使用するのが最も簡単です。
• 中規模から大規模なプロジェクトの場合は、タスクランナー、拡張機能、またはバンドルツールを使用すると効率的に開発できます。