![見出し画像](https://assets.st-note.com/production/uploads/images/111989400/rectangle_large_type_2_b2e5f7f0f279d0b3419530f1b3aa3b17.png?width=1200)
【ワンピースで覚えるTypeScript】第19回 ユニオン型/インターセクション型(JavaScript学習者向け)
今回はTypeScriptのユニオン型/インターセクション型について、説明します。
いわば、「または」と「かつ」にあたるものですね!
それらには、いろいろな関係性があります。そちらも踏まえて理解しましょう!
type Wanted = {
bounty: number;
}
type Ability = {
devil_fruits: string;
}
type Character = Wanted | Ability;
const chopper1:Character = {
bounty: 1000
}
const chopper2: Character = {
devil_fruits: "ヒトヒトの実"
}
/*
const chopper3: Character = {
name: "チョッパー"
}*/
function GetBounty1(chara: Wanted): number {
return chara.bounty;
}
/*
function GetBounty2(chara: Character): number {
//Ability型かもしれない
return chara.bounty;
}*/
type Wanted1 = {
bounty: number;
data: number;
}
type Ability1 = {
devil_fruits: string;
data: string;
}
type Character1 = Wanted1 | Ability1;
function GetData(chara: Character1) {
return chara.data;//dataの型は string | number
}
//インターセクション型
type Person2 = {
name: string;
}
type Ability2 = {
devil_fruits: string;
}
type AbilityPerson = Person2 & Ability2;
const luffy:AbilityPerson = {
name: "ルフィ",
devil_fruits: "ゴムゴムの実"
}
//プリミティブ型のインターセクション型
type StringAndNumber = string & number;
//never型 属する値がない
//2つの型の関係
type Wanted3 = { bounty: number };
type Ability3 = { devil_fruits: string };
function GetBounty3(chara: Wanted3){
return chara.bounty;
}
function GetDevilFruits3(chara: Ability3) {
return chara.devil_fruits;
}
const WantedOrAbility =
Math.random() < 0.5 ? GetBounty3 : GetDevilFruits3;
//変数WantedOrAbilityはユニオン型
const jinbe: Wanted3 = {
bounty: 1100000000
}
//WantedOrAbility(jinbe);
//引数はWanted3 & Ability3を渡す
const chopper3: Wanted3 & Ability3 = {
bounty: 1000,
devil_fruits: "ヒトヒトの実"
}
console.log(WantedOrAbility(chopper3));
//オプショナルプロパティ
type Character2 = {
name: string;
devil_fruits?: string;
// string | undefined
}
const sanji:Character2 = {
name: "サンジ"
}
type Character3 = {
name: string;
devil_fruits: string | undefined;
}
const sanji2: Character3 = {
name: "サンジ",
devil_fruits: undefined
//undefinedでもいいのでdevil_fruitsが必要
}
//省略できる場合は,オプショナルプロパティ
//オプショナルチェイニング
type Character4 = {
name: string;
devil_fruits: string;
}
function GetDevilFruits4(chara: Character4){
console.log(chara.devil_fruits)
}
const chopper4: Character4 = {
name: "チョッパー",
devil_fruits: "ヒトヒトの実"
}
GetDevilFruits4(chopper4);
function GetDevilFruits5(chara: Character4 | undefined) {
//console.log(chara.devil_fruits)
console.log(chara?.devil_fruits)
}
const zoro: undefined = undefined;
GetDevilFruits5(zoro);
//メソッドの呼び出しも使用可
type Character5 = {
hasAbility(): boolean;
}
function checkAbility(chara: Character5 | null){
if(chara?.hasAbility()){
return "能力者です";
}
}
//関数の呼び出しも使用可
type Title = () => string;
function GetTitle(title: Title | null) {
return title?.();
}
console.log(GetTitle(()=>"ワンピース"));
console.log(GetTitle(null));
function GetTitle1(title: Title | null) {
return title?.().toUpperCase();
//?.はそれ以降をまとめて飛ばす効果をもつ
}
console.log(GetTitle1(() => "onepiece"));
console.log(GetTitle1(null));
この記事が気に入ったらサポートをしてみませんか?