TypeScriptでのconsole.logを活用する10の使い方

はじめに
●TypeScriptのconsole.logとは
- ○console.logの基本概念
●console.logの使い方：10のサンプルコード
●console.logの応用例
- ○サンプルコード1：デバッグ時だけログ出力
- ○サンプルコード2：ログの内容を外部ファイルに出力
●注意点と対処法
●カスタマイズ方法
- ○console.logの挙動をカスタマイズする方法
- ○カスタムログ関数の作成方法
まとめ

はじめに

TypeScriptはJavaScriptのスーパーセットとして知られ、静的型付けを提供することで、エラーの少ないコードを書くためのサポートをします。

そして、デバッグ時には、JavaScript同様、console.logを頻繁に使用することが多いです。

この記事では、TypeScriptでのconsole.logの活用法を初心者向けに詳細に解説します。

デバッグはコーディングの中で非常に重要な工程です。

正確にエラーや変数の内容を把握するために、console.logは欠かせないツールとなります。

そして、適切な使い方をマスターすることで、より効率的なデバッグが可能となります。

●TypeScriptのconsole.logとは

TypeScriptのconsole.logは、JavaScriptのそれと基本的には同じです。

ブラウザやNode.jsのコンソールに情報を出力するためのメソッドで、デバッグ時の情報取得や、コードの動作確認を行う際に頻繁に用いられます。

しかし、TypeScriptの特徴として、静的型付けが導入されているため、型の情報も一緒にログ出力したいというニーズがあります。

このニーズに応じて、TypeScriptでは、型の情報を一緒に出力する方法も提供されています。

○console.logの基本概念

console.logメソッドは、括弧内に指定した値や変数、オブジェクトなどの情報をコンソールに出力します。

このメソッドは、複数の引数を取ることができ、それぞれの引数はコンソール上でスペース区切りで出力されます。

●console.logの使い方：10のサンプルコード

TypeScriptを学び始めると、プログラムの動作を確認するためにconsole.logを頻繁に使用することになります。

この記事では、TypeScriptでのconsole.logの使い方を10の実例を通して徹底解説します。

初心者でもすぐに実践できる技を身につけて、デバッグ力を向上させましょう。

○サンプルコード1：基本的なログ出力

console.logは、指定した情報をコンソールに出力するための関数です。

これを使って、プログラムが期待したとおりに動作しているか、変数の中身は正しいかなど、さまざまな情報をリアルタイムで確認することができます。

// 基本的な文字列のログ出力
console.log("Hello, TypeScript!");

このコードでは、”Hello, TypeScript!”という文字列をコンソールに出力しています。

文字列をダブルクォーテーション(“)やシングルクォーテーション(‘)で囲んで、console.logの引数として渡すことで、指定した文字列がコンソールに表示されます。

このコードを実行すると、コンソールには”Hello, TypeScript!”と表示されます。

これにより、簡単にテキスト情報を出力することができるため、プログラムの動作を確認する際の手助けとなります。

また、数値や変数の内容も同様にconsole.logを使って出力することができます。

let number: number = 5;
console.log(number);

このコードでは、numberという名前の変数に数値5を代入し、その内容をコンソールに出力しています。

変数の内容を確認する際には、console.logの引数として変数名をそのまま渡します。

このコードを実行すると、コンソールには数値の5が表示されます。

このように、console.logを使うことでプログラム中の変数の値を簡単に確認することができます。

○サンプルコード2：変数の内容を出力

TypeScriptで開発を進める中で、変数の中身を確認したくなることは頻繁にあります。

変数の内容を出力するためには、console.log関数を使います。

しかし、その使い方にはいくつかのポイントがあります。

// 数値型の変数
let age: number = 25;

// 文字列型の変数
let name: string = "田中";

// console.logを用いて変数の内容を出力
console.log("年齢:", age);
console.log("名前:", name);

このコードでは、数値型の変数ageと文字列型の変数nameを定義しています。

それぞれの変数には、25と”田中”という値が代入されています。

console.log関数を使い、変数の名前とその内容を一緒に出力しています。

このコードを実行すると、次の結果を得られます。

年齢: 25
名前: 田中

といった内容がコンソールに表示されます。

こちらの方法で、変数の内容を確認することができます。

TypeScriptにおいて、変数は明示的な型を持つことが多いので、意図しない型の値が代入されている場合はコンパイルエラーが発生します。

