Angular と TypeScript で開発を効率化する：Tslint ルール「no-inferrable-types」の徹底解説

2024-05-15

TypeScript での型注釈：冗長な型指定はなぜ避けるべきか？

例：

const serverId: number = 10;

この例では、serverId 変数の型は number であることが明示的に指定されています。しかし、この型は 10 という値を代入することによってすでに推論されています。そのため、number 型を明示的に指定することは冗長であり、no-inferrable-types ルールによって警告されます。

なぜ冗長な型指定を避けるべきなのか？

コードの読みやすさを低下させる: 冗長な型指定は、コードをより冗長にし、読みづらくします。特に、型推論が容易な場合、明示的な型指定は不要であり、コードを理解する上でむしろ妨げになります。
メンテナンス性を低下させる: コードを変更する際に、冗長な型指定も更新する必要があり、メンテナンスの手間が増えます。特に、型推論によって型が自動的に更新される場合、明示的な型指定は不要であり、メンテナンスの負担になります。

ただし、以下のような場合は、冗長な型指定が有用な場合があります。

コードの意図を明確にする: 型推論によって型が推定されない場合、または意図的に異なる型を使用したい場合は、明示的な型指定が必要となります。
型エイリアスを使用する場合: 型エイリアスを使用する場合、明示的な型指定によって、エイリアスの定義と一致する型であることが保証されます。
ドキュメントとして使用する場合: 型推論によって型が推定される場合でも、明示的な型指定によって、コードの意図をより明確にドキュメント化することができます。

一般的には、型推論によって簡単に推定できる型を明示的に指定することは避けるべきです。ただし、上記のような場合は、冗長な型指定が有用な場合があります。

補足:

no-inferrable-types ルールは、Tslint の設定で無効にすることができます。
Visual Studio Code など、多くの IDE は、型推論によって推定された型を表示することができます。

// 型推論によって型が推定される場合

const serverId = 10; // 型は number として推定される
const serverName = "localhost"; // 型は string として推定される

// 明示的な型指定

const userId: number = 20; // 型を number として明示的に指定
const userName: string = "John Doe"; // 型を string として明示的に指定

// 型エイリアスの使用

type ServerId = number;
const serverId2: ServerId = 30; // 型エイリアス ServerId に一致する型であることが保証される

// ドキュメントとしての使用

const errorMessage: string = "An error occurred."; // 型推論によって string 型であることが推定されるが、明示的な型指定によって意図を明確にする

// 冗長な型指定

const inferredNumber: number = 40; // 型推論によって number 型であることがすでに推定されているため、冗長な型指定
const inferredString: string = "Hello"; // 型推論によって string 型であることがすでに推定されているため、冗長な型指定

説明:

serverId と serverName は、型推論によって型が number と string であることが自動的に推定されます。そのため、明示的な型指定は必要ありません。
userId と userName は、型を number と string として明示的に指定しています。これは、型推論によって推定される型と一致するため、問題ありません。
ServerId 型エイリアスを使用すると、serverId2 変数の型が ServerId と一致する型であることが保証されます。これは、コードの意図を明確にするのに役立ちます。
errorMessage は、型推論によって string 型であることが推定されますが、明示的な型指定によって意図を明確にしています。これは、コードのドキュメントとして役立ちます。
inferredNumber と inferredString は、型推論によって型が number と string であることがすでに推定されているため、冗長な型指定です。このような冗長な型指定は避けるべきです。

上記のサンプルコードはあくまでも一例であり、状況に応じて適切なコードを記述する必要があります。

TypeScript で冗長な型指定を回避するその他の方法

型エイリアスを使用すると、複雑な型の定義を簡潔に表現することができます。また、型エイリアスを使用することで、コードの読みやすさとメンテナンス性を向上させることができます。

例:

type User = {
  id: number;
  name: string;
  email: string;
};

const user: User = {
  id: 1,
  name: "John Doe",
  email: "[email protected]"
};

この例では、User 型エイリアスを使用して、ユーザーを表すオブジェクトの型を定義しています。これにより、user 変数の型を明示的に指定する必要がなくなり、コードが簡潔になります。

ジェネリック型を使用すると、さまざまな型の値を扱うことができる汎用的なコンポーネントを作成することができます。ジェネリック型を使用することで、コードの再利用性を高め、冗長な型指定を回避することができます。

function identity<T>(value: T): T {
  return value;
}

const number: number = identity(10);
const string: string = identity("Hello");

この例では、identity というジェネリック関数を作成しています。この関数は、引数と返り値の型が同じである任意の型を受け取ることができます。これにより、number と string の値に対して identity 関数を呼び出すことができ、冗長な型指定を回避することができます。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

const greeting: string = greet("John Doe");

この例では、greet という関数のシグネチャを定義しています。このシグネチャは、name という名前のパラメータと、string 型の返り値を定義しています。これにより、greet 関数を呼び出す際に、引数の型を明示的に指定する必要がなくなり、コードが簡潔になります。

型パラメーターを使用すると、クラスやインターフェースの型を定義することができます。型パラメーターを使用することで、コードの再利用性を高め、冗長な型指定を回避することができます。

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}

const numberStack: Stack<number> = new Stack();
const stringStack: Stack<string> = new Stack();