先生と生徒の会話形式で理解しよう

生徒

「TypeScriptでコードを書いていると、エラーが出たり出なかったりするんですけど、何か設定があるんですか？」

先生

「はい、TypeScriptには、コードの品質を高めるための便利な設定がいくつかあります。その中でも特に重要なのが、noImplicitAnyとnoUnusedLocalsという設定です。」

生徒

「それぞれどんな役割があるんですか？」

先生

「それでは、基本的な使い方と活用方法を見ていきましょう！」

1. TypeScriptのコンパイラオプションとは？

TypeScriptには、コードをどのようにチェックするか、どのようにJavaScriptに変換するかを決めるコンパイラオプションという設定があります。これは、料理をする時のレシピのようなもので、どんな材料をどう扱うかを決めるルールのようなものです。

これらの設定は、プロジェクトのルートフォルダにあるtsconfig.jsonというファイルに記述します。このファイルは、TypeScriptの設定を管理する大切なファイルで、ここに書かれた内容に従ってTypeScriptがコードをチェックしてくれます。

2. noImplicitAnyとは？型の安全性を高める設定

noImplicitAnyは、TypeScriptの型チェックを厳しくするための設定です。この設定を有効にすると、型が明示されていない変数や関数の引数に対してエラーを出してくれます。

noImplicitAnyが必要な理由

TypeScriptは、型を指定しないと自動的にany型という「何でも入る型」を割り当てることがあります。これを暗黙的なany型と呼びます。しかし、any型を使うと、TypeScriptの型チェックの恩恵を受けられなくなってしまいます。例えば、数値を入れるつもりだった変数に文字列が入ってしまっても、エラーが出ないため、バグの原因になります。

noImplicitAnyの設定方法

tsconfig.jsonファイルで、以下のように設定します。


{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

noImplicitAnyがオフの場合

設定がオフの場合、以下のコードはエラーが出ません。


function add(a, b) {
    return a + b;
}

let result = add(5, "10");
console.log(result);

この例では、引数aとbの型が指定されていないため、暗黙的にany型になります。そのため、数値と文字列を足し算してしまい、予期しない結果になる可能性があります。

noImplicitAnyがオンの場合

設定をオンにすると、上記のコードでエラーが表示されます。


エラー: Parameter 'a' implicitly has an 'any' type.
エラー: Parameter 'b' implicitly has an 'any' type.

このエラーを解決するには、引数の型を明示的に指定する必要があります。


function add(a: number, b: number): number {
    return a + b;
}

let result = add(5, 10);
console.log(result);

このように、型を明示することで、間違った型の値を渡した時にエラーが出るようになり、バグを未然に防ぐことができます。

3. noUnusedLocalsとは？コードの整理整頓をサポート

noUnusedLocalsは、使われていない変数を検出してエラーを出す設定です。プログラムを書いていると、一度作ったけれど結局使わなかった変数が残ってしまうことがあります。これらは、コードを読みにくくしたり、間違いの元になったりします。

noUnusedLocalsが必要な理由

使われていない変数は、コードの可読性（読みやすさ）を下げます。また、変数名を間違えて使っていないつもりで別の変数を使ってしまっているというバグを見つけるのにも役立ちます。部屋の中に使わないものが散らかっていると、必要なものが見つけにくくなるのと同じです。

noUnusedLocalsの設定方法

tsconfig.jsonファイルで、以下のように設定します。


{
  "compilerOptions": {
    "noUnusedLocals": true
  }
}

noUnusedLocalsがオフの場合

設定がオフの場合、以下のコードでエラーは出ません。


function calculate() {
    let price = 1000;
    let tax = 100;
    let discount = 50;
    
    return price + tax;
}

console.log(calculate());

この例では、discountという変数を定義していますが、実際には使っていません。しかし、エラーは出ないため、気づかないまま放置されてしまう可能性があります。

noUnusedLocalsがオンの場合

設定をオンにすると、使われていない変数に対してエラーが表示されます。


エラー: 'discount' is declared but its value is never read.

このエラーが出たら、不要な変数を削除するか、実際に使うように修正します。


function calculate() {
    let price = 1000;
    let tax = 100;
    let discount = 50;
    
    return price + tax - discount;
}

console.log(calculate());

このように、使われていない変数を見つけることで、コードがすっきりと整理され、読みやすくなります。

4. 両方の設定を組み合わせて使う

実際のプロジェクトでは、noImplicitAnyとnoUnusedLocalsの両方を有効にすることをおすすめします。これらを組み合わせることで、型の安全性とコードの整理整頓を同時に実現できます。

推奨されるtsconfig.jsonの設定


{
  "compilerOptions": {
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "strict": true
  }
}

strictオプションを有効にすると、noImplicitAnyを含む、さまざまな厳格な型チェックが一度に有効になります。これは、TypeScriptの力を最大限に活用するための設定です。

実践的な活用例

以下は、これらの設定を活用した実践的なコード例です。


function calculateTotal(price: number, quantity: number): number {
    const subtotal = price * quantity;
    const taxRate = 0.1;
    const tax = subtotal * taxRate;
    
    return subtotal + tax;
}

const totalPrice = calculateTotal(500, 3);
console.log(`合計金額: ${totalPrice}円`);