そのため、変数の型と値が正しいかをconsole.logで確認することは、デバッグ時に非常に役立ちます。

また、より詳細な情報を得たい場合、変数の型も一緒に出力することもできます。

下記のサンプルコードは、変数の内容だけでなく、変数の型も出力する方法を表しています。

// 任意の変数の型を取得する関数
function getTypeOf(value: any): string {
    return typeof value;
}

let salary: number = 50000;

// 変数の内容と型を同時に出力
console.log(`給料: ${salary}, 型: ${getTypeOf(salary)}`);

このコードでは、任意の変数の型を取得する関数getTypeOfを定義しています。

変数salaryの内容とその型を同時に出力するために、テンプレートリテラルを使用しています。

このコードを実行すると、次の結果を得られます。

給料: 50000, 型: number

○サンプルコード3：オブジェクトの内容を詳細に出力

TypeScriptを使用している際、特に複雑なオブジェクトの構造や内容を確認するためにconsole.logを利用することが多々あります。

そんな時に、オブジェクトの内容をより詳細に確認する方法をこの項目で学びましょう。

オブジェクトは、キーと値のペアの集まりであり、複数のデータをまとめて管理することができるものです。

TypeScriptでは、特に型情報を持つオブジェクトやクラスのインスタンスとして使われることが多いです。

単純な数値や文字列の場合、console.logでそのまま出力するだけで内容が確認できます。

しかし、オブジェクトは多層構造を持つことが多いため、その内容を一度に確認するためには少し工夫が必要となります。

TypeScriptでのオブジェクトの内容を詳細にconsole.logで出力するサンプルコードを紹介します。

// サンプルオブジェクトの定義
const sampleObject = {
    name: "山田太郎",
    age: 25,
    address: {
        city: "東京",
        ward: "渋谷区",
        details: {
            building: "山田ビル",
            floor: 5
        }
    },
    hobbies: ["読書", "映画鑑賞", "ランニング"]
};

// オブジェクトの内容を詳細に出力
console.log(JSON.stringify(sampleObject, null, 2));

このコードでは、まずsampleObjectという多層構造のオブジェクトを定義しています。

このオブジェクトの内容を詳細に確認するために、JSON.stringifyメソッドを使っています。

JSON.stringifyは、第二引数にnull、第三引数にインデントの数値（この例では2）を指定することで、整形された形でJSON文字列を返します。

これをconsole.logで出力することで、オブジェクトの内容を見やすく確認することができます。

その結果、オブジェクトが持つキーと値、そして多層の構造を明確に認識することが可能となります。

この方法は、特にデバッグの際にオブジェクトの内容を詳細に確認したい場合に有効です。

もし、このサンプルコードを実際に実行すると、次のような整形されたJSON文字列がコンソールに出力されます。

{
  "name": "山田太郎",
  "age": 25,
  "address": {
    "city": "東京",
    "ward": "渋谷区",
    "details": {
      "building": "山田ビル",
      "floor": 5
    }
  },
  "hobbies": ["読書", "映画鑑賞", "ランニング"]
}

このように、キーと値が整然と並べられ、どのようなデータ構造を持っているのか一目で分かるようになります。

○サンプルコード4：条件付きでログを出力

TypeScriptでの開発を進める中で、ある特定の条件下でのみconsole.logを実行したい場面がしばしば出てきます。

例えば、デバッグ中や特定の環境下でのみログを出力したいという要望などが考えられます

ここでは、条件付きでログを出力する方法を解説します。

TypeScriptはJavaScriptをベースとしているため、条件付きのログ出力は、if文を使用して簡単に実装することができます。

変数isDebugModeがtrueの場合のみログを出力するサンプルコードを紹介します。

const isDebugMode: boolean = true;

if (isDebugMode) {
    console.log("デバッグモードです。");
}

このコードでは、変数isDebugModeを使ってデバッグモードが有効かどうかを判定しています。

もし、isDebugModeがtrueであれば、"デバッグモードです。"というメッセージがログとして出力されます。

このコードを実行すると、isDebugModeがtrueの場合、コンソールに"デバッグモードです。"と表示されます。逆にisDebugModeがfalseの場合、何も表示されません。

また、開発中のアプリケーションでは、開発環境や本番環境といった異なる環境での動作を切り替えるために、環境変数を利用することが一般的です。

環境変数を用いて、特定の環境でのみログを出力する方法も考えられます。

