ts 学习备忘(持续更新)

1.环境配置
Sublime 3搭建TypeScript开发环境
LayaAir引擎入门教程：一篇学会用TypeScript语言开发HTML5
使用VS Code调试TypeScript游戏程序JsTankGame成功！！！
Visual Studio Code的插件debugging in chrome怎么配置
版本不匹配! 全局 tsc (2.2.2) != VS Code 的语言服务(2.1.5)。可能出现不一致的编译错误
示例代码下面的*.js.map文件是干嘛的
source map,主要是方便chrome调试用，用来对应某行js代码对应的原ts的路径和行号。Chrome中的js调试器会在加载js时尝试加载同路径下的.map，然后根据map信息，尝试下载对应的ts代码，如果以上两步都成功完成，那么在给js下断点是就会下到对应的ts代码中的正确位置上。
如果不需要，可以在编译时调整.laya/launch.json中的sourceMaps选项，或者如果是自己调用tsc编译的，就调整tsconfig.json中的"sourceMap"开关。

2.快捷键VS Code折腾记 - (2) 快捷键大全，没有更全
备注一下自己常用的：

Shift+F12 找到所有的引用
Ctrl + G    跳转行
Ctrl + Shift + K    删除行
Ctrl + P    打开资源
Shift+Alt+F 代码格式化:
Ctrl + Shift + | 匹配花括号的闭合处，跳转
Alt + up/down   移动行上下
Ctrl + /    添加关闭行注释

3.let
自己在laya的TS开发中用了let，出现莫名错误，还是不要换了
很多常见的问题都可以通过使用let来解决，所以尽可能地使用let来代替var吧。
let和var定义变量的区别
使用VS Code开发TypeScript--定义变量推荐使用let
Javascript 严格模式详解

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

  {
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
  }
  //输出"varTest changed."，内部"{}"中声明的varTest变量覆盖外部的letTest声明
  console.log(varTest);
  //输出"test let OK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量
  console.log(letTest); 
}());

ES6新增let和const两个变量声明命令,const与let不同点在于：

• const如果声明的变量是简单的值，则不能改变变量的值，修改会报错；
• const如果声明的是复合类型的变量，则只保证变量地址不变，值可以变；

4.箭头函数自动将函数中的this附加到上下文中
一步一步学习TypeScript(11.Arrow Functions_箭头函数➹)

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, 结果却是NaN.
//原因是setTimeout执行的上下文环境为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, 结果正确

//打开ts编译后的js代码
function Arrow1(age) {
    var _this = this;   //自动创建了一个_this变量,指向了当前上下文.
    this.age = age;
    this.add = function () {
        _this.age++; //在这里程序使用的是之前创建的_this中保存的上下文环境,而不是`this`
        console.log(_this.age);
    };
}

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

5.TS语法基础
TypeScript Handbook（中文版）
https://www.tslang.cn/docs/home.html
从 ActionScript3 到 TypeScript（一）
从 ActionScript3 到 TypeScript（二）

类型推理var display = new Shape();
复合类型public source:BitmapData|string;
可以少写一个vo类

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

TypeScript进阶玩法
JavaScript秘密花园
TyptScript语言手册
typescript-any-vs-object
枚举enum

6.TS调用第三方JS
ts(Egret) 与 js 的调用
tsd-提升IDE对JavaScript智能感知的能力
如何生成 .d.ts
cuixu.js:

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

index.html中进行加载:

libs/cuixu.d.ts 添加声明

declare function test(): void;

LayaSample.ts中直接调用test()方法

7.自定义组件
把layaeditor.d.ts放到与LayaAir.d.ts同级即可

ES5对象与ES6 Maps的异同
JavaScript对象详解
JavaScript Object 对象详解
参考TypeScript学习笔记（二）：基本数据类型及数据转换
Object可以当做Hash表来使用，如下：

var obj: Object = {};

function run() {
    obj["a"] = 123;
    //obj.b = "asdf";//这种写法是错误的
    obj["b"] = "asdf";
    obj[100] = true;

    delete obj["100"];//删除使用 delete 关键字

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

end