一、環(huán)境配置

Sublime 3搭建TypeScript開發(fā)環(huán)境
LayaAir引擎入門教程：一篇學(xué)會(huì)用TypeScript語言開發(fā)HTML5
使用VS Code調(diào)試TypeScript游戲程序JsTankGame成功?。?！
Visual Studio Code的插件debugging in chrome怎么配置
版本不匹配! 全局 tsc (2.2.2) != VS Code 的語言服務(wù)(2.1.5)。可能出現(xiàn)不一致的編譯錯(cuò)誤
示例代碼下面的*.js.map文件是干嘛的
source map,主要是方便chrome調(diào)試用，用來對(duì)應(yīng)某行js代碼對(duì)應(yīng)的原ts的路徑和行號(hào)。Chrome中的js調(diào)試器會(huì)在加載js時(shí)嘗試加載同路徑下的.map，然后根據(jù)map信息，嘗試下載對(duì)應(yīng)的ts代碼，如果以上兩步都成功完成，那么在給js下斷點(diǎn)是就會(huì)下到對(duì)應(yīng)的ts代碼中的正確位置上。
如果不需要，可以在編譯時(shí)調(diào)整.laya/launch.json中的sourceMaps選項(xiàng)，或者如果是自己調(diào)用tsc編譯的，就調(diào)整tsconfig.json中的"sourceMap"開關(guān)。

二、快捷鍵

VS Code折騰記 - (2) 快捷鍵大全，沒有更全
備注一下自己常用的：

Shift+F12 找到所有的引用
Ctrl + G    跳轉(zhuǎn)行
Ctrl + Shift + K    刪除行
Ctrl + P    打開資源
Shift+Alt+F 代碼格式化:
Ctrl + Shift + | 匹配花括號(hào)的閉合處，跳轉(zhuǎn)
Alt + up/down   移動(dòng)行上下
Ctrl + /    添加關(guān)閉行注釋

三、關(guān)鍵字let const

自己在laya的TS開發(fā)中用了let，出現(xiàn)莫名錯(cuò)誤，還是不要換了
很多常見的問題都可以通過使用let來解決，所以盡可能地使用let來代替var吧。
let和var定義變量的區(qū)別
使用VS Code開發(fā)TypeScript--定義變量推薦使用let
Javascript 嚴(yán)格模式詳解

(function() {
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';

  {
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
  }
  //輸出"varTest changed."，內(nèi)部"{}"中聲明的varTest變量覆蓋外部的letTest聲明
  console.log(varTest);
  //輸出"test let OK."，內(nèi)部"{}"中聲明的letTest和外部的letTest不是同一個(gè)變量
  console.log(letTest); 
}());

ES6新增let和const兩個(gè)變量聲明命令,const與let不同點(diǎn)在于：

• const如果聲明的變量是簡(jiǎn)單的值，則不能改變變量的值，修改會(huì)報(bào)錯(cuò)；
• const如果聲明的是復(fù)合類型的變量，則只保證變量地址不變，值可以變；

四、箭頭函數(shù)自動(dòng)將函數(shù)中的this附加到上下文中

一步一步學(xué)習(xí)TypeScript(11.Arrow Functions_箭頭函數(shù)?)

function Arrow(age){
    this.age = age;

    this.add= function(){
        this.age ++;
        console.log(this.age);
    }
}

var arrow2 = new Arrow(10);
setTimeout(arrow2.add, 1000);  //期望值為11, 結(jié)果卻是NaN.
//原因是setTimeout執(zhí)行的上下文環(huán)境為window,使得add方法中的this脫離了原上下文而指向了window. 

function Arrow1(age){
    this.age = age;

    this.add= ()=>{
        this.age ++;
        console.log(this.age);
    }
}

var arrow2 = new Arrow1(10);
setTimeout(arrow2.add, 1000); //11, 結(jié)果正確

//打開ts編譯后的js代碼
function Arrow1(age) {
    var _this = this;   //自動(dòng)創(chuàng)建了一個(gè)_this變量,指向了當(dāng)前上下文.
    this.age = age;
    this.add = function () {
        _this.age++; //在這里程序使用的是之前創(chuàng)建的_this中保存的上下文環(huán)境,而不是`this`
        console.log(_this.age);
    };
}

var arrow2 = new Arrow1(10);
setTimeout(arrow2.add, 1000);

五、TS語法基礎(chǔ)

TypeScript Handbook（中文版）
https://www.tslang.cn/docs/home.html
從 ActionScript3 到 TypeScript（一）
從 ActionScript3 到 TypeScript（二）