例として、環境変数ENVが"development"の場合のみログを出力するサンプルコードを見てみましょう。

const ENV: string = "development"; // これは一例です。実際には環境変数から取得することが多いです。

if (ENV === "development") {
    console.log("開発環境でのログ出力です。");
}

このコードを実行すると、ENVが"development"の場合、コンソールに"開発環境でのログ出力です。"と表示されるでしょう。

ENVがその他の値である場合、ログは出力されません。

○サンプルコード5：ログにスタイルを適用

TypeScriptを使って開発している際、デバッグの助けとしてconsole.logを使用することは非常に一般的です。

ただし、多数のログが出力される場面では、特定のログを目立たせたい、または特定の内容にスタイルを付けて区別したいことも考えられます。

ここでは、console.logを使用してログにスタイルを適用する方法について解説します。

下記のサンプルコードは、TypeScriptにてconsole.logを使ってログにスタイルを適用する例を表しています。

// スタイルを持つログの出力
console.log('%cこのログには特別なスタイルが適用されています！', 'color: red; font-weight: bold;');

このコードでは、第一引数に文字列を、第二引数にスタイルを指定しています。

文字列内の%cは、スタイルを適用する部分を表すプレースホルダとして働きます。

第二引数の文字列はCSSのスタイル定義と同様の形式で記述され、この場合はテキストの色を赤にし、太字にする設定を行っています。

このコードを実行すると、コンソール上で「このログには特別なスタイルが適用されています！」というテキストが赤色の太字で表示されます。

ただし、すべてのブラウザや環境がconsole.logでのスタイル適用をサポートしているわけではありません。

そのため、本番環境での利用は推奨されませんが、開発時に特定のログを目立たせたり、警告やエラーを視覚的に強調するために活用できます。

また、複数のスタイルを組み合わせることも可能です。

例えば、次のようなコードを考えてみましょう。

console.log('%c警告：%cこの操作は取り消しできません！', 'color: black; font-weight: bold;', 'color: red;');

上記のコードでは、%cを2回使用しています。

これにより、1つ目のスタイルが「警告：」に、2つ目のスタイルが「この操作は取り消しできません！」にそれぞれ適用されます。

このコードを実行すると、「警告：」は黒色の太字、そして「この操作は取り消しできません！」は赤色のテキストで表示されるでしょう。

○サンプルコード6：エラーメッセージを出力

デバッグ時には、通常のログ出力だけでなく、エラー情報をログに出力することが非常に重要です。

エラー情報を適切に出力することで、問題の原因を特定しやすくなり、開発効率が大幅に向上します。

特にTypeScriptでは、型情報や特定の機能を活用することで、エラーハンドリングをより効果的に行うことができます。

今回は、TypeScriptでのエラーメッセージの出力方法について詳しく解説します。

このコードでは、console.error()メソッドを使ってエラーメッセージを出力しています。

console.error()は、エラーメッセージをコンソールに赤色で出力する機能を持っており、通常のconsole.log()よりも目立たせるために使用されます。

try {
    // エラーを意図的に発生させる
    throw new Error('何かのエラーが発生しました。');
} catch (e) {
    // エラーメッセージを赤色で出力
    console.error(e.message);
}

このコードを実行すると、throw new Error('何かのエラーが発生しました。');で意図的にエラーを発生させ、その後のcatchブロックでエラーをキャッチします。

キャッチしたエラーのメッセージは、console.error()を使ってコンソールに出力されます。

結果として、「何かのエラーが発生しました。」というメッセージが赤色で表示されることになります。

これにより、エラー発生時のメッセージを一目で確認することができ、デバッグの手助けとなります。

○サンプルコード7：テーブル形式での出力

TypeScriptやJavaScriptでの開発中、デバッグやデータの内容確認が必要となるシチュエーションは多々あります。

その際にconsole.logを使うのは一般的ですが、複数のデータを整理して確認したい場合はどうするでしょうか？

そんなとき役立つのが、console.tableメソッドです。

このコードでは、console.tableを使ってオブジェクトの内容をテーブル形式で出力する方法を解説します。

// テスト用のデータ
const students = [
    { id: 1, name: '山田太郎', age: 20 },
    { id: 2, name: '鈴木次郎', age: 21 },
    { id: 3, name: '田中三郎', age: 19 },
];

// テーブル形式での出力
console.table(students);

このコードでは、テスト用のデータとして学生の情報を含むオブジェクトの配列を定義しています。

