TypeScript基础知识

字符串新特性

多行字符串

  这里需要用到反引号，即Tab键上的 ~ 键，所谓多行字符串就是字符串可以换行输出。

var str = `aaa
bbb
ccc`;

字符串模板

  其实都是ES6的语法，${element} 替代以前的 + 连接字符串。

var myname = "Bert";
var getName = function(){
    return "Zuo";
}
console.log(`Hello ${myname}`);
console.log(`Hello ${getName()}`);
console.log(`<div>
<span>${myname}</span>
<p>${getName}</p>
<div>notice format</div>
</div>`)

自动拆分字符串

function test(template,name,age){
    console.log(template);
    console.log(name);
    console.log(age);
}
var myname = "Bert";
var getAge = function(){
    return 18;
}
test `Hello,my name is ${myname},I'm ${getAge()}.`;

  test 后直接跟反引号，其中字符串模板以 ${} 为分割，获得三部分内容存放在数组中也就是 template。

参数新特性

参数类型

  在参数的后面使用冒号来指定参数的类型。

var myname: string = "Bert";

  以上代码声明一个字符串类型的变量，在之后想要修改该变量，如果类型不是string就会报错，这大大帮助减少错误的发生。其实在typescript中，首次给变量赋的值类型会当其默认，之后改变类型的赋值都会报错。可以定义的类型有：
（1）any 任何类型

var name: any = "Hello";

（2）number 数值

var age: number = 18;

（3）boolean 布尔类型

var man: boolean = true;

（4）void 方法中无返回值

function test(): void{
    // 无返回值
}

  综上，写一个小例子：

function test(name: string): string{
    return "";
}
test("Bert");

  以上代码的意思是，这个 test 方法的返回值定义成 string 类型，输出其他类型会报错；方法中参数定义成 string 类型，调用方法是给的参数如果不是 string 类型会报错。
另外，有一种自定义类型的方法，可以帮助语法提示，提高效率。譬如：

// 声明自定义类型
class Person{
    name: String;
    age: number;
}
var Tony: Person = new Person();
// 自动语法提示
Tony.name = "托尼";
Tony.age = 18;

参数默认值

  在参数声明后面用等号来指定参数的默认值。在调用带参的函数方法时，传递的参数数量不足定义的参数数量，就会报错，设置默认值即可以不用传递全部参数。

function test(name: string, age: number, man: boolean=true){
    console.log(name);
    console.log(age);
    console.log(man);
}
test("Bert",18);

  这儿有一个需要注意的地方。设置的默认参数，必须在所有参数的最后，这是因为如果第一个参数默认化，在调用时所传递参数是按顺序执行，第一个参数重新定义了默认的参数，那么最后会少一个参数的值。当然，可以全部定义默认值，这就没什么顺序问题了。

可选参数

  在方法的参数声明之后用问号来标明此参数为可选参数。可选参数如果不传递值的话，不会报错之后显示undefined。

function test(name: string, age?: number, man: boolean=true){
    console.log(name);
    console.log(age);
    console.log(man);
}
test("Bert");

函数新特性

Rest and Spread 操作符

  这个操作符就是 … 它用来声明任意数量的方法参数。这儿有两个用法。
（1）传递任意数量的参数

function fun1(...args){
    args.forEach(function(arg){
        console.log(arg);
    })
}
fun1([1, 2, 3, 4, 5]);

（2）返回参数的用法

function fun2(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
}
var args1 = [1,2];
fun2(...args1);         //1,2,undefined

var args2 = [5,6,7,8,9];
fun2(...args2);         //5,6,7

  fun2中定义的参数有三个，args1传递的参数只有两个，少的会显示undefined，而如果传递参数多了，那多余的参数值不显示。

generator 函数

  控制函数的执行过程， 手工暂停和恢复代码执行。（不太懂，似乎这样function* 就是generator）

function* getStockPrice(stock){
    while(true){
        yield Math.random()*100;
    }
}
var priceGenerator = getStockPrice("IBM");
var limitPrice = 15;
var price = 100;
while(price > limitPrice){
    price = priceGenerator.next().value;
    console.log(`The generator return ${price}`);
}
console.log(`buying ar ${price}`);

destructuring析构表达式

  通过表达式将对象或数组拆解成任意数量的变量。这儿有两个用法。
（1）析构表达式从对象中取值

function getInfo() { 
    return {
        name: {
            firstName: "Bert",
            lastName:"Zuo"
        },
        age: 18
    }
}

var { name: { lastName }, age:AGE } = getInfo();
console.log(lastName);
console.log(AGE);

  析构表达式中的变量名需要和函数方法中定义的相同，其实这一过程就是从函数方法中找到该变量。可以原变量值返回，也可以重命名一下，age:AGE就是返回age的值，只是多了一步以AGE名称输出。name对象里嵌套着对象，那析构表达式也是可以嵌套的。
（2）析构表达式从数组中取值

var arr1 = [1, 2, 3, 4];
var [, , number1, number2] = arr1;
console.log(number1);   //3
console.log(number2);   //4

var arr2 = [1, 2, 3, 4];
var [number1, number2, ...other] = arr2;
console.log(number1);   //1
console.log(number2);   //2
console.log(other);     //[3,4]

var arr3 = [1, 2, 3, 4];
function doSomething([number1, number2, ...other]) { 
    console.log(number1);
    console.log(number2);
    console.log(other);
}
doSomething(arr3);	//1,2,[3,4]

箭头表达式

箭头表达式写法

// 占一行的写法
var sum1 = (arg1, arg2) => arg1 + arg2;

// 多行的写法
var sum2 = (arg1, arg2)=>{ 
    return arg1 + arg2;
}

// 一个参数的写法
var argNmae = arg => { 
    console.log(arg);
}

// 无参数无返回的写法
var ele = () => { 
    
}

常见的应用

var arr = [1, 2, 3, 4, 5];
// filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
console.log(arr.filter(value => value % 2 == 0));

箭头函数的优势

  箭头函数的好处不仅仅在于简化了代码（把function（）转化为（）=>），它最大的好处是解决了this指向问题。可以先看一下ES5中匿名函数导致的this指向问题：

function getName1(name) { 
    this.name = name;

    setInterval(function () { 
        console.log("The name is " + this.name);
    },1000)
}
var name1 = new getName1("Bert");
看一下结果，都没有值的显示，明明想要的是The name is Bert.

  改成箭头函数的写法：

function getName2(name: string) { 
    this.name = name;

    setInterval(() => { 
        console.log("The name is " + this.name);
    },1000)
}
var age1 = new getName2("Bert");

循环语法新特性

  也是ES6的语法，新增了for of 循环，但这之前先看一下以前的 forEach, for in 这两个循环。

forEach

  forEach循环不遍历属性，而且break无效。

var arr = [1, 2, 3, 4, 5];
// 自定义一个数组属性
arr.desc = "five number";

arr.forEach(value => console.log(value));

for in

  for in 循环中的 n 代表的是数组集合中的key值（即数组下标），它遍历属性。

var arr = [1, 2, 3, 4, 5];
// 自定义一个数组属性
arr.desc = "five number";
for (var n in arr) { 
    console.log(arr[n]);
}

for of

  for of 循环 中的 i 直接就是value值，允许breakbreak，但是不读取属性值。

var arr = [1, 2, 3, 4, 5];
// 自定义一个数组属性
arr.desc = "five number";
for (var i of arr) { 
    if (i > 3) { 
        break;
    }
    console.log(i);
}