TypeScript 变量声明-蒲公英云

TypeScript 变量声明

一、变量声明

let和const是JavaScript里相对比较新的变量声明方式。推荐使用let 方式声明变量，来代替使用var。

TypeScript是JavaScript 的超集，所以它本身就支持let、const，同时还有var。

let 方式声明解决了var方式的弊端，同时扩展了解构、展开等特别实用的功能。

二、let声明变量

1.在TypeScript中语法要求变量在没有声明前不能使用。这个其他强类型语言一样，变量先声明，再使用，避免变量的乱用或混用等冲突。

a++; // 编译不通过
let a;

2.块作用域

当用let声明一个变量，它使用的是词法作用域或块作用域。不同于使用 var声明的变量那样可以在包含它们的函数外访问，块作用域变量在包含它们的块或for循环之外是不能访问的。

function f(input:boolean){
    let a=100;
    if(input){
        let b=a+1;
        return b;
    }
    return b; //作用于使用大括号区分，所以此处不能访问b
}

3.重定义及屏蔽

注：使用var声明变量可以重定义，但是在TypeScript中使用let编译不通过。

let x = 10;
let x = 20; // 错误，不能在1个作用域里多次声明`x`

对于函数变量，可以重定义

//函数作用域变量和块级作用域变量可以相同
function f(condition, x) {
    if (condition) {
        let x = 100;
        return x;
    }
    return x;
}

4.块级作用域变量定的获取

当let声明出现在循环体里时拥有完全不同的行为。不仅是在循环里引入了一个新的变量环境，而是针对每次迭代都会创建这样一个新作用域。这就是我们在使用立即执行的函数表达式时做的事，所以在 setTimeout例子里我们仅使用let声明就可以了。

for (let i = 0; i < 10 ; i++) {
    setTimeout(function() {console.log(i); }, 100 * i);
}

属于结果预料一直。

三、let 解构，并声明变量

1.解构数组

//let 解构数组
let input = [1, 2];
let [first, second] = input;
console.info(input);
console.log(first);
console.log(second);

结构数组是，可以忽略不关心的尾随元素。

//批量定义变量
let [one]=[1,2,3,4,'张三丰']
console.log(one);

2.解构对象

//使用let 对象结构
let o = {
    a: 'foo',
    b: 12,
    e: 'bar'
}
//结构对象中的值，声明变量
let {a,b}=o;
console.log(a);
console.log(b);

部分解构，使用… 语法创建剩余变量：

//你可以在对象里使用...语法创建剩余变量
let {a,...passthrough}=o;
console.info(passthrough.b);
console.info(passthrough.e);

解构时，重命名属性

//属性重命名
let { a: name1, b: age } = o;
console.log(name1);
console.log(age);

解构时，指定默认值

//指定默认值
function testFun(wholeObject: { a: string, b?: number }) {
    let { a, b = 1001 } = wholeObject;
    console.log(a);
    console.log(b);
}
testFun({ a: '张三丰' });

四、let 展开

展开操作与解构相反。

展开对象时，继承对象的属性，现在也包括了函数。

1.将一个数组展开为另一个数组

//数组展开
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
console.info(bothPlus);

2.对象展开

//对象展开
let defaults = {
    name: '张三丰',
    age: 108,
    showInfo: function () {
        console.info('showInfo');
    }
};
let person = { ...defaults, food: 'spicy' };
console.info(person);
    //对象展开中，目前v2.3版已经支持
person.showInfo();