そして、console.tableメソッドを使用して、このオブジェクトの配列をテーブル形式でコンソールに出力しています。

このコードを実行すると、ブラウザのコンソールには学生の情報がテーブル形式で表示されます。

各列のヘッダーはオブジェクトのキー（id, name, age）となり、その下に各学生の情報が順に表示される形になります。

上記のコードをブラウザで実行すると、コンソール上には次のようにデータが整然とテーブル形式で表示されます。

(index) | id | name    | age
--------|----|---------|-----
0       |  1 | 山田太郎 |  20
1       |  2 | 鈴木次郎 |  21
2       |  3 | 田中三郎 |  19

このように、テーブル形式での出力はデータの構造や関連性を一目で把握するのに非常に役立ちます。

特にデータの比較や確認作業を行う際には、この方法を活用することで作業の効率を高めることが期待できます。

○サンプルコード8：グルーピングしてログ出力

TypeScriptを使ってのデバッグ時、console.logの出力が多くなると、どれがどの処理に関連しているのか分かりにくくなってしまいます。

そんな時、ログをグルーピングして見やすく整理する技が役立ちます。

ここでは、console.group()とconsole.groupEnd()を用いたログのグルーピング方法を解説します。

まず、次のサンプルコードをご覧ください。

console.group('ユーザー情報');
console.log('名前: 山田太郎');
console.log('年齢: 28');
console.log('趣味: 旅行');
console.groupEnd();

console.group('仕事情報');
console.log('会社名: 株式会社ABC');
console.log('部署: 営業部');
console.log('役職: 課長');
console.groupEnd();

このコードでは、console.group('グループ名')を使って、それ以降のログ出力を指定した名前のグループとしてまとめています。

そして、console.groupEnd()でグループの終了を宣言しています。

このようにすることで、ブラウザのコンソール上ではグループ化されたログ出力が折りたたまれた状態で表示され、見やすくなります。

このコードを実行すると、”ユーザー情報”と”仕事情報”という2つのグループが作成され、その下にそれぞれの情報がログとして出力されます。

もちろん、ブラウザのコンソール上でクリックして展開・折りたたむことができます。

この技術を使用することで、複数のログを関連付けたり、特定の機能やモジュールに関するログだけをグループ化して整理することが容易になります。

特に大きなプロジェクトや多くのログが出力される場合には、このグルーピング機能は非常に有効です。

また、グループの中にさらにグループを作成することも可能です。

これをネストと言い、次のようなコードで実現できます。

console.group('大カテゴリ');
  console.log('大カテゴリに関する情報1');
  console.log('大カテゴリに関する情報2');

  console.group('小カテゴリ');
    console.log('小カテゴリに関する情報1');
    console.log('小カテゴリに関する情報2');
  console.groupEnd();

console.groupEnd();

上記のコードを実行すると、”大カテゴリ”というグループの中に”小カテゴリ”というサブグループが作成される形になります。

ネストを利用することで、さらに詳細なグルーピングが可能となり、見た目も階層的に整理されます。

○サンプルコード9：カウントとしてログを利用

TypeScriptでの開発中、特定の動作や処理が何回行われたか知りたい時があります。

そのような場面で、console.logはカウント機能を持っており、これを利用することで簡単に回数を把握することができます。

具体的には、console.countメソッドを使用します。

このコードでは、console.countを使って特定の処理がどれだけ実行されたかカウントします。

function sampleFunction() {
    console.count('sampleFunctionが呼び出された回数');
}

sampleFunction(); // sampleFunctionが呼び出された回数: 1
sampleFunction(); // sampleFunctionが呼び出された回数: 2
sampleFunction(); // sampleFunctionが呼び出された回数: 3

このコードを実行すると、sampleFunctionが呼び出されるたびにカウントが増えていきます。

そして、その都度、console.countはそのカウント数をログとして出力します。

しかし、何度も実行される大規模なプログラムでは、カウントが多くなることで目的のデバッグ情報が見えづらくなることがあります。

その場合は、console.countResetメソッドを利用してカウントをリセットすることができます。

カウントのリセットを行う例を紹介します。

function sampleFunctionWithReset() {
    console.count('リセット前のカウント');
    if (Math.random() > 0.5) {
        console.countReset('リセット前のカウント');
    }
}

sampleFunctionWithReset(); 
sampleFunctionWithReset(); 
sampleFunctionWithReset();

