typescript入门，typescript特性

typescript的介绍这里就不提，之前文章中有，目前typescript还不能直接运行在浏览器中，所以需要使用compiler进行编译成JavaScript文件进行运行。/*特性一：字符串新特性*//*1、多行字符串*/var content = `aaabbbccc`;*******************************************
编译出js为：
var content = "aaa\nbbb\nccc";

*******************************************
/*2、字符串模板*/var myName = 'xuchg';var getName = function(){  return 'xuchg';};console.log(`my name is ${myName}`);console.log(`also ${getName()}`);

*******************************************
编译出js为：
var myName = 'xuchg';
var getName = function () {
    return 'xuchg';
};
console.log("my name is " + myName);
console.log("also " + getName());

*******************************************//构建HTML模板console.log(`  <div>    <span>${myName}</span>    <span>${getName()}</span>  </div>`);
*******************************************
编译出js为：
console.log("\n  <div>\n    <span>" + myName + "</span>\n    <span>" + getName() + "</span>\n  </div>\n");

*******************************************
/*3、自动拆分字符串*/function test(temp,name,age){  console.log(temp);  console.log(name);  console.log(age);}var myName1 = "xuchg";var getAge = function(){  return 23;}test`hello my name is ${myName1} I am ${getAge()}`;

*******************************************
编译出js为：
function test(temp, name, age) {
    console.log(temp);
    console.log(name);
    console.log(age);
}
var myName1 = "xuchg";
var getAge = function () {
    return 23;
};
(_a = ["hello my name is ", " I am ", ""], _a.raw = ["hello my name is ", " I am ", ""], test(_a, myName1, getAge()));

*******************************************
/*二、参数新特性*/var myName2:string = "xuchg";//typescript类型推断var alias = "hehe";//报错// alias = 12;var alias1:any = "这是一个任意类型";
var age:number = 21;var man:boolean = true;function testReturn(name:string):string{  return "这是一个参数和返回值定义类型的方法";}//自定义类型class Person{  name:string;  age:number;}var xcg:Person = new Person();xcg.name = "xuchg";xcg.age = 23;

*******************************************编译出js为：
var myName2 = "xuchg";
//typescript类型推断
var alias = "hehe";
//报错
// alias = 12;
var alias1 = "这是一个任意类型";
var age = 21;
var man = true;
function testReturn(name) {
    return "这是一个参数和返回值定义类型的方法";
}
//自定义类型
var Person = (function () {
    function Person() {
    }
    return Person;
}());
var xcg = new Person();
xcg.name = "xuchg";
xcg.age = 23;

*******************************************
/*2、参数默认值*/var myName3:string = "xuchg";function testVal(a:string,b:string,c:string="这是默认值"){  console.log(a);  console.log(b);  console.log(c);}//注意：带默认值得参数要声明在最后testVal("aaa","bbb","CCC");testVal("aaa","bbb");
*******************************************编译出js为：
var myName3 = "xuchg";
function testVal(a, b, c) {
    if (c === void 0) { c = "这是默认值"; }
    console.log(a);
    console.log(b);
    console.log(c);
} //注意：带默认值得参数要声明在最后

*******************************************
/*3、可选参数：？*/function testChange(a:string,b?:string,c:string="这是默认值"){  console.log(a);  console.log(b.length);//注意：声明了可选参数需要在函数中进行处理，否则会出现错误，而且可选参数不能声明在必选参数的前面  console.log(c);}testChange("XXX");

*******************************************编译出js为：
function testChange(a, b, c) {
    if (c === void 0) { c = "这是默认值"; }
    console.log(a);
    console.log(b.length); //注意：声明了可选参数需要在函数中进行处理，否则会出现错误，而且可选参数不能声明在必选参数的前面
    console.log(c);
}
testChange("XXX");

*******************************************
/*三、函数新特性*//*1、rest and spread操作符，就是用来声明任意数量的方法参数，相当于Java的可变参数*/function rs1(...args){  args.forEach(function(arg){    console.log(arg);  })}rs1(1,2,3);rs1(4,5,6,7,8,9);
*******************************************编译出js为：
function rs1() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    args.forEach(function (arg) {
        console.log(arg);
    });
}
rs1(1, 2, 3);
rs1(4, 5, 6, 7, 8, 9);
//另一种情况function rs2(a,b,c){  console.log(a);  console.log(b);  console.log(c);}var args = [1,2];// rs2(...args);

*******************************************/*2、generator函数，控制函数的执行过程，手工暂停和恢复代码的执行，只支持ES6*/function* doThing(){  console.log("start");  yield;  console.log("finish");}var func = doThing();func.next();func.next();
*******************************************编译出js为：
function doThing() {
    return __generator(this, function (_a) {
        switch (_a.label) {
            case 0:
                console.log("start");
                return [4 /*yield*/];
            case 1:
                _a.sent();
                console.log("finish");
                return [2 /*return*/];
        }
    });
}
var func = doThing();
func.next();
func.next();

*******************************************/*3、destructuring析构表达式，是通过表达式将对象或数组进行拆解成任意数量的变量*/function getStock(){  //返回一个对象  return {    nameVal:'xuchg',    ageVal:23  }}//以下为js中的写法，以作对比var stock = getStock();var name1 = stock.nameVal;var age1 = stock.ageVal;//typescript的写法var {nameVal,ageVal} = getStock();console.log(nameVal);console.log(ageVal);//析构表达式接受的变量名必须和返回对象的变量名相同//析构表达式从数组中取值var arr = [1,2,4];var [num1,num2,...otherNum] = arr;console.log(num1);console.log(num2);console.log(otherNum);//用在方法上function doSomeThing([num1,num2,...otherNum]){  console.log(num1);  console.log(otherNum);}doSomeThing(arr);//拆分参数变量
*******************************************编译出js为：

function getStock() {
    //返回一个对象
    return {
        nameVal: 'xuchg',
        ageVal: 23
    };
}
//以下为js中的写法，以作对比
var stock = getStock();
var name1 = stock.nameVal;
var age1 = stock.ageVal;
//typescript的写法
var _b = getStock(), nameVal = _b.nameVal, ageVal = _b.ageVal;
console.log(nameVal);
console.log(ageVal);
//析构表达式接受的变量名必须和返回对象的变量名相同
//析构表达式从数组中取值
var arr = [1, 2, 4];
var num1 = arr[0], num2 = arr[1], otherNum = arr.slice(2);
console.log(num1);
console.log(num2);
console.log(otherNum);
//用在方法上
function doSomeThing(_a) {
    var num1 = _a[0], num2 = _a[1], otherNum = _a.slice(2);
    console.log(num1);
    console.log(otherNum);
}
doSomeThing(arr); //拆分参数变量
var _a;

*******************************************