Day20 【牙起來】 函式(function) - Typescript

: 冒號(colon) 在Typescript中定義著前面的變數或function的型別

接收的參數型別

function 接收Input參數的小括號裡，Parameter必須帶有型別
ex: x: number

function test(x: number) {
    console.log(x);
}

若沒給參數型別的話，會出現 TS7006: Parameter implicitly has an 'any' type. 錯誤

返回的參數型別

若要定義返回值function return的型別
則是加在Parameter右括號的後方
ex: : void、: number

function test1(x: number): void {
    console.log(x);
}

function test2(x: number): number {
    console.log(x);
    return x;
}

---

接收物件參數

function接收一個武器物件，顯示此把武器的攻擊力
來玩看看會怎麼樣
用getAtk()來取得物件的攻擊力

let weapons: Array<Weapon> = [
    {name: '小劍', atk: 5},
    {name: '彎刀', atk: 7},
    {name: '大魔劍', atk: 11},
];

interface Weapon {
    name: string;
    atk: number;
}

function getAtk(weapon: Weapon): number {
    return weapon.atk;
}

let w = weapons[1];
console.log('您手上武器的攻擊力為: ' + getAtk(w));

現在加上三件防具物件
用calDmg()接收一把武器、一件裝備
計算這把武器可以對這件裝備造成多少傷害

let weapons: Array<Weapon> = [
    {name: '小劍', atk: 5},
    {name: '彎刀', atk: 7},
    {name: '大魔劍', atk: 11},
];

let armors: Array<Armor> = [
    {name: '大盾', def: 3},
    {name: '五角盾', def: 6},
    {name: '方金盾', def: 9},
]

interface Armor {
    name: string;
    def: number;
}

interface Weapon {
    name: string;
    atk: number;
}

function getAtk(weapon: Weapon): number {
    return weapon.atk;
}

function calDmg(weapon: Weapon, armor: Armor): number {
    return weapon.atk - armor.def;
}


let w = weapons[1];
let a = armors[1];
console.log('武器可以對裝備造成: ' + calDmg(w, a) + '傷害');

返回多種型別

定義好返回型別後，只能return該型別的值
這種情況下一定要返回number

不能說有的情況要返回數字Number、有的返回字串String、有的返回null
一定要統一口徑，符合函式的定義

function getAtk(weapon: Weapon): number {
    if (weapon.atk < 1) {
        // 這把武器似乎沒任何傷害，所以被扔進虛空辣
        return;
    }

    if (weapon.atk > 9) {
        return '這把武器很痛';
    }

    return weapon.atk;
}

若想返回多種型別，可以使用 | 來達成
返回型別改寫成這樣 number | string | void

function getAtk(weapon: Weapon): number | string | void {
    if (weapon.atk < 1) {
        // 這把武器似乎沒任何傷害，所以被扔進虛空辣
        return;
    }

    if (weapon.atk > 9) {
        return '這把武器很痛';
    }

    return weapon.atk;
}

接收物件陣列

如果今天要一次印出大量的武器攻擊力

function 需要接收多個武器
Parameter 為武器的陣列，而return值為數字陣列

function getAtks(weapons: Array<Weapon>): Array<number> {
    let result: number[] = [];
    weapons.forEach(
        weapon => {
            result.push(weapon.atk);
        }
    )

    return result;
}

console.log('您手上武器的攻擊力為: ' + getAtks(weapons));

返回組合物件

設計一個function來融合武器和裝備
組出融合的物件，具有原本的武器攻擊力、裝備防禦力
連武器名稱也都串接保留

function mix(weapon: Weapon, armor: Armor): { name: string, atk?: number, def?: number } {
    return {
        name: weapon.name + armor.name,
        atk: weapon.atk,
        def: armor.def
    };
}

let w = weapons[0];
let a = armors[1];
console.log('融合成的武器: ' + JSON.stringify(mix(w, a)));