2019 - 02 typescript的學習（結合cocos creator）

1. ts 是 js 的超集（功能更多）

2. ts 編寫完要翻譯成 js 來運行

3. ts 具有強類型語言的優點，又有腳本語言免編譯見效快的優點（更易懂）

4. ts 支持接近完美的代碼提示

5. ts 可以重構（適合大型項目）

6. ts 符合 ES6 標準（未來趨勢）

======================================

1. 編譯代碼 -- npm install -g typescript  , tsc xx.ts 

======================================

1. 類型註解 -- 一種輕量級的爲函數或變量添加約束的方式

// 希望 greeter函數接收一個字符串參數
function greeter(person: string) {
    return "Hello, " + person;
}

2. 接口 -- 用來描述一個擁有某些類型字段的對象

// 接口聲明
interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

3. 類 -- 只是 js 裏常用的基於原型面向對象編程的簡寫

// 注意 -- 類和接口可以一起共作; 在構造函數的參數上使用public等同於創建了同名的成員變量。

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

======================================

1. 基礎類型 -- 布爾值,數字,字符串,數組,元組 Tuple,枚舉,Any,Void,Null 和 Undefined,Never,Object,類型斷言

2. 字符串的模板字符串用法（被反引號包圍（ `），並且以${ expr }這種形式嵌入表達式）

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

3. 數組的定義 

// 第一種 -- 在元素類型後面接上 []，表示由此類型元素組成的一個數組
let list: number[] = [1, 2, 3];

// 第二種 -- 使用數組泛型，Array<元素類型>
let list: Array<number> = [1, 2, 3];

4. 元組 Tuple（表示一個已知元素數量和類型的數組，各元素的類型不必相同）

let x: [string, number];
x = ['hello', 10]; // OK

x = [10, 'hello']; // Error

5. 枚舉（使用枚舉類型可以爲一組數值賦予友好的名字）

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName);  // 顯示'Green'因爲上面代碼裏它的值是2

未完待續（https://www.tslang.cn/docs/handbook/basic-types.html）

======================================

1. ccc中使用 ts 的屬性類型聲明

const LEVEL = cc.Enum({EASY:1,HARD:2});

@ccclass
export class Game extends cc.Component {
    // 整型
    @property(cc.Integer)
    intVar: number = 0;
    // 浮點型
    @property(cc.Float)
    floatVar: number = 0;
    // 布爾型
    @property(cc.Boolean)
    boolVar: boolean = false;
    // 節點
    @property(cc.Node)
    nodeVar: cc.Node = null;
    // 節點數組
    @property([cc.Node])
    nodeArrVar: Array<cc.Node> = [];
    // Label
    @property(cc.Label)
    labelVar: cc.Label = null;
    // 預製體
    @property(cc.Prefab)
    prefabVar: cc.Prefab = null;
    // 點
    @property(cc.Vec2)
    vec2Var: cc.Vec2 = cc.v2();
    // 自定義節點
    @property(Player)
    palyerVar: Player = null;
    // 重點來了，自定義枚舉
    /**
     * 全局變量
     * const LEVEL = cc.Enum({EASY:1,HARD:2});
     */ 
    @property({
        type:LEVEL
    })
    enumVa = LEVEL.EASY;
}