TypeScript基础-类型与变量

从开始学习TypeScript已经有两周时间了，部分官网的功能也已经能在重构的本地编译还原，是时候抽时间回归一下TypeScript基础。

类型和变量是每一门编程语言的核心，相信我们最开始学习编程的时候，也是从语言的类型入手，只不过学的语言多了会发现，好像大部分语言的变量和类型都差不多。但是很多时候，bug与漏洞却诞生于最基础的变量类型，比如：JS 弱类型导致代码运行中接受了非预期的输入，浮点运算中的精度丢失等等，相信每一个前端工程师都曾经遇到过这些坑。

工作中，遇到的很多具体应用场景，最终都抽象为对基本类型数据的操作，激进一些的说，类型和变量是才决定一门语言风格的关键。

基本类型

布尔值

let isDone: boolean = true | false

数值

const PI: number = 3.14

字符串

let myName: string = "anonymous"

模板字符串

let name: string = "Li Lei";
let home: string = "Beijing";
let template: string = `His name is ${name}.
    He lives in ${home}.`;

应用在Angular2中组件的 template 定义html；

元组

let x: [string, number];
x = ['loch', 26];
x[2] = 'cgg'; // ok
x[3] = true; // error

元组特性一：已知索引的元素，只能赋予固定类型的值；
元组特性二：越界的数组元素（未定义类型），可以赋予联合类型的值；
补充：联合类型

枚举

枚举是TypeScript扩充的数据类型（相对JavaScript而言），枚举作为一个双向映射队列，可以很方便的查询键值；

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

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

任意值

任意类型代表了它可以拥有任意多的方法和属性，在编译阶段，移除类型检查，比如Angular2中使用引用jquery对象；

declare var $: any;  // jQuery作为第三方库，需要移除类型检查

空值

空值与any刚好相反，表示什么都没有（可以这么理解）；

let x: void = undefined;
let func:() => void = () => {};

null & undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。

类型断言

类型断言表示你已经清楚地知道程序内发生了什么，类似于转换类型，但是类型断言只是在编译阶段起作用；

let strLength: number = (<string>str).length;
let strLength1: number = (str as string).length;

上面罗列出了TS中的基本类型，类型声明可以帮助 IDE 和维护代码的同事更好的理解和维护程序，TS是一门静态类型编程语言，在编译成JS的过程中，严格的校验着每一个变量值；

变量声明

const 和 let

const 声明静态常量，声明的同时必须赋予初始值，赋值后，不得修改；

let 声明变量，声明过得变量不能再次被声明；

var 作用域问题

在熟悉了 JS 变量作用域后，甚至有些喜欢这些JS中才有的变量特性 =o=

var x = [];
for(var i = 0; i<10; i++){
    x.push(function(){
        console.log(i)
    }
}
x[1]() // 10

JS中的变量为函数作用域，上面的例子中，x 中的函数共享 for 作用域中 i 的值，当 for 循环执行完毕后，i 的值为 10，故在 for 循环之后调用函数，i 的值并没有留存函数定义时 i 的值；

喜闻乐见的闭包：

var y = [];
for(var i = 0; i<10; i++){
    x[i] = (function(i){
        return function(){
            console.log(i);
        };
    })(i);
}
x[1]() // 1

另一个神奇的地方，变量提升：

function upVar(arg1){
    if(arg1){
        var x = 1;
    }
    return x;
}
upVar(true); // 1
upVar(false); // undefined

TS 变量

const 与 let 均为块级作用域，针对上面 var 的两个例子，下面给出 TS 解决方案：

for(let i = 0; i<10 ; i++){
    setTimeout(function(){
        console.log(i);
    }, 200*i);
}
// perfect
// let 会为每次迭代创建一个新的作用域留存当前执行的作用域环境

function(x: number){
    let x: string;  // error let 与 函数参数通用一个作用域环境
}

在一个作用域环境中，一个 let 变量只能被声明一次；

for( let i = 0; i<10; i++){
    for( let i = 0; i<10; i++){
        // 内层的同名 let 变量会屏蔽来自上级的同名变量值，以己代之；
    }
}

解构

慎用解构，面对复杂的对象结构，很难完美解构；

let input = [1, 2];
let [first, second] = input;

交换变量值

// swap variables
[first, second] = [second, first];

剩余列表

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]

属性重命名

let {a: newName1, b: newName2} = o;
===
let newName1 = o.a;
let newName2 = o.b;