TypeScript 变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。

可以看成是存储数据的容器。

var 声明

var 关键字用来定义变量。

语法

var [变量名] : [类型] = 值;

例子：

var num:number = 50

const声明

const 声明是声明变量的另一种方式，它们被赋值后不能再改变。 如下：

const msg:string = "this is a string"

尝试修改其值会报错：

const msg:string = "this is a string"
msg = 'erwre'

报错内容：

解构

解构数组

let arr = [123, 456]
let [one, two] = arr
console.log(one); //  123
console.log(two); // 456

编译成js：

var arr = [123, 456];
var one = arr[0], two = arr[1];
console.log(one); //  123
console.log(two); // 456

创建剩余变量

可以在数组里使用 ... 语法创建剩余变量，如下：

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

编译成js：

var _a = [1, 2, 3, 4, 5, 6], first = _a[0], rest = _a.slice(2);
console.log(first); // 1
console.log(rest); // [3, 4, 5, 6]

解构指定元素

也可以解构指定元素，如下：

let [,two,,,five,six] = [1, 2, 3, 4, 5, 6]
console.log(two);  // 2
console.log(five);  // 5
console.log(six);  // 6

编译成js：

var _a = [1, 2, 3, 4, 5, 6], two = _a[1], five = _a[4], six = _a[5];
console.log(two); // 2
console.log(five); // 5
console.log(six); // 6

对象解构

let obj = {
    names: "xiaoming",
    age: 12,
    grade: "six"
};
let { names, age } = obj;
console.log(names) // xiaoming
console.log(age) // 12

编译成js：

var obj = {
    names: "xiaoming",
    age: 12,
    grade: "six"
};
var names = obj.names, age = obj.age;
console.log(names); // xiaoming
console.log(age); // 12

也就是通过 obj.names 创建了 names，通过 obj.age 创建了 age。

创建剩余变量

可以在对象里使用…语法创建剩余变量，如下：

let obj = {
    first: "xiaoming",
    age: 12,
    grade: "six"
};
let { first,... rest } = obj;
console.log(first) // xiaoming
console.log(rest) // {age: 12, grade: 'six'}

编译成js：

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
var obj = {
    first: "xiaoming",
    age: 12,
    grade: "six"
};
var first = obj.first, rest = __rest(obj, ["first"]);
console.log(first); // xiaoming
console.log(rest); // {age: 12, grade: 'six'}

属性重命名

可以给属性重命名不同的名字：

let obj = {
    names: "xiaoming",
    age: 12,
    grade: "six"
}
let { names:newVal, age:newAge } = obj
console.log(newVal) // xiaoming
console.log(newAge) // 12

编译成js：

var obj = {
    names: "xiaoming",
    age: 12,
    grade: "six"
};
var newVal = obj.names, newAge = obj.age;
console.log(newVal); // xiaoming
console.log(newAge); // 12

注意：这里的冒号不是指示类型的。

如果想指定它的类型，需要在其后写上完整的模式，如下：

let obj = {
    names: "xiaoming",
    age: 12,
    grade: "six"
};
let { names, age }:{ names:string, age:number } = obj;
console.log(names) // xiaoming
console.log(age) // 12

编译成js：

var obj = {
    names: "xiaoming",
    age: 12,
    grade: "six"
};
var names = obj.names, age = obj.age;
console.log(names); // xiaoming
console.log(age); // 12

展开

开操作符与解构相反。 是将一个数组展开为另一个数组，或将一个对象展开为另一个对象。

展开数组

示例：

let arr1 = [1, 2, 3];
let arr2 = [ 4, 5, 6];
let arr3 = [0, ...arr1, ...arr2, 7, 8];
console.log(arr3) // [0, 1, 2, 3, 4, 5, 6, 7, 8]
arr3[2] = 22
arr3[5] = 55
console.log(arr3) // [0, 1, 22, 3, 4, 55, 6, 7, 8]
console.log(arr1) // [1, 2, 3]
console.log(arr2) // [4, 5, 6]

编译成js：

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [0].concat(arr1, arr2, [7, 8]);
console.log(arr3); // [0, 1, 2, 3, 4, 5, 6, 7, 8]
arr3[2] = 22;
arr3[5] = 55;
console.log(arr3); // [0, 1, 22, 3, 4, 55, 6, 7, 8]
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4, 5, 6]

展开操作创建了 arr1 和 arr2 的一份浅拷贝。 它们不会被展开操作所改变。

展开对象

示例：

let obj = { name: "xiaoming", age: 12, sex: "man" };
let newObj = { ...obj, name: "xiaofang",  grade: 'six' };
newObj.age = 13
console.log(newObj) // {name: 'xiaofang', age: 13, sex: 'man', grade: 'six'}
console.log(obj) // {name: 'xiaoming', age: 12, sex: 'man'}

编译成js：

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var obj = { name: "xiaoming", age: 12, sex: "man" };
var newObj = __assign({}, obj, { name: "xiaofang", grade: 'six' });
newObj.age = 13;
console.log(newObj); // {name: 'xiaofang', age: 13, sex: 'man', grade: 'six'}
console.log(obj); // {name: 'xiaoming', age: 12, sex: 'man'}

对象的展开比数组的展开要复杂的多。它也是从左至右进行处理，结果仍为对象。
如果有相同的属性，出现在展开对象后面的属性会覆盖前面的属性。

示例：

let obj = { name: "xiaoming", age: 12, sex: "man" };
let newObj = { name: "xiaofang", ...obj, grade: 'six' };
newObj.age = 13
console.log(newObj) // {name: 'xiaoming', age: 13, sex: 'man', grade: 'six'}
console.log(obj) // {name: 'xiaoming', age: 12, sex: 'man'}

编译成js：

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var obj = { name: "xiaoming", age: 12, sex: "man" };
var newObj = __assign({ name: "xiaofang" }, obj, { grade: 'six' });
newObj.age = 13;
console.log(newObj); // {name: 'xiaoming', age: 13, sex: 'man', grade: 'six'}
console.log(obj); // {name: 'xiaoming', age: 12, sex: 'man'}

不过，对象展开有一些限制。它仅包含对象自身的可枚举属性。

当展开一个对象实例时，会丢失其方法。

示例：

class Student {
  count = 12;
  add() {
  }
}
let stu = new Student();
let cloneObj = { ...stu };
cloneObj.count; // 12
cloneObj.add(); // error!

报错：