類型推理var display = new Shape();
復(fù)合類型public source:BitmapData|string;
可以少寫一個(gè)vo類

function CalculateArea(rect: {width:number; height:number; depth?:number;}): number
{}

TypeScript進(jìn)階玩法
JavaScript秘密花園
TyptScript語言手冊(cè)
typescript-any-vs-object
枚舉enum

六、TS調(diào)用第三方JS

ts(Egret) 與 js 的調(diào)用
tsd-提升IDE對(duì)JavaScript智能感知的能力
如何生成 .d.ts
cuixu.js:

function test(){
    console.log("cuixu test");
}

index.html中進(jìn)行加載:

<!--jsfile--startTag-->
    <script src="js/cuixu.js"></script>
<!--jsfile--endTag-->

libs/cuixu.d.ts 添加聲明

declare function test(): void;

LayaSample.ts中直接調(diào)用test()方法

七、Laya中自定義組件

自定義組件
把layaeditor.d.ts放到與LayaAir.d.ts同級(jí)即可

八、Object

ES5對(duì)象與ES6 Maps的異同
JavaScript對(duì)象詳解
JavaScript Object 對(duì)象詳解
參考TypeScript學(xué)習(xí)筆記（二）：基本數(shù)據(jù)類型及數(shù)據(jù)轉(zhuǎn)換
Object可以當(dāng)做Hash表來使用，如下：

var obj: Object = {};

function run() {
    obj["a"] = 123;
    //obj.b = "asdf";//這種寫法是錯(cuò)誤的
    obj["b"] = "asdf";
    obj[100] = true;

    delete obj["100"];//刪除使用 delete 關(guān)鍵字

    for (var key in obj) {
        alert(key);
        alert(obj[key]);
    }
}
run();

九、$字符串插值

https://rexdainiel.gitbooks.io/typescript/content/docs/template-strings.html
typescript使用${}字符串拼接方法

let v0:string='這個(gè)是電壓'
let v1:number=220.35;
let str=`這個(gè)是格式化字符串(${v0}:${v1}V)`;
console.log(str)
//這個(gè)是格式化字符串(這個(gè)是電壓:220.35V)

需要注意的是任何在插值（${ 和 }）里的占位符都會(huì)被當(dāng)成 JavaScript 表達(dá)式來執(zhí)行，例如：你可以做數(shù)學(xué)計(jì)算。

console.log(`1 and 1 make ${1 + 1}`);

十、回調(diào)函數(shù)

TypeScript: this bind 和 回調(diào)的正確用法

namespace naiking
{
    /**
     *author     : NaiKing
     *description: 
     */
    export class TestCallAndThis {
        /**
         * 不推薦的回調(diào)寫法
         * 外部調(diào)用必須【必須】【必須】在回調(diào)參數(shù)方法后面添加.bind(this),
         * 否則可能會(huì)this異常
         */
        public static callBackTest(arg:number,callBack:Function):void
        {
            //返回 2 x arg
            let result:number=arg*2;
            //不推薦直接調(diào)用回調(diào)方法，應(yīng)使用callBack.call(caller,result);
            callBack(result);
        }
        /**
         * 推薦的回調(diào)寫法
         * @param arg 參數(shù)
         * @param caller 調(diào)用域 
         * @param method 指定的回調(diào)方法（兼容.bind(this) 也可以不加.bind(this) ）
         */
        public static callMethod(arg:number,caller:any,method:Function):void
        {
            //返回 2 x arg
            let result:number=arg*2;
            //推薦的做法 .call(caller,result);
            method.call(caller,result);
           
        }
    }
}

推薦第二種寫法

namespage naiking
{
   export class Luna
   { 　　　//注意觀察，this異常的時(shí)候的isLoading的值是undefind
      private isLoading:boolean = false;
      private getResult(rst:number):void
      {
          console.log("get rusult:"+rst+this.isLoading);
        
      }
      constructor()
      {
          //不推薦的回調(diào)寫法， 遺漏了bind（this）
          logic.TestCallAndThis.callBackTest(1,this.getResult);
          //不推薦的回調(diào)寫法， 使用了bind（this）（ √ ）
          logic.TestCallAndThis.callBackTest(1,this.getResult.bind(this));
        
          //提倡的回調(diào)寫法 ，有無bind(this)都可以
          logic.TestCallAndThis.callMethod(1,this,this.getResult);
          logic.TestCallAndThis.callMethod(1,this,this.getResult.bind(this));
      }   }}