TypeScript

【TypeScript入門】ユニオン型の概念や使い方を解説!

こんにちは、アプリ開発者のテルです!

「ユニオン(Union)型の使い方がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. TypeScriptのユニオン型の使い方がわかるようになる
  2. コードを用いた解説で、初心者でも簡単に理解できる

Typescriptにおけるユニオン型について

ユニオン型とは

  1. 複数の方を組み合わせて「型T or 型U」のような「または」の意味を表せるもの

ユニオン型を理解する上で押さえておくべきポイントは上記の1点のみです。

では早速、コードを用いて解説していきます!

基本的な使い方

import React from "react";

const Example = () => {
  /// ユニオン型(複数の方を組み合わせて「型T or 型U」のような「または」の意味を表せる)
  let strOrNum: string | number = "Hello";
  strOrNum = 123;

  let strOrNumOrBool: string | number | boolean = "Hello";
  strOrNumOrBool = true;

  let helloOrNumOrBool: "Hello" | number | boolean = "Hello";

  // typeを使用することで独自の型を作成できる
  type HelloOrNum = "Hello" | number;
  const hello: HelloOrNum = "Hello";

  // 例えばこんな感じ
  type DayOfWeek = "Monday" | "Tuesday";
  const day: DayOfWeek = "Monday";
};

export default Example;

簡単解説

上記のようにユニオン型を使用することで、複数の方を組み合わせて「型T or 型U」のような「または」の意味を表すことができます。

また、typeを使用することで独自の型を作成することもできます。

以上が、ユニオン(Union)型の基本的な使い方です。

まとめ

今回は「TypeScriptにおけるユニオン(Union)型」の使い方を解説しました。

今回解説したユニオン型は、TypeScriptを書く上では欠かせない型の指定になるのでしっかりと押さえておきましょう。

TypeScriptを本格的に学びたい場合は「Udemy」がおすすめです。私も含め、現役エンジニアの多くが技術のキャッチアップに利用しています。

▼TypeScript学習におすすめのUdemy講座はこちら

本記事が参考になっていれば幸いです。

最後までご覧いただきありがとうございました。ではまた!

エンジニア就活対策