TypeScript学习No.1

前言

学习记录

---

一.TypeScript介绍

1. 微软开发 javascript的超集
2. 遵循ES6
3. Microsoft 和 Google 支持
4. JavaScript实现了ES5规范
5. TypeScript实现了ES6规范

---

二.TypeScript的优势

1. 支持ES6规范
2. 强大的IDE支持
   
   1. 类型检查
   2. 语法提醒
   3. 重构
3. Angular2的开发语言

---

三.TypeScript开发环境

安装TypeScript

npm install -g typescript 

使用vscode

• 安装debug插件 https://blog.csdn.net/crper/article/details/60957348
• 安装提示相关插件https://blog.csdn.net/crper/article/details/55526616
• TypeScript在线测试 http://www.typescriptlang.org/play/index.html
• 编译成js tsc name.ts

---

四.字符串新特性

• 多行字符串

var content = `aaa
bbb
ccc`

• 字符串模板

 var myname = "xia lei"
 var getName = function () {
    return "xialei"
}
console.log(`hell ${myname}`);
console.log(`hell ${getName}`)

• 自动拆分字符串

function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}

var myname = "xia lei";

var getAge = function () {
    return 18;
}

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

---

五.参数新特性

• 参数类型

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

var myname: string = "xia lei";

var alias: any = "leilei";

alias = 18;

var age: number = 13;

var man: boolean = true;

function test(name:string ): void{

}

class Person{
    name: string;
    age: number;
}

var zhangsan: Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 18;

• 默认参数

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

var myname: string = "xia lei";

function test(a: string, b: string, c: string="lei lei") {
    console.log(a);
    console.log(b);
    console.log(c);
}

test("xxx", "yyy", "zzz");
test("xxx", "yyy");

• 可选参数

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

var myname: string = "xia lei";

function test(a: string, b?: string, c: string="lei lei") {
    console.log(a);
    //需要对可选参数做没有的处理
    console.log(b);
    console.log(c);
}

test("xxx");

---

六.函数新特性

• Rest and Spread 操作符

用来声明任意数量的方法参数

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

func1(1, 2, 3);
func1(7, 8, 9, 10);

• generator函数

控制函数的执行过程，手工暂停和恢复代码执行

//当前版本不支持 用babel测试
function* doSomething(){
  console.log("start");

  yield;

  console.log("finish");
}

var func1 = doSomething();

func1.next();
//输出start

func1.next();
//输出finish

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 at ${price}`);

• destructuring析构表达式

同姑婆表达式将对象或数组拆解成任意数量的变量

//对象拆值
 function getStock() {
    return {
        code: 'IBM',
        price: {
            price1: 200,
            price2:400
        },
        aaa: "xixi",
        bbb: "haha"

    }
}

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

console.log(codex);
console.log(price2);

//数组拆值
var array1 = [1, 2, 3, 4, 5];

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

console.log(number1);

console.log(number2);

console.log(others);

function doSomething([number1, , number2, ...others]) {
    console.log(number1);

    console.log(number2);

    console.log(others);

}

doSomething(array1);

---

七.表达式和循环

• 箭头表达式

用来声明匿名函数，消除传统匿名函数的this指针问题

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

• forEach(), for in 和 for of

var myArray = [1, 2, 3, 4];
myArray.dsec = "four number";


for (var n of myArray) {
    if (n > 2) break;
    console.log(n);
}

---

八.面向对象特性

• 类（class）

类是TypeScript的核心，使用TypeScript开发时，大部分代码都是写在类里面的。
类的定义，构造函数，以及类的继承

class Person{
    constructor(public name: string) {

    }

    eat() {
        console.log("im eating");
    }
}

class Employee extends Person{
    constructor(name: string, code: string) {
        super(name);
        this.code=code;
}

    code: string;

    word() {
        super.eat();
        this.doWork();
    }

    private doWork() {
        console.log("im working");
    }
}

var e1 = new Employee("name","1");
e1.eat();

var p1 = new Person("batman");
p1.eat();

var p2 = new Person("superman");
p2.eat();

• 泛型

参数化的类型，一般用来限制集合的内容

var workers: Array<Person> = [];
workers[0] = new Person("zhangsan");
workers[1] = new Employee("lisi","2");

• 接口

用来建立某种代码约定，使得其它开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定

interface IPerson{
    name: string;
    age: number;
}

class Person{
    constructor(public config: IPerson) {

    }
}

interface Animal{
    eat();
}

class Sheep implements Animal{
    eat() {
        console.log("i eat grass");
    }
}

class Tiger implements Animal{
    eat() {
        console.log("i eat meat");
    }
}

• 模块

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

• 注解（annotation）

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

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

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

插件:typings

---

目录: