TypeScript

1、三个特点

(1)微软开发的编程语言

(2)是javaScript的超集

(3)遵循ES6语法

2、TypeScript的优势

(1)支持es6语法

(2)强大的IDE支持

(3)Angular2框架

3、搭建TypeScript开发环境

(1)使用在线compiler开发  http://www.typescriptlang.org/

(2)在线compiler

安装命令:npm install -g typescript  //全局安装

使用:新建一个.ts文件   

cd 进入.ts文件目录

tsc xx.ts

使用IDE差不多,会自动转换

4、字符串新特性

多行字符串

(1)传统的写法 var content = "aaa"+

"bbb"+

"ccc";

(2)TypeScript

var content = ~aaa

bbbb

cccc~;

字符串模板

console.log(`hello ${myname}`);     

console.log(`hello $(getName())`);

自动拆分字符串

function test(template,name,age){

  console.log(template);

  console.log(name);

  console.log(age);

}

var  myname ="xiaoming";

var getAge = function(){

  return 18;

}

test `hello my name is ${myname},i'm ${getAge()}`

5、参数新特性

参数类型

var myname:string = "xxx";    myname=12; //会有错误提醒

any 类型  表示可以任何类型

其他:number

boolean

void  //不需要返回值

方法参数声明类型

function test(name:string){}

自定义类型

class Person{

  name:string,

  age:number

}

var  xiaoming:Person = new Person();

默认参数

带默认值的参数一定要声明到最后面

可选参数 【在变量后面加个问号】 注:可选参数必须声明在必选参数的后面

 6、函数新特性

(1)Rest and Spread操作符:用来声明任意数量的方法参数

function test(...args){}

(2)generator函数:控制函数的执行过程,手工暂停和恢复代码执行

function* doSomething(){

  console.log("start");

  yield;

  console.log("finish);

}

var func1 = doSomething();

func1.next();  //start   //类似打断点 ,点下一步下一步

func1.next();  //finish

(3)destructuring析构表达式:通过表达式将对象或数组拆解成任意数量的变量

es5写法:

function getStock(){

  return{

  code:"IBM",

  price:100

}

}

var stock = getStock();

var code = stock.code;

var price = stock.price;

TypeScript写法:

/*对象*/

function getStock(){

  return{

  code:"IBM",

  price:{

    price1:200,

    price2:400

  },

  aaa:"xixi",

  bbb:"haha"

}

}

var {code,price} = getStock();

var {code:codex ,price}= getStock();

var {code:codex,price:{price2}}=getStock();

/*数组*/

var array1 = [1,2,3,4];

var [number1,number2] = array1;

console.log(number1); //1

console.log(number2); //2

var [,,number1,number2] = array1;

console.log(number1); //3

console.log(number2); //4

var [number1,number2,...others] = array1;

console.log(number1); //1

console.log(number2); //2

console.log(others); //[3,4]

7、表达式和循环

(1)箭头表达式: 用来声明匿名函数,消除传统匿名函数的this指针问题

var myArray = [1,2,3,4,5];

console.log(myArray.filter(value=>value%2==0));   //[2,4]

(2)forEach()、for in 、for of 

forEach() (1)会忽略掉属性值 (2)执行过程中不能break

for in 循环对象键值对的键

for of (1)会忽略掉属性值 (2)执行过程中能break   //可以遍历字符串

8、面向对象特性

(1)类的声明 public  

private

protected  //类的内部和类的子类可以访问到

(2)类的构造方法 constructor()

外部无法访问到 

(3)继承

extends

super  //调用父类的构造函数

子类的构造函数必须要调用父类的构造函数

class Person{

  constructor(public name:string){

    

  }

  eat(){

    console.log(this.name);

  }

}

class Employee extends Person{

  constructor(name:string,code:string){

    super(name);

    this.code = code;

  }

  code:string;

  work(){

  }

  

}

(4)泛型

var workers:Array<Person> = [];

workers[0] = new Person("xiaoming");

workers[0] = new Employee ("xiaohong","2");

(5)接口 (Interface)

interface IPerson{

  name:string;

  age:number;

}

class Person{

  constructor(public config : IPerson){

  }

}

var p1 = new Person({

  name:"xiaoming",

  age:17

})

//implements

interface Animal{

  eat();

}

class Sheep implements Animal{

  eat(){

    console.log("xxx");

  }

}

(6)模块

一个文件就是一个模块

export 

import

(7)注解

(8)类型定义文件(*.d.ts)

类型定义文件用来帮助开发者在TypeScript中使用已有的javascript的工具包,如jquery

来源:github / DefinitelyTyped

github / typings

猜你喜欢

转载自www.cnblogs.com/yyxh/p/8930525.html