9cubed
ブログ | Tailwind | Vite | Python | Node.js | Linux | PowerShell | その他 | 将棋ウォーズ | 歌の練習
< 前の記事

TypeScript - 既存の型の別名の付与(type)

次の記事 >

TypeScript - インターセクション型(Intersection Types)

TypeScript

TypeScript - ユニオン型(Union Types)

公開日:2019-01-15
更新日:2019-05-14

1. 概要

ユニオン型(共用体型)を使うと、保持できる型や値を限定できます。

let 変数名: 値 or 型 | 値 or 型  | 値 or 型  | ... ;

2.1 サンプル

let v1: "ON" | "OFF" = "ON";
v1 = "OFF";
//ビルドエラー
//v1 = "abc";

type    Blood = 'O' | 'A' | 'B' | 'AB';
let v2: Blood;
v2 = 'A';
v2 = 'AB';
//ビルドエラー
//v2 = 'test'; 

type    Num = 1 | 2 | 3 | 4 | 5;
let v3: Num;
v3 = 1;
//ビルドエラー
//v3 = 6; 

type    NumEx = number | "∞";
let v4: NumEx;
v4 = 5;
v4 = "∞";
//ビルドエラー
//v4 = "abc";

2.2 サンプル

interface Type1 {
	a: number;
	b: number;
}
interface Type2 {
	c: number;
	d: number;
}
type Type3 = Type1 | Type2;

let data1: Type3 = { a: 1, b: 2 }; //OK:Type1を満たす
let data2: Type3 = { c: 3, d: 4 }; //OK:Type2を満たす

//プロパティの不足によるビルドエラー
//let data3: Type3 = { a: 1, c: 3 };

//Type1 と Type2 のどちらも満たしてしまうため、
//代入はできるが、「.」でアクセスできなくなる
let data4: Type3 = { a: 1, b: 2, c: 3, d: 4 };
console.log(data4);

//ビルドエラー
//console.log(data4.a); //NG:Type2に存在しない
//console.log(data4.b); //NG:Type2に存在しない
//console.log(data4.c); //NG:Type1に存在しない
//console.log(data4.d); //NG:Type1に存在しない

//OK
console.log(data4["a"]); //1
console.log(data4["b"]); //2
console.log(data4["c"]); //3
console.log(data4["d"]); //4


< 前の記事

TypeScript - 既存の型の別名の付与(type)

次の記事 >

TypeScript - インターセクション型(Intersection Types)

YouTube X

新着一覧

  • SCSS のインストールVite
  • Tailwind CSS のプロジェクトの作成Tailwind
  • TypeScriptのプロジェクトの作成Vite
  • Flask のインストールと動作確認Python
  • 簡易Webサーバーの作成Python
  • pipeline で文章の生成Python
  • pipeline で文章の要約Python
  • 音声から文字起こしPython
  • Node.js のインストールNode.js
  • .ps1(PowerShellスクリプト)を実行可能にするPowerShell

アーカイブ

  • 2025/12
  • 2025/11
  • 2025/10
  • 2025/09
  • 2025/08

以前のカテゴリー一覧

  • CakePHP3
  • CentOS7
  • HTML・CSS・JavaScript
  • Haskell
  • JavaScript
  • Kotlin
  • Laravel5
  • PHP
  • Python
  • Ruby
  • RubyOnRails5
  • TypeScript
  • Vue.js
  • Webサーバ講座
  • Webプログラミング講座
  • jQuery
  • linux
  • パソコン講座
  • ブログ
  • プログラミング講座
  • メモ帳作成講座
  • 数学

Copyright © 9cubed. All Rights Reserved.

プライバシーポリシー 利用規約
▲