Typescript

TypeScript是微软开发的一门脚本语言，它是JavaScript的超集，它遵循ES6语言规范。

Angular2框架是谷歌发明的，他用的就是TypeScript。

ES5，ES6都是脚本语言的规范

JavaScript和TypeScript是两种脚本语言。JavaScript实现了ES5，TypeScript实现了ES6

搭建TypeScript开发环境

需要安装编译器compiler，来把TypeScript的代码转换成JavaScript的代码

因为现在很多浏览器都没有支持ES6规范，所以用ES6规范写出来的代码并不能在浏览器上跑

安装npm install -g typescript

之后执行tsc -v看有没有安装成功

然后建立一个Hello.ts文件

export class Hello{

}

然后进入到这个文件所在的目录，执行tsc Hello.ts

会看到这个目录中会生成一个Hello.js文件

"use strict";
exports.__esModule = true;
var Hello = (function () {
    function Hello() {
    }
    return Hello;
}());
exports.Hello = Hello;

用webstorm新建一个空项目hello

新建一个Hello.ts

会看到一个提示询问是否把TypeScript编译成JavaScript，点击配置，然后在弹出的页面中把Enable TypeScript compiler前面的对勾勾上。这样就会自动把TypeScript代码编译成JavaScript代码了。

export class Hello{

}

字符串新特性

我们用TypeScript的在线编辑器来编辑。进入其官网http://www.typescriptlang.org/

点击上面的Playground。在左边编写TypeScript代码，右边显示编译好的JavaScript代码。

多行字符串,这种写法不会报错

var content = `ksdjf
kjsdf`;

会被翻译成

var content = "ksdjf\nkjsdf";

字符串模板

在${ }里边可以放变量或函数，但字符串必须要写在“里边。

var myname = "eaglezsx";

var getName = function () {
    return "eaglezsx";
}

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

会被翻译成

var myname = "eaglezsx";
var getName = function () {
    return "eaglezsx";
};
console.log("hello " + myname);
console.log("hello " + getName());

自动拆分字符串

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

var myname = "eaglezsx";

var getAge = function () {
    return 18;
}

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

使用test方法的时候不用在使用括号。第二个参数就为myname，第三个参数为getAge()，第一个参数就为通过后面两个参数拆分的字符串数组。

参数类型

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

var myname: string = "eaglezsx";
myname = 12;//这句话会报错

前面我已经声明myname为字符串类型了，但后边为其赋值为数字类型的时候就会报错

这个错误只会在TypeScript中报错，在JavaScript中不会。

var sex = "male";
sex = 1;//这句话会报错

这里我没有给sex变量指定类型，但也会报错，因为TypeScript中有类型推断机制，当第一次给他赋值为字符串时，就认为他是字符串。

如果想让这个变量为任意类型可以设置其类型为any

var sex:any = "male";
sex = 1;

这样就不会报错了

除了string和any类型还有

var age: number = 18; //数字类型
var man: boolean = true;//布尔类型
function test(): void{  //声明函数的返回值为void,意思是没有返回值
    return "dd";//所以这里会报错
}


function test2(): string{ //这样就不会报错了
    return "dd";
}

//还可以给方法的参数指定类型
function test3(name:string): string{
    return "dd";
}

test3("d");//调用test3方法的时候就只能用字符串了

自定义类型

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

var p: Person = new Person();

p.name = "eaglezsx";
p.age = 18;

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

//给变量设置默认值这没什么好说的
var myname: string = "eaglezsx";

给函数的参数指定默认值

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

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

调用test方法的时候必须要传入3个参数，传入1个或两个都会报错。

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

test("xxx","yyy");

当给第三个参数指定了默认值，当我不传入第三个参数的时候就会使用这个默认值。

注意：带默认值的参数要放在最后边

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

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

test("xxx");

这里b参数就是可选的了

打印结果为

xxx
undefined
eaglezsx

注意：在函数中要注意对可选参数的处理，如果没有传入这个函数需要做哪些处理。

可选参数也必须声明在必选参数的后边

箭头表达式

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

多行的话需要些花括号和return关键字。单行不需要

只有一个参数不用写小括号，花括号，返回值

原来的方式

function getStock(name: string) {
    this.name = name;
    setInterval(function () {
        console.log("name is:"+this.name);
    },1000);
}

var stock = new getStock("IBM");

不会打印出name的值

现在的方式

function getStock(name: string) {
    this.name = name;
    setInterval(() => { 
        console.log("name is:"+this.name);
    },1000);
}

var stock = new getStock("IBM");

这次name有值了

循环

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

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

类

属性和方法默认的访问修饰符是public，在类的外部可以访问到

private的只能在内部访问到

protected可以在内部和子类中访问

构造函数

constructor(){}

class Person{
    name;

    constructor(name:string) {
        this.name = name;
    }

    eat() {
        console.log(this.name);
    }
}

var p = new Person("eaglezsx");
p.eat();

这种写法

name;
constructor(name:string) {
   this.name = name;
}

可以简写为

constructor(public name:string) {}

注意：如果用简写的方式要明确访问修饰符，为public也要写上。

如果不写修饰符是相当于这样的，并没有创建name属性

constructor(name:string) {}

类的继承

class Employee extends Person{

}

super关键字

用来调用父类的构造函数或调用父类的其他方法

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

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

    work(){
      super.eat();
    }
}

泛型

var workers:Array<Person>=[];

规定了数组里边只能放Person类型或他的子类。

接口

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

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

class Person{
    constructor(public config:IPerson){}
}

var p1 = new Person({
    name: "eaglezsx",
    age:12
});

在构造函数中传入了接口后，实例化对象的时候传入对象的属性就必须是那几个。

interface Animal{
    eat();
}

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

实现了接口后就必须实现它的方法

模块

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

一个文件就是一个模块。

有两个关键字，export和import，代表向外暴露什么东西，和需要引入什么东西

新建一个空项目，新建两个文件a.ts,b.ts

a.ts

export var prop1;

var prop2;

export function func1(){

}

function func2(){

}

export class Clazz1{

}

class Clazz2{

}

b.ts

import {Clazz1, func1, prop1} from "./a";

console.log(prop1);

func1();

new Clazz1();

export function f(){

}

在b中只能用a向外暴露的属性，方法，类。b中也可以向外暴露。

注解

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

类型定义文件

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

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

可以按照一个工具npm install typings –global来下载这些类型定义文件