このコードでは、Math.random関数を使って0から1までのランダムな数を生成しています。

この数値が0.5より大きければ、console.countResetでカウントをリセットします。

このように、特定の条件下でカウントをリセットすることが可能です。

このコードを実行すると、ランダムにカウントがリセットされるため、連続して「リセット前のカウント: 1」というログが出力されることがあります。

○サンプルコード10：カスタマイズしたconsole.log関数の作成

TypeScriptにおけるconsole.logの使い方は、開発者のデバッグ作業を助けるための重要なツールです。

しかし、場合によっては、標準的なconsole.logでは十分でないこともあります。

そこで、カスタマイズしたconsole.log関数を自分で作成することで、ログ出力の柔軟性を高めることが可能です。

例として、ログに日付や特定のプレフィックスを付与するカスタムログ関数を紹介します。

function customLog(message: any): void {
    const date = new Date();
    console.log(`[${date.toISOString()}][MyLog]: ${message}`);
}

このコードでは、customLogという新しい関数を定義しています。

関数内で、Dateオブジェクトを使用して、現在の日付と時刻を取得しています。

そして、標準のconsole.logを使って、この日付と時刻、プレフィックス[MyLog]とともにメッセージを出力しています。

このコードを実行すると、次のような結果を得られます。

const message = "これはテストメッセージです。";
customLog(message);

実際にコードを実行すると、[2023-08-31T12:00:00.000Z][MyLog]: これはテストメッセージです。のような形式でログが出力されるでしょう。

この形式において、日付は実行時のものに変わります。

●console.logの応用例

TypeScriptのデバッグ時には、console.logを利用することが多いです。

しかし、開発中だけでなく、本番環境でもデバッグ情報を取得したい場面があります。

しかし、本番環境で不要なログを出力するのは適切ではありません。

そこで、今回はデバッグ時だけログを出力する方法を紹介します。

○サンプルコード1：デバッグ時だけログ出力

TypeScriptを使ったアプリケーション開発において、デバッグ時にのみログを出力する場合の方法を解説します。

デバッグモード時のみconsole.logを動作させる簡単な例を紹介します。

const DEBUG_MODE = true;  // こちらをfalseにすることで、ログの出力をオフにできます

if (DEBUG_MODE) {
  console.log = (message?: any, ...optionalParams: any[]) => {
    window.console.log(message, ...optionalParams);
  };
} else {
  console.log = () => {};  // 何もしない関数に上書き
}

このコードでは、DEBUG_MODEという変数を使ってデバッグモードかどうかを判別しています。

DEBUG_MODEがtrueの場合、console.logは通常通り動作します。

一方、DEBUG_MODEがfalseの場合、console.logは何もしない関数に上書きされるため、ログが出力されなくなります。

このコードを実行すると、デバッグモードが有効の場合はログが正常に出力されるのに対し、デバッグモードが無効の場合、ログ出力が行われなくなります。

○サンプルコード2：ログの内容を外部ファイルに出力

TypeScriptを使用して、デバッグの過程での情報収集やバグの追跡を助けるために、console.logを活用することがよく行われます。

特に、ログの内容を外部ファイルに出力することで、長期的なモニタリングや後からのログ確認が簡単になります。

今回はその方法について解説いたします。

まず、この方法でのログの内容を外部ファイルに出力する際、Node.js環境が必要です。

ブラウザのJavaScriptでは外部ファイルへの直接的な書き込みが許可されていません。

まず初めに、Node.jsでのファイル書き込みに使用するfsモジュールをインポートします。

import fs from 'fs';

このコードでは、Node.jsの組み込みモジュールであるfsを使って、ファイルシステムにアクセスしています。

次に、ログ内容を外部ファイルに出力する関数を作成します。

function logToFile(message: any) {
  fs.appendFile('log.txt', message + '\n', (err) => {
    if (err) {
      console.error('ログの書き込みに失敗しました:', err);
    }
  });
}

このコードでは、logToFileという関数を作成しています。

この関数は、引数として受け取ったmessageをlog.txtというファイルに追記します。

また、追記中にエラーが発生した場合、エラーメッセージをコンソールに表示します。

この関数を使用して、任意のメッセージを外部ファイルに出力することができます。

logToFile('これは外部ファイルに出力されるログです。');

上記のコードを実行すると、log.txtという名前のファイルに「これは外部ファイルに出力されるログです。」というメッセージが追記されます。

