一、环境配置
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"开关。
二、快捷键
VS Code折腾记 - (2) 快捷键大全，没有更全
备注一下自己常用的：
Shift+F12 找到所有的引用
Ctrl + G 跳转行
Ctrl + Shift + K 删除行
Ctrl + P 打开资源
Shift+Alt+F 代码格式化:
Ctrl + Shift + | 匹配花括号的闭合处，跳转
Alt + up/down 移动行上下
Ctrl + / 添加关闭行注释
三、关键字let const
自己在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如果声明的是复合类型的变量，则只保证变量地址不变，值可以变；
四、箭头函数自动将函数中的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);
五、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
六、TS调用第三方JS
ts(Egret) 与 js 的调用
tsd-提升IDE对JavaScript智能感知的能力
如何生成 .d.ts
cuixu.js:
function test(){
console.log("cuixu test");
}
index.html中进行加载:
<!--jsfile--startTag-->
<script src="js/cuixu.js"></script>
<!--jsfile--endTag-->
libs/cuixu.d.ts 添加声明
declare function test(): void;
LayaSample.ts中直接调用test()方法
七、Laya中自定义组件
自定义组件
把layaeditor.d.ts放到与LayaAir.d.ts同级即可
八、Object
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();
九、$字符串插值
https://rexdainiel.gitbooks.io/typescript/content/docs/template-strings.html
typescript使用${}字符串拼接方法
let v0:string='这个是电压'
let v1:number=220.35;
let str=`这个是格式化字符串(${v0}:${v1}V)`;
console.log(str)
//这个是格式化字符串(这个是电压:220.35V)
需要注意的是任何在插值（${ 和 }）里的占位符都会被当成 JavaScript 表达式来执行，例如：你可以做数学计算。
console.log(`1 and 1 make ${1 + 1}`);
十、回调函数
TypeScript: this bind 和 回调的正确用法
namespace naiking
{
/**
*author : NaiKing
*description:
*/
export class TestCallAndThis {
/**
* 不推荐的回调写法
* 外部调用必须【必须】【必须】在回调参数方法后面添加.bind(this),
* 否则可能会this异常
*/
public static callBackTest(arg:number,callBack:Function):void
{
//返回 2 x arg
let result:number=arg*2;
//不推荐直接调用回调方法，应使用callBack.call(caller,result);
callBack(result);
}
/**
* 推荐的回调写法
* @param arg 参数
* @param caller 调用域
* @param method 指定的回调方法（兼容.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异常的时候的isLoading的值是undefind
private isLoading:boolean = false;
private getResult(rst:number):void
{
console.log("get rusult:"+rst+this.isLoading);
}
constructor()
{
//不推荐的回调写法， 遗漏了bind（this）
logic.TestCallAndThis.callBackTest(1,this.getResult);
//不推荐的回调写法， 使用了bind（this）（ √ ）
logic.TestCallAndThis.callBackTest(1,this.getResult.bind(this));
//提倡的回调写法 ，有无bind(this)都可以
logic.TestCallAndThis.callMethod(1,this,this.getResult);
logic.TestCallAndThis.callMethod(1,this,this.getResult.bind(this));
} }}
