TypeScriptで「undefined」と「void」を使い分ける方法：サンプルコード付き

2024-06-20

TypeScriptにおける「undefined」と「void」の使い分け：徹底解説

undefinedは、変数に値が代入されていないことを表すプリミティブ型です。変数宣言時に初期化されていない場合や、明示的にundefinedを代入した場合に発生します。

let x; // x は undefined になる
let y: number;
y = undefined; // y も undefined になる

また、関数から値を返さない場合も、暗黙的にundefinedが返されます。

function noReturn() {
  // 何も返さない
}

let result = noReturn(); // result は undefined になる

voidとは何か？

voidは、関数の戻り値の型を表すために使用する特殊な型です。「戻り値が存在しない」または「処理完了のみを示す」ことを意味します。

function logMessage(message: string): void {
  console.log(message);
}

// 戻り値は使わないため、void型を指定
let result = logMessage("Hello!");

voidは、単に「値が存在しない」という意味のundefinedとは異なります。voidはあくまでも関数の戻り値に特化した型であり、変数に代入することはできません。

undefinedとvoidの使い分け

変数の型注釈:
- 値が代入されていない可能性がある変数には、undefined型の注釈を使用します。
- 確実に値が存在しない変数には、null型の注釈を使用します。

let message: string | undefined; // message は string または undefined になる可能性がある
let result: null; // result は常に null になる

関数の戻り値の型注釈:
- 具体的な値を返す関数には、その値の型に一致する型注釈を使用します。

function sendMessage(message: string): void {
  // 送信処理のみを行い、値を返さない
}

function getLength(str: string): number {
  return str.length; // number型の値を返す
}

まとめ

undefinedは、変数に値が存在しないことを表すプリミティブ型です。
voidは、関数の戻り値が存在しないことを表す特殊な型です。
変数の型注釈にはundefinedまたはnullを使用し、関数の戻り値の型注釈にはvoidを使用します。

これらの違いを正しく理解し、使い分けることで、より明確で堅牢なTypeScriptコードを書くことができます。

補足情報

never型: 関数が決して終了しないことを表す型です。
型ガード: 特定の条件下で変数の型を絞り込むための構文です。

これらの概念についても理解を深めると、より高度なTypeScriptプログラミングが可能になります。

TypeScriptにおける「undefined」と「void」の使い分け：サンプルコード

変数の型注釈

// 値が代入されていない可能性がある変数
let message: string | undefined;

// 確実に値が存在しない変数
let result: null;

この例では、message変数はstring型またはundefined型になる可能性があることを示しています。一方、result変数は常にnull型であることを示しています。

関数の戻り値の型注釈

// 戻り値が存在しない関数
function logMessage(message: string): void {
  console.log(message);
}

// 具体的な値を返す関数
function getLength(str: string): number {
  return str.length;
}

この例では、logMessage関数は戻り値を持たないため、void型の注釈を使用しています。一方、getLength関数はnumber型の値を返すため、number型の注釈を使用しています。

型ガード

function isDefined(value: string | undefined): value is string {
  return typeof value === 'string';
}

let someValue: string | undefined;

if (isDefined(someValue)) {
  someValue.toUpperCase(); // someValueはstring型として扱われる
} else {
  // someValueはundefined型として扱われる
}

この例では、isDefined関数は引数がstring型かどうかを判定する型ガード関数です。この型ガードを用いることで、someValue変数の型を条件分岐によって絞り込むことができます。

その他

オプションパラメータ: 関数の引数が省略可能であることを示す機能です。
デフォルトパラメータ: 関数の引数にデフォルト値を設定する機能です。
レストパラメータ: 可変個数の引数を配列として受け取る機能です。

これらの機能と合わせて、undefinedとvoidを適切に使い分けることで、より柔軟で読みやすいTypeScriptコードを書くことができます。

TypeScriptにおける「undefined」と「void」の使い分け：その他の方法

型エイリアスを用いることで、undefinedやvoidを含む複雑な型をより分かりやすく定義することができます。

type MaybeString = string | undefined; // string型またはundefined型のエイリアス
type VoidFunction = (...args: any[]) => void; // 引数なしでvoidを返す関数の型エイリアス

この例では、MaybeString型はstring型またはundefined型であることを意味し、VoidFunction型は引数なしでvoidを返す関数を表します。

function identity<T>(value: T): T | undefined {
  if (value === undefined) {
    return undefined;
  } else {
    return value;
  }
}

let result = identity<string>("Hello"); // resultはstring型になる
let undefinedResult = identity<number>(undefined); // undefinedResultはundefined型になる

この例では、identity関数は引数の型に一致する型の値を返しますが、引数がundefinedの場合はundefinedを返します。ジェネリック型を用いることで、この汎用的な挙動を様々な型に適用することができます。

型推論

TypeScriptの型推論機能を活用することで、undefinedやvoidを含む型の宣言を省略することができます。

let message = "Hello"; // messageはstring型として推論される
let result = logMessage(message); // resultはvoid型として推論される

function logMessage(message: string): void {
  console.log(message);
}