TypeScript笔记一：字符串新特性、参数新特性、函数新特性

TypeScript 是 JavaScript 的超集，可以支持 ECMAScript 的各种新特性

在线编辑器地址：
慕课网typescript文档

1、TypeScript的安装与使用：

注：安装 Node.js 环境：（version: 8.14.0+)

通过 npm 全局安装 TypeScript：
npm install -g typescript

新建一个hello.ts文件
export class Hello {
    
}
通过cmd运行：tsc hello.ts
编译后生成hello.js文件

2、字符串新特性：

（1）多行字符串
在ts中用``拼接多行字符串不报错

var aa = `aaaa
bbbb
ccc`

（2）字符串模板
在多行字符串中用一个表达式去插入变量或方法

var myname = 'xiao ming';
var getname = function(){
    return 'xiaoming';
}
console.log(`hello ${myname}`)
console.log(`hello ${getname()}`)
console.log(`<div>
    <span>${myname}</span>
    <span>${getname()}</span>
    <span>这是是ts写法</span>
</div>`)

编译后：

var myname = 'xiao ming';
var getname = function () {
    return 'xiaoming';
};
console.log("hello " + myname);
console.log("hello " + getname());
console.log("<div>\n    <span>" + myname + "</span>\n    <span>" + getname() + "</span>\n    <span>\u8FD9\u662F\u662Fts\u5199\u6CD5</span>\n</div>");

（3）自动拆分字符串
用字符串模板去调用方法时，字符串模板中表达式的值会自动赋值给被调用方法中的参数

function test(template, name, age) {
    console.log(template)
    console.log(name)
    console.log(age)
}
var myname = 'xiao ming';
var getage = function () {
    return 20;
}
test`hello my name is ${myname}, I am ${getage()}`

编译后

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}
var myname = 'xiao ming';
var getage = function () {
    return 20;
};
test(__makeTemplateObject(["hello my name is ", ", I am ", ""], ["hello my name is ", ", I am ", ""]), myname, getage());

运行结果：

3、参数新特性：

（1）参数类型：
在参数名称后面使用冒号来指定参数类型

TS有类型推断机制：
var myname = 'xiao ming'; //第一次为某个变量去赋值时，推断这个变量是什么类型
myname = 13; // 再赋值13就会报错，认为它是字符类型

var myname:any = 'xiao ming'; //既想是字符串又想是数字，赋值any类型
myname = 13; 

var myname: any = 'xiao ming'; 

var sex: string = 'woman';

var age: number = 20;

var woman: boolean = true;

function test(): void{ // void表示不需要返回值
    return;
}

function test1(): string{ // 除了在变量后面声明类型，也可以在方法后面声明类型
    return '';
}

function test2(name:string): string{
    return '';
}
test2('112') // 参数必须也是字符类型
test2(112) // 参数不可以是数字类型

// 自定义类型:在ts中可以通过class或接口来声明自定义类型
class  Person {
    name:string;
    age:number;
}
var xiaoming:Person = new Person();
xiaoming.name = 'xiao ming'; // ts编辑器会自动出现自定义类型的属性提示
xiaoming.age =  20;

（2）默认参数：
在参数声明后面用等号来指定参数的默认值

var myname:string='xiao ming';

注：着重说明给方法和变量指定默认值

var myname: string = 'xiao ming';  // 变量指定默认值

function test(a: string, b: string, c: string) {
    console.log(a);
    console.log(b);
    console.log(c);
}
test('xx','yy','zz') //只有传三个参数才不会报错

function test1(a: string, b: string, c: string='xyz') {
    console.log(a);
    console.log(b);
    console.log(c);
}
test1('xx','yy') // 当参数指定默认值时，可以不传三个参数

注： 带默认值的参数一定要声明在最后，声明在前面会报错
function test2( c: string='xyz', a: string, b: string) {
    console.log(a);
    console.log(b);
    console.log(c);
}
test2('xx','yy') // 传两个参数会认为是前两个参数值

（3）可选参数：
在方法的参数声明后面用问号来标明此参数为可选参数

function test(a: string, b?: string, c: string='xyz') {
    console.log(a);
    console.log(b);
    //console.log(b.length); // 要注意可选参数没传时，处理逻辑，否则报错
    console.log(c);
}
test('xx') // 可以只传一个参数，第二个参数为可选参数，第三个参数有默认值

运行结果：

注：可选参数不能声明在必填参数前面，否则报错

function test(a?: string, b: string, c: string='xyz') {
    console.log(a);
    console.log(b);
    console.log(c);
}
test('xx')   // 报错  必填参数不能声明在可选参数后面

4、函数新特性：

（1）Rest and Spread操作符：（用…声明）
用来声明任意数量的方法参数

function func1(...args) {
    args.forEach(function (arg) {
        console.log(arg)
    })
}

func1(1, 2, 3)  
func1(7,8,9,10,11)   // 传多少个参数都可以

声明固定数量的方法参数
function func1(a,b,c) {
    console.log(a)
    console.log(b)
    console.log(c)
}

var args = [1, 2];
func1(...args); // 这种方法在ts编辑器中会报错，但能正常编译成js

var args1 = [7, 8, 9, 10];
func1(...args1);// 这种方法在ts编辑器中会报错，但能正常编译成js

（2）generator函数:（在function加上就是声明了generator函数）
写法： function 通过yield关键字来暂停执行，相当于打断点
控制函数的执行过程，手工暂停和恢复代码的执行

function* doSomething(){
  console.log('start');
  yield;
  console.log('finished');
}
// doSomething();不起任何作用

var func1 = doSomething();// 必须把方法声明成一个变量再去执行，才有效
func1.next(); // 执行到yield关键字中止  输出start
func1.next();// 必须.next断续执行   输出finished

（3）destructuring析构表达式：
通过表达式将对象或数组拆解成任意数量的变量

function getStock() {
    return {
        code: 'huawei',
        price:10
    }
}

// es5中的写法：
// var stock = getStock();
// var code = stock.code;
// var price = stock.price;

// es6写法：
var { code, price } = getStock(); // {}里面的变量必须和方法中的属性名一致，不然会报错，解析不到

//如果本地的变量非要是codex，如下写法：表示别名放到属性名中
var { code: codex, price } = getStock();
console.log(codex)

如何取对象？通过表达式将对象拆解成本地的变量
function getStock() {
    return {
        code: 'huawei',
        price: {
            price1: 100,
            price2:200
        }
    }
}
var { code: codex, price:{price1} } = getStock();
console.log(price1) // 100

通过表达式将数组拆解成本地的变量
var array1 = [1, 2, 3, 4];
var [number1, number2] = array1;
console.log(number1, number2) // 1 2

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

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

var [number1, number2, ...other] = array1;
console.log(number1,number2,other) // 其中other输出一个数组[3,4]

// 结果和上面一样
function doSomething([number1, number2, ...other]) {
    console.log(number1, number2, other); // 其中other输出一个数组[3,4]
}
doSomething(array1)

5、表达式和循环：

（1）箭头表达式
用来声明匿名函数，消除传统匿名函数中的this指针问题

var sum = (arg1, arg2) => arg1 + arg2   // 单行写法

var sum = (arg1, arg2) => {  // 多行写法
    return arg1 + arg2
}
注：(arg1, arg2)部分可以是()无参数，也可以是arg1一个参数

var array = [1, 2, 3, 4];
console.log(array.filter(value => value%2 == 0))   // 2 4

function getStock(name: string) {
    this.name = name;
    setTimeout(function () {
       console.log(`my name is ${this.name}`) 
    },100)
}

var stock = new getStock('huawei'); //my name is 

function getStock2(name: string) {
    this.name = name;
    setTimeout( ()=> {
       console.log(`my name is ${this.name}`) 
    },100)
}

var stock = new getStock2('huawei');  //my name is huawei

（2）forEach 、 for in 、 for of

1.forEach循环数组中的元素，但会忽略数组的属性
2.forEach不支持满足某个条件跳出循环操作，如return 、break出去

forEach应用：
var array = [1, 2, 3, 4];
array.desc = 'desc'; // 在ts中会报错，但js里面没事
array.forEach(value => console.log(value)) // 1 2 3 4 不会打印出desc

for in 应用：循环的是键值
var array = [1, 2, 3, 4];
array.desc = 'desc'; // 在ts中会报错，但js里面没事
for (var n in array) {
    console.log(array[n]) // 1 2 3 4 desc  不忽略属性
}

for of 应用：
var array = [1, 2, 3, 4];
array.desc = 'desc'; // 在ts中会报错，但js里面没事
for (var n of array) {
 	if (n > 2) {
        break;
    }
    console.log(n) // 1 2 3 4  与for in 不一样是忽略属性，这点和forEach一样，和forEach不一样的是，可以打断循环，break出来
}