TypeScript

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

こんにちは、テルプロです！

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

テルプロ

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

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

Contents
  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」がおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。

▼以下では、口コミをもとに厳選した「TypeScript学習におすすめのUdemy講座3選」をご紹介しています。ぜひ参考にしてみてください！

【2024年最新】TypeScript学習におすすめのUdemy講座3選 こんにちは、テルプロです！ 「TypeScript学習におすすめのUdemy講座は？」とお悩みではないでしょうか。 ...

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

参考文献
#TypeScript
ABOUT ME
テルプロ
東京都在住のアプリエンジニア。大学では、ソフトウェア開発の研究に取り組む。長期のエンジニアインターンシップを経て、実務スキルを磨き、現在はフリーランスエンジニアとしても活動中。メインはモバイルアプリ開発。IT関連の記事監修も行い、技術の共有と普及に励んでいます。 監修実績（レバテックフリーランス）
BLOG：https://terupro.net
Flutter関連の書籍を出版しました！

こんな記事もおすすめ