もしlog.txtというファイルが存在しない場合、新しくその名前のファイルが作成され、その中にログ内容が追記されます。

●注意点と対処法

TypeScriptのconsole.logを利用する上での注意点と、それらの問題を解決する方法を詳しく解説します。

特に初心者の方が陥りやすいトラブルや、その原因と対処法を中心にまとめています。

○非推奨のログメソッドについて

TypeScriptやJavaScriptでは、いくつかのconsoleメソッドが非推奨となっています。

例えば、console.debugは一部のブラウザで非推奨となっており、その使用は避けるべきです。

このコードではconsole.debugを使用しています。

let data = "テストデータ";
console.debug(data);

このコードを実行すると、デバッグ用のログとして”data”の内容が表示されますが、非推奨であるため避けることが推奨されます。

対処法としては、非推奨のメソッドを使用するのを避け、console.logやconsole.errorなど、適切なメソッドを使用することが重要です。

○パフォーマンスへの影響について

console.logは便利ですが、過度な使用はアプリケーションのパフォーマンスに影響を及ぼす可能性があります。

特に大量のログを連続して出力する場合や、ループの中でログを出力する場合は注意が必要です。

このコードでは、ループの中でログを出力しています。

for (let i = 0; i < 10000; i++) {
    console.log("繰り返しログ: " + i);
}

このコードを実行すると、1から10,000までの数字がログとして出力されます。

しかし、このような大量のログ出力はパフォーマンスの低下を引き起こす可能性があるため、実際の運用時には避けるべきです。

対処法としては、ログの出力回数を最小限に抑える、デバッグ時のみログを出力するなどの工夫が考えられます。

○ログの内容が表示されない時の対処法

TypeScriptでconsole.logを使用しているにも関わらず、期待通りのログがコンソールに表示されない場合があります。

これは、ブラウザや開発環境の設定、またはコードのバグなどが原因となっている可能性があります。

例えば、ログの出力レベルを設定して、特定のレベル以下のログが出力されないようにしている場合や、特定の文字列を含むログをフィルタリングしている場合などが考えられます。

この問題に対する一般的な対処法は次のとおりです。

コンソールの設定やフィルタリングの設定を確認し、必要に応じて修正します。
console.logの代わりに、console.errorやconsole.warnなどの他のメソッドを試してみます。
スクリプトの読み込み順や実行順を確認し、他のスクリプトとの競合がないか確認します。

これらの対処法を検証してみることで、多くの場合、問題の原因を特定し解決することができるでしょう。

●カスタマイズ方法

TypeScriptでのconsole.log活用において、時として標準の動作や出力形式では不足を感じることもあるでしょう。

そんなときは、console.logの挙動をカスタマイズすることで、より便利にデバッグ作業を進めることができます。

○console.logの挙動をカスタマイズする方法

console.logの挙動をカスタマイズするための一つの方法は、既存のconsole.log関数をラップし、新たな関数を作成することです。

この方法を利用すると、ログ出力前後に任意の処理を追加することができます。

例えば、次のコードはconsole.logの前に特定のプレフィックスを追加するカスタム関数を示しています。

// console.logをラップするカスタム関数
function customLog(...args: any[]) {
    console.log("[カスタムログ]", ...args);
}

// 使用例
customLog("これはカスタムログです");

このコードでは、customLogという関数を使用してログを出力することで、出力内容の前に[カスタムログ]というプレフィックスが付与されます。

これにより、どのログがカスタム関数を通じて出力されたのかを簡単に区別することができます。

○カスタムログ関数の作成方法

さらに高度なカスタマイズを行う場合、console.log自体を完全にオーバーライドして、独自のログ関数を作成することも可能です。

この方法を取る場合、ログの出力形式や、エラーハンドリング、さらにはログの出力先など、細かな部分まで手を加えることができます。

下記のコードは、ログ出力時に現在の日時をプレフィックスとして追加するカスタムログ関数の一例を表しています。

function myLog(...args: any[]) {
    const now = new Date();
    const timestamp = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
    console.log(`[${timestamp}]`, ...args);
}

// 使用例
myLog("このログにはタイムスタンプが付与されます");

このコードを実行すると、ログ出力に現在の時刻がプレフィックスとして追加されます。

例えば、上記のコードを13時45分30秒に実行した場合、[13:45:30] このログにはタイムスタンプが付与されますという内容がログに出力されるでしょう。