typeScript新特性

1、安装编译

• 安装TypeScript

npm install -g typescript

• 建一个greeter.ts文件

// 随便写点啥
console.log('hello ts!')

• 编译代码

tsc greeter.ts
// 输出结果为一个greeter.js文件

2、字符串新特性

• 多行字符串 `` 反引号包裹
• 字符串模板，``包裹，可插值 ${变量名}，也可加表达式
• 自动拆分字符串

function test(template,name,age){
    console.log(template)
    console.log(name)
    console.log(age)
}
let myname = 'shasha'
let getAge = function () {return 18}
test `hello my name is ${myname},im ${getAge}`;

运行结果

以上ts代码编译后的js代码如下

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 = 'shasha';
var getAge = function () { return 18; };
test(__makeTemplateObject(["hello my name is ", ",im ", ""], ["hello my name is ", ",im ", ""]), myname, getAge);

3、参数的新特性

• 变量声明类型（ts中会报错，生成的js不会）

var name2:string = "shasha"; // 不能给字符串类型变量赋值数字
var alias3 = 'xx'; 
alias3 = 13;  // 推断机制，第一次赋值的类型就是默认变量类型
var alias4:any = 'xixix'  // any的含义是可以给变量赋值任何值
alias4 = 14;

// :any :string :number :boolean 变量定义，也可以在函数参数定义，函数中使用，表示返回值的类型
// :void 表示不需要返回值
function test ():void {return ''}  // 会报错

//自定义类型
class Person {name:string; age:number}
var zhangsan:Person = new Person();
zhangsan.name="zhangsan"
zhangsan.age=18

• 参数默认值
  参数默认值,调用时可不用传有默认值得参数
  带默认值的参数必须放在最后

function test2(a:string, b:number, c:string = 'xxx'){}

• 可选参数
  可选参数,b写法表示可选，调用时可不传
  可选参数要放在必选之后，可选参数函数内部需要处理未传值的情况

function test3(a:string, b?:string){}

4、函数新特性

• Rest and Spread 操作符（…）就是三点运算符
  用来声明任意数量的方法参数

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

fun1(1,2,3,4,5);
fun1(8,9,10)

运行结果

• generator 函数 yield
  控制函数的执行过程，手工暂停和恢复代码执行
  （代码编译有点问题，待解决，函数意义如下）

function *doSomeThing(){
    console.log('start')
    yield;
    console.log('finish')
}
var fun2:any = doSomeThing;
fun2.next(); // 执行一步
fun2.next(); // 执行第二步

5、面向对象特性

• 类(class)
  是typescript的核心，大部分代码都是写在类中的
  1、定义
  • 访问控制符
  • public 默认
  • private 私有，只能在类内部使用
  • protected 受保护的，可在类内部和子类中使用

class Person{
	constructor(){} // 构造函数，不能再类外访问，new时调用
	public name; // 类属性
	private eat(console.log('is eating')); // 类方法
	public eat2(){console.log('is eating')}; // 类方法
}

类实例化（类外）

var p1 = new Person();
p1.name = 'shasha';
p1.eat(); // 会报错，属性“eat”为私有属性，只能在类“Person”中访问
bar p2 = new Person();
p2.name = 'super';
p2.eat2();

2、继承 extends

class Employee extends Person{
	constructor(name){
		super(name)// 子类构造函数必须调用父类构造函数
	}
	work(){super.eat2()} // 调用父类方法
}

var e1 = new Employee();
e1.name; // 可用

6、数组析构

var arr1 = [1,2,3,4];
var [name1,name2] = arr1
var [,,name3,name4] = arr1
var [name1,name2,...others] = arr1

结果

7、表达式和循环

• 箭头表达式
  用来声明匿名函数，消除传统匿名函数的this指针问题
  写法：
  只有一个参数时可省略()，无参数时不可省略()
  只有一行表达式时可省略{}

var sum = (arg1,arg2) =>{return arg1+arg2}

var sum2 = arg1 => return arg1*2;

var sum3 = () => {console.log('无参数')};

• forEach()、 for in 、 for of

var myArr = [1,2,3,4]
myArr.desc = 'four number'

• forEach desc属性会被忽略掉，不能break
• for in 循环的事key,console.log(myArr[n])是value
• for of
  循环value，和foreach一样，不能打印desc属性，
  可用break跳出，
  也可循环字符串，会打印每一个值
  

8、模块(module) --一个文件就是一个模块

模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中哪些资源（类，方法，变量）暴露出来供外部使用，哪些资源只在模块内使用

• 带export表示对外暴露

export var prop1;
var prop2;
export function func1(){};
function func2(){};
export class class1{}
class class2{}

• import 导入模块
• 文件内部可导出也可导入

import {props1,func1,class1} from 'a.ts'
console.log(props1)
func1()
new class1();

9、注解(annotation)

• 为程序元素（类，方法，变量）加上更直观更明了的说明，这些说明信息与程序的业务逻辑无关，而是提供指定的工具或框架使用的

let count: number; // 类型注解
count = 123;

10、类型定义文件（*.d.ts）

• 用来帮助开发者在typeScript中使用已有的js工具包，比如：jquery github中找jQuery的index.d.ts文件，放入项目同意目录中即可用
• 地址：http://github.com/typings/typings 工具用来安装类型定义文件