TP-变量声明 （与ES6变量一致， 熟悉请略过...）

var 声明

//  Var的使用
// 闭包
function f () {
    var a = 10

    return function g () {
        var b = a + 1
        return b
    }
}

var g = f();
g() // b = 11

// 作用域
function f (shouldInitialize) {
    if (shouldInitialize) {
        var x = 10
    }
    return x
}
f(true) // x = 10
f(false) // x = undefined

// 易等于

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

for ( var i = 0; i < 10; i++) {
    setTimeout(function () {
        console.log(i)
    }, 100 * i)
} // 10 ? 为什么呢？ 简单修改例子 , 立即执行函数
for ( var i = 0; i < 10; i++) {
    (function (j) {
        setTimeout(function () {
            console.log(j)
        }, 100 * j)
    }(i)
}

let 声明

// Let 使用

// 块级作用域
function f (input: boolean) {
    let a = 100
    
    if (input) {
        let b = a + 1  // 父级块内的属性是可以被子块引用
        return b
    }
    return b // 子块是不能被父块引用的。 这个是访问不到的。
}

// Or

try {
    throw 'Oh no'
} catch (e) {
    console.log('Catch it', e) // 这里是可以访问到的
}

console.log(e) // 这个是读取不到的。

// Or
// 暂时性死去， 在声明之前引用时访问，是不可以的。
// 只能声明以后访问。
a++
let a = 1

// Or

let a = 1
let a = 2
let a = 3
console.log(a) // Error: let 是不允许再一个块内不允许重复声明重复声明。

// Or 

// 屏蔽的功能

function sumMatrix(matrix: number[][]) {
    let sum = 0;
    for(let i = 0; i < matrix.length; i++) {
        let currentRow = matrix[i];
        for(let i = 0; i < currentRow.length; i++) {
            sum+=currentRow[i];
        }
    }
    return sum;
}

let matrix = [[1,2,3], [4,5,6]]

// Or

// 块级作用域的获取
for (var i = 0; i< 10; i++) {
    setTimeout(function(){
       console.log(i)  // 10个 10
    }, 100 * i)
}
// 改用let
for (let i = 0; i< 10; i++) {
    setTimeout(function(){
       console.log(i)  // 0,1,2,3,4,5,6,7,8,9
    }, 100 * i)
}

const 声明

// 1. const 不能重复声明
// 2. const 是let得增强
// 3. const 声明时，需要带初始值

const numLivesForCat = 9 // 猫有九条命

const kitty = {
    name: 'Kitty',
    numLives: numLivesForCat
}

// 不能直接修改， 我们可以修改kitty的属性
kitty.name = 'Jerry';
kitty.numLives--

let 与 const 对比

相同： 

1. let 和 const 都不能重复声明变量。 

区别： 

1. 声明 const 时， 是需要添加初始值。

let 和 const 如何选取？ 

计划有修改， 那么采用let。 计划没有修改采用const。

解构

// 数组解构

let input = [1,2];

function f([first, second]: [number, number]) {
    console.log(first)
    console.log(second)
}  // 此时你Tp采用元组类型 。 所以抛异常
f(input);

// 修改
let input:[number,number] = [1,2];
function f([first, second]: [number, number]) {
    console.log(first)
    console.log(second)
}  // 此时你Tp采用元组类型 。 所以抛异常
f(input);

// Or 
// ... 拓展运算符
let [first, ...reset] = [1,2,3,4,5];
console.log(first, reset)

// 对象解构

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

let { a, b }:{ a: string, b: number } = o;
console.log(a,b) // foo, 12
// Or

let {a, ...passthrough} = o;
let total = passthrough.b + passthrough.c
console.log(total) // 15

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

//
// ? 可选参数
// b? 也可以是 undefined

function keepWholeObject(wholeObject: {a: string, b?: number}) {
    let {a, b = 1001} = wholeObject;
}

// 函数声明
type C = {a: string, b?: number}

function f({a,b}: C): void {
    
}

// Or
function f({a,b = 0} = {a: ''}):void {
    
}
f({a: 'yes'})
f()
f({}) // Error

展开-拓展(...)

// Array

let first = [1,2]
let second = [3,4]
let bothPlus = [0, ...first, ...second, 5]
console.log(bothPlus) // [0,1,2,3,4,5]

// Object
let default = {
    food: 'spicy',
    price: '$10',
    ambiance: 'noisy'
}
let search = {...default, food: 'rich'};
console.log(search) // {food: 'rich', price: '$10', ambiance: 'noisy'}