TypeScriptで関数の型を指定する際によく使用される`void`型について、その役割と実践的な使い方を解説します。

void型とは

`void`型は、関数が「何も値を返さない」ことを明示的に示すための型です。JavaScriptやTypeScriptでは、値を返さない関数は暗黙的に`undefined`を返しますが、`void`型を使用することで「戻り値を使用しない」という意図を明確に表現できます。

基本的な使い方

// void型の基本的な使用例
function logMessage(message: string): void {
    console.log(message);
}

// アロー関数での使用例
const showAlert = (message: string): void => {
    alert(message);
}

void型の重要なユースケース

1. イベントハンドラーの型定義

// イベントハンドラーでの使用例
const handleClick = (): void => {
    // クリック時の処理
    document.querySelector('.button')?.classList.add('clicked');
}

button.addEventListener('click', handleClick);

2. コールバック関数の型定義

// コールバック関数での使用例
function processData(callback: () => void) {
    // データ処理
    callback();
}

3. メソッドのオーバーライド

interface Logger {
    log(message: string): void;
}

class ConsoleLogger implements Logger {
    log(message: string): void {
        console.log(message);
    }
}

void型と undefined型の違い

`void`型と`undefined`型は異なります：

// undefined型は明示的にundefinedを返す必要がある
function returnUndefined(): undefined {
    return undefined;
}

// void型は返り値を使用しないことを示す
function noReturn(): void {
    console.log("No return value");
}

void型の注意点

1. `void`型の変数には`undefined`や`null`のみ代入可能

let voidVar: void;
voidVar = undefined; // OK
voidVar = null;      // strictNullChecksが無効な場合のみOK
voidVar = "string";  // エラー

2. コールバック関数の柔軟性

type VoidCallback = () => void;

// 値を返しても問題ない
const callback: VoidCallback = () => {
    return 42; // OK - 戻り値は無視される
}

実践的な使用例

APIリクエストの例

async function postData(url: string, data: object): void {
    try {
        await fetch(url, {
            method: 'POST',
            body: JSON.stringify(data)
        });
        // 戻り値は不要
    } catch (error) {
        console.error('Error:', error);
    }
}

状態更新関数の例

type SetStateFunction = (newValue: string) => void;

const updateUserName: SetStateFunction = (newName) => {
    localStorage.setItem('userName', newName);
    // 戻り値は不要
}

まとめ

`void`型は以下の場合に特に有用です：

  • イベントハンドラーやコールバック関数の型定義
  • 戻り値を使用しないことを明示的に示したい場合
  • インターフェースやメソッドのシグネチャ定義

適切な場面で`void`型を使用することで、コードの意図がより明確になり、型安全性も向上します。関数の戻り値の扱いについて、チーム内での共通理解を促進する効果も期待できます。