【ワンピースで覚えるTypeScript】第１９回 ユニオン型/インターセクション型(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型　属する値がない

//２つの型の関係
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));