TypeScript快速了解_变量声明_02

TypeScript

变量声明

1.var声明

function f(shouldInitialize: boolean) {
    if (shouldInitialize) {
        var x = 10;
    }

    return x;
}

f(true);  // returns '10'
f(false); // returns 'undefined'

作用域规则:
可以在包含它的函数，模块命名空间或全局作用域内部任何位置被访问，
这些作用域规则可能会引发一些错误，多次声明同一个变量并不会报错

捕获变量怪异之处:
setTimeout会在若干毫秒的延时后执行一个函数(等待其他代码执行完毕)

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

用立即执行的函数表达式来捕获每次迭代的i值

for ( var i = 0; i < 10; i++ ) {
	((i)=>{
		setTimeout(function() { console.log(i); }, 100 * i);
	})(i)
}
// 结果 0 1 2 3 4 5 6 7 8 9

2.let声明

块级作用域：
不同于var可以在作用域外访问到，let只能在包含他们的块作用域内访问。

function f(input: boolean) {
    let a = 100;

    if (input) {
        // Still okay to reference 'a'
        let b = a + 1;
        return b;
    }

    // Error: 'b' doesn't exist here
    return b;
}

a的作用域在函数f内 b的作用域在if内 所以在if外层访问不到if内层的b变量
重定义及屏蔽:
let不能在一个作用域下多次声明

3.const 声明

它和let声明相似，他们被赋值后不能被改变，他们拥有与let相同的作用域，但是不能对他们重新进行赋值

4.解构数组

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

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

5.解构对象

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;

6.属性重命名

可以给属性不同的名字

let { a: newName1, b: newName2 } = o;
// 同等与
let newName1 = o.a;
let newName2 = o.b;

7.函数声明

解构也能用于函数声明

type C = { a: string, b?: number }
function f({a,b}: C): voed {}

8.展开

展开与解构相反，他是将一个数组展开为另一个数组或对象展开为另一个对象，
展开操作为浅拷贝，他不会因为展开操作所改变
例如:

let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];

let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
let search1 = { ...defaults, food: "rich" };
let search2 = { food: "rich", ...defaults };

search1 是在前展开 search2 在后展开， search2 将会把defaults.food改变为'rich'

class C {
  p = 12;
  m() {
  }
}
let c = new C();
let clone = { ...c };
clone.p; // ok
clone.m(); // error!

展开操作符会把对象里的事件丢失