TypeScript入门教程(二) - 变量声明

在es5中js声明变量是通过var关键字进行变量声明，在es6中我们可以通过let,const两个关键字来进行声明，typescript中支持let,const进行声明变量

Var

在过去的js中(es5之前包括es5)我们声明变量是通过var来声明一个变量，但是var声明变量也有它不足的地方，我们接下来会详细介绍它

var a = 'mickey'

通过上面的方式我们就声明了一个变量a类型是字符串值为'mickey'
我们也可以在函数中声明变量

function fn1() {
    var age = 26
}

如果你是像Java,C等其他语言开发人员会对js中的var声明的变量作用域看起来很奇怪

function fn1(flag: boolean): void | number {
    if(flag) {
        var num = 26
    }
    return num
}
fn1(false) // return undefined
fn1(true) // 26

上面的例子中，变量num声明在if语句中，但是我们在语句的外面还是可以访问它，这是因为var声明可以包含在函数，模块，命名空间和全局作用域内部任何位置被访问，js通过var声明的变量是没有块级作用域

我们在看一个例子

var a = document.getElementsByTagName("a");
for(var i = 0; i < 7; i++){ 
   a[i].onclick = function(){
    console.log(i)
   }
}
// 这里我们点击a标签会输入 7
// 因为循环创建了i变量后面会直接覆盖前面的变量值

为了解决上面的问题我们可以通过闭包来解决

var a = document.getElementsByTagName("a");
for(var i =0; i<a.length; i++){ 
   a[i].onclick = (function(i){
        return function(){alert(i);}
   })(i);
}

还有一种方式通过es6中的let来解决,接下来我们详细介绍let

Let

使用let和之前var声明变量一样

let a = 'mickey'
let b: number = 26

我们通过let声明的方式解决上面的问题

var a = document.getElementsByTagName("a");
for(let i = 0; i < 7; i++){ 
   a[i].onclick = function(){
    console.log(i)
   }
}
// 这里我们点击a标签会输入 0,1,2,3,4,5,6,7

如果你想了解比较详细let如果使用和新的特性你可以参考ECMAScript 6 入门-阮一峰

Const

使用Const和之前var声明变量一样

const a = 'mickey'
const b: number = 26

如果你想了解比较详细Const如果使用和新的特性你可以参考ECMAScript 6 入门-阮一峰

解构

• 数组解构

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

function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f(input);

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

• 对象解构

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

({ a, b } = { a: "baz", b: 101 });

上面简单的介绍了数组解构和对象解构，如果你想详情了解还是推荐你去ECMAScript 6 入门-阮一峰这个对ES6进行非常详细的介绍，相信你会学到很多ES6中所有新特性

上面我们介绍了TypeScript的变量声明，第三节我们将介绍接口

文章参考TypeScript中文网