TypeScript 变量声明

布满荆棘的人生 2022-06-13 00:13 261阅读 0赞

**一、变量声明**

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();

[TypeScript开发环境搭建-Visual Studio Code][TypeScript_-Visual Studio Code]

[TypeScript 简介整理][TypeScript]

[TypeScript_-Visual Studio Code]: http://blog.csdn.net/u011127019/article/details/73380654
[TypeScript]: http://blog.csdn.net/u011127019/article/details/73380025