Day16 【牙起來】 成員、方法 - Typescript

將我們前幾天的小遊戲程式 store.component.ts 拿出來

整個 .ts 檔案都是用 Typescript 語法
我們將其中的 class 物件部分拿出來，貼到Typescript專案的 main.ts 上分析

並且要拿掉程式碼 implements OnInit
因為這段是給Angular專案看的

或者說因為沒有 @angular/core 的 node_modules包
沒得使用，所以才要拿掉

Angular中的物件

接下來我們來看一下何謂Angular元件中的物件

以下是 main.ts 檔案

export class StoreComponent {

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

    constructor() {
    }


    ngOnInit(): void {
    }

}

接下來執行

> tsc main.ts

來看一下生成出來的 .js 檔案

"use strict";
exports.__esModule = true;
exports.StoreComponent = void 0;
var StoreComponent = /** @class */ (function () {
    function StoreComponent() {
        this.weapons = [
            { name: '小劍', atk: '5' },
            { name: '彎刀', atk: '7' },
            { name: '大魔劍', atk: '11' }
        ];
    }
    StoreComponent.prototype.ngOnInit = function () {
    };
    return StoreComponent;
}());
exports.StoreComponent = StoreComponent;

可以看見用Javascript語法編寫而成的一個物件

等於說你寫短短少少的幾行.ts文字，等同於以上落落長的.js程式碼

成員 與 方法

仔細看程式碼的其中一部份

StoreComponent 是一個物件變數，底下有

• StoreComponent() 方法，其中裡面有 weapons 成員
• ngOnInit 方法

這也就是為什麼在前面章節提到
不是變數(Variable) 而是成員(Member)
不是函式(Function) 而是方法(Method)

因為這些東西、功能被包裝成了一個物件，是物件底下的功能

在物件導向的世界裡
原本認知的變數就稱作成員(Member)
原本認知的函式就稱作方法(Method)

在前幾天的小遊戲中
我們在程式碼使用this ，代表了這個物件本身
是透過 this.hp 來取得這個物件底下的成員 hp

複雜一點的程式碼

我們拿掉 ngOnInit() 與 constructor()

然後新增一些東西，在.ts的方法裡面寫函式

export class StoreComponent {
    atk = 1;

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

    addAtk() {
        this.atk += 1;
    }

    test() {
        let a = '10';

        let printHello = function () {
            console.log('Hello');
        }

        printHello()
    }
}

編譯完後的.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StoreComponent = void 0;
class StoreComponent {
    constructor() {
        this.atk = 1;
        this.weapons = [
            { name: '小劍', atk: '5' },
            { name: '彎刀', atk: '7' },
            { name: '大魔劍', atk: '11' }
        ];
    }
    addAtk() {
        this.atk += 1;
    }
    test() {
        let a = '10';
        let printHello = function () {
            console.log('Hello');
        };
        printHello();
    }
}
exports.StoreComponent = StoreComponent;

• 橘色區塊代表物件(Object)
• 綠色區塊是方法(Method)
• 黃色區塊是成員(Member)
• 藍色區塊是變數(Variable)、函式(Function)

我們在 .ts 檔中沒有寫 constructor()
可是編譯完後出現在 .js 檔案中
代表 constructor 是物件構件時的必要步驟

若能看懂以上的物件結構對應關係，恭喜你已經完成32%的Typescript