TypeScript コメントを使いこなしてコードを理解しやすくしよう

2024-04-02

TypeScript コメントの構文

  1. 単一行コメント
// これは単一行コメントです
/*
これは複数行コメントです。
複数行にわたって記述できます。
*/

単一行コメントは、// から始まり、その行の終わりまで続きます。コードを説明したり、注意書きを記述したりするために使用されます。

例:

// この関数は、2つの数値を受け取り、その合計値を返します
function add(a: number, b: number): number {
  return a + b;
}

// この変数は、ユーザーの名前を格納します
const name: string = "John Doe";

複数行コメントは、/* から始まり、*/ で終わります。単一行コメントよりも詳細な説明を記述するために使用されます。

/*
この関数は、ユーザー入力を受け取り、それを整数に変換します。
入力値が有効な整数でない場合は、エラーをスローします。
*/
function parseInteger(input: string): number {
  const num = parseInt(input, 10);
  if (isNaN(num)) {
    throw new Error("Invalid integer: " + input);
  }
  return num;
}

その他のコメント機能

TypeScript では、コメント内に特殊な構文を使用して、コードの型や関数のパラメータなどに関する情報を記述することができます。これらの構文は、コードを理解しやすく、保守性を向上させるために役立ちます。

詳細については、以下のドキュメントを参照してください。

TypeScript コメントは、コードを説明し、理解を深めるために重要な役割を果たします。単一行コメントと複数行コメントを使い分け、適切な情報を記述することで、コードの保守性を向上させることができます。

補足

  • TypeScript コメントは、JavaScript のコメントと同様の構文を使用します。
  • コメントは、コンパイラによって無視されます。
  • コメントは、コードレビューやデバッグに役立ちます。



// 単一行コメント

// これは単一行コメントです

// 複数行コメント

/*
これは複数行コメントです。
複数行にわたって記述できます。
*/

// 型注釈

const name: string = "John Doe"; // 名前

// 関数のパラメータと戻り値

function add(a: number, b: number): number {
  // 2つの数値を受け取り、その合計値を返します

  return a + b;
}

// JSDoc コメント

/**
 * ユーザー入力を受け取り、それを整数に変換します。
 * 入力値が有効な整数でない場合は、エラーをスローします。
 *
 * @param input ユーザー入力
 * @returns 変換された整数
 */
function parseInteger(input: string): number {
  const num = parseInt(input, 10);

  if (isNaN(num)) {
    throw new Error("Invalid integer: " + input);
  }

  return num;
}
  • コメントは、コードを理解しやすく、保守性を向上させるために役立ちます。



TypeScript コメントのその他の方法

ドキュメントコメントは、JSDoc 構文を使用して、コードに関する詳細な情報を記述することができます。

/**
 * ユーザー入力を受け取り、それを整数に変換します。
 * 入力値が有効な整数でない場合は、エラーをスローします。
 *
 * @param input ユーザー入力
 * @returns 変換された整数
 */
function parseInteger(input: string): number {
  const num = parseInt(input, 10);

  if (isNaN(num)) {
    throw new Error("Invalid integer: " + input);
  }

  return num;
}

ドキュメントコメントは、コードレビューやデバッグに役立ちます。また、IDE や API ドキュメント生成ツールで使用されることもあります。

/// コメントは、単一行コメントの一種ですが、特別な意味を持っています。

/// ユーザーの名前
const name: string = "John Doe";

/// 2つの数値を受け取り、その合計値を返します
function add(a: number, b: number): number {
  return a + b;
}

/// コメントは、コードエディタや IDE でコード補完や型ヒントを提供するために使用されます。

TODO コメントは、コード内の未完了のタスクや FIXME を追跡するために使用されます。

// TODO: ユーザー認証機能を追加する

// FIXME: エラーメッセージを改善する

TODO コメントは、チームメンバー間でタスクを共有したり、コードレビュー時に未完了のタスクを確認するために使用されます。

TypeScript コメントには、さまざまな方法があります。それぞれの方法には、それぞれ利点と欠点があります。状況に応じて適切な方法を選択することが重要です。


comments typescript


【実践ガイド】Angular 2 コンポーネント間データ共有:サービス、共有ステート、ルーティングなどを活用

@Input と @Output@Input は、親コンポーネントから子コンポーネントへデータを一方方向に送信するために使用されます。親コンポーネントで @Input() デコレータ付きのプロパティを定義し、子コンポーネントのテンプレートでバインディングすることで、親コンポーネントのプロパティ値を子コンポーネントに渡すことができます。...


String プロトタイプ拡張で文字列操作をパワーアップ! TypeScript で実現する賢い文字列処理

TypeScript で String プロトタイプを拡張することで、既存の String オブジェクトに新しいメソッドを追加することができます。 これにより、文字列操作をより便利かつ効率的に行うことができます。String プロトタイプを拡張するには、以下の 2 つのステップが必要です。...


Angular:RouteConfig、ActivatedRoute、ActivatedRouteSnapshotを使ってルートガードにパラメータを渡す

ルートガードへのパラメータの渡し方は、いくつかの方法があります。ここでは、最も一般的な方法をいくつかご紹介します。ActivatedRouteSnapshot を利用する方法は、最も簡単で一般的な方法の一つです。ActivatedRouteSnapshot には、ルートパラメータにアクセスするためのさまざまなプロパティがあります。...


Angular、TypeScript、TypeScript Typings で "Property 'X' is private and only accessible within class 'xyzComponent'" エラーが発生したときの解決策

概要このエラーは、Angular コンポーネントのテンプレート内で、コンポーネントのプライベートプロパティ X にアクセスしようとしたときに発生します。原因Angular コンポーネントのテンプレートは、コンポーネントクラスとは別のクラスとしてコンパイルされます。そのため、テンプレートからコンポーネントのプライベートプロパティに直接アクセスすることはできません。...


TypeScript: 型推論を極める!Omit型とDistributiveOmit型で実現する高度な型操作

まず、Omit 型は、単一のプロパティを特定の型から削除するための型エイリアスです。構文は以下の通りです。ここで、T は対象となる型、K は削除したいプロパティのキーを表します。例として、以下のインターフェースから age プロパティを削除してみましょう。...