typescript

typeScript简介

1. javaScript的超集
2. 遵循ES6
3. 兼容ES5
4. typeScript线上编译器: http://www.typescriptlang.org/play/index.html
5. typeScript本地编译器: npm install -g typescript ; tsc -version 可以查看是否安装成功
6. 编译ts文件生成js文件: tsc hello.ts

字符串

多行字符串

多行字符串用反引号`表示,可以在``中直接换行

var a = `<div>
            <span>hello</span>
        </div>`

字符串模板

可以用${}在多行字符串里面使用表达式,

• 字符串模板只能再多行字符串里面使用,
  在普通的字符串里,比如"aaa"无法使用;

var name="李飞";
var age = 26;
var html = `
    <div>
        <span>我的名字是${name}</span>
        <span>我的年龄是${age}</span>
    </div>
`

自动拆分字符串

当用多行字符串来调用一个方法的时候,多行字符串里面的
表达式会被作为方法的参数传进去;

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

let name1 = "lifei";
let age = 22;
test`我的名字是是${name1},年龄是是${age}还有别的`;

上面的name1,和age被作为参数传到了函数test里面;输出的template是一个数组;
["我的名字是是", "年龄是是"", "还有别的"]

变量

指定变量类型

1. 声明变量
   在声明变量时,可以为变量添加类型.比如number,string ,boolean,Array;
   如果不想限制变量的类型可以使用any;
   如果后面赋值的类型不对会报错,但是这里报错的人是typescript,
   如果编译成了js,可以正常编译,并且不报错;

let name: string = "lifei";
let isman: boolean = true;
let a: number = 123;
let age: any = 666;
let list: Array<number> = [1, 2, 3];  //数组类型,里面的元素是number;
let list: number[] = [1, 2, 3];     //数组类型,里面的元素是number;

2. 函数中声明返回值和参数

function test(name: tring) :string{
    return "123";
}

括号里面的是声明函数的参数类型,括号后面的是声明返回值的类型;
如果是没有返回值就用 :void

function a(age: number) :void{
    console.log(a)
}

4. 自定义类型
   变量声明的类型可以是自定义的类(也就是构造函数)

class Person {
    name: string;
    age: number;
}
var zhangsan :Person = new Person();

5. 推测类型
   在typeScript环境中,如果变量的声明没有声明类型也没有any.那么typescript会根据
   变量的第一个值.来推测变量的数据类型;

var a="lifei"   //typescript默认a的类型是string;

变量默认值;

1. 普通的变量默认值

let name: string = "lifei";

2. 函数的变量默认值
   typescript是强类型语言,声明了一个有三个参数的函数,如果调用的时候只传两个,typescript会报错;
   而不是和js一样把第三个参数默认成undefined;如果有了默认值,就可以少传参数了;会直接使用默认值;
   一般来说有默认值的参数会放在最后;

function test(a: string, b: string, c: string='lifei'){
    console.log(a);
     console.log(b);
      console.log(c);
}
test("aa", "bb", "cc")      //输出"aa", 'bb', 'cc';
test('aa', "bb")        //输出"aa", 'bb', 'lifei';

可选参数

在函数的参数后面添加问号"?", 可以设定这个参数可选

function(a: string, b? :number) {
    console.log(a)
    console.log(b)
}

可选参数和有默认值的参数都要放在必选,无默认值的参数的后面;

函数新特性

Rest and Spread: ...

rest and Spread操作符是三个点: "...",代表任意数量的参数;

1. 在声明函数中使用
   如果在声明函数中作为默认参数,则代表任意数量的参数数组

function func1(...args) {
    args.forEach(function(arg){
        console.log(arg)
    })
}
func1(1, 2, 3);
func1(8, 9, 10, 11, 12);

2. 在调用函数中使用
   在调用函数中使用,后面跟一个数组.代表把数组里的元素当做函数的参数挨个传入

function func1(a, b, c) {
    console.log(a);
    console.log(b);
      console.log(c);
}
var arr1 = [1, 2];
var arr2 = [5, 6, 7, 8, 9]
func1(...arr1);     //输出1,2, undefined
func1(...arr2);     //输出5, 6, 7;

• 事实上rest and spread操作符在调用函数中使用,并没有在typescript中实现
  这是ES6里面的方法.在typescript中使用会报错,同样的解析后可以正常使用;

generator函数

控制函数的执行过程,手动的暂停或恢复代码的执行.类似于打断点的行为;

1. 声明generator函数,在function后面加星号"*";function* doSometing(){}
2. 打断点,在需要暂停的位置加上yield,类似于return;暂时停止;可以跟返回值;
3. 函数运行并不会执行函数里的代码,而是返回一个运行对象,var a= doSometing();
   执行这个对象的next方法,才会运行函数,到断点,再次运行到下一个断点;a.next();;
4. 返回值var d = a.next().value;;
5. 这是ES6语法,typescript暂时不支持,会报错.但是不影响编译;

function* doSometing() {
    console.log("start");

    yield "这里是返回值";      //暂停,类似打断点

    console.log("finish")
}

var func1 = doSomething();  //此时函数并不执行,而是返回一个执行对象
func1.next();       //开始执行,输出"start", 运行到yield停止;
func1.next();       //再次开始执行,输出'finish'

箭头表达式和循环

箭头函数

箭头函数使用箭头"=>"来代替关键字function比如:

function aa(){}
aa() => {}

1. 箭头函数最常用的地方是匿名函数,比如setTimeout,filter,setInterval的回调函数

setTimeout((a, b) => {
    console.log(a);
    console.log(b);
}, 1000)

2. 箭头函数的匿名函数有一些简写操作
   比如:单行匿名函数

setTimeout((a, b) => a+b, 1000)
//等同于
setTimeout(function(a, b){
    return a+b;
}, 1000)

或一个参数的情况

setTimeout( arg => console.log(arg), 1000);     //省略了括号();

箭头函数的this

箭头函数修改了传统js中一个this的指向.就是在外层this指向一个不是window的对象,
此时异步调用了一个函数,在这个函数里this指window,这个特性造成了一定的麻烦;
而在箭头函数中这里的this被修改为和外层的this一样的对象;

var Persion = function(){
    this.name = "lifei"
    setTimeout(function(){
        console.log(this.name);         //这里指window.name.输出undefined;
    }, 1000)
}
var Persion2 = function() {
    this.name="lifei";
    setTimeout( () => {
        console.log(this.name)      //这里指new Rersion2()出来的对象,输出"lifei";
    }, 1000)
}

for of循环

数组的forEach循环只能循环数组,并且不能用break打断;
for of循环是ES6特性,且被typescript支持;
for of循环则可以循环数组,对象,字符串,支持break和continue;

var aa = [1, 2, 3, 4, 5, 6]
   for (var k of aa) {
     if (k >= 2 && k <= 3) {
       continue;
     }
     console.log(k);        //输出1,4,5,6;
   }

面向对象特性

类

声明

类的声明要用class关键字.实例化用new;
类的属性和方法都可以直接声明;在函数中或实例中用this来调用;

• 在编译之后类的方法是放在原型里面的,属性是和构造函数里面的代码放在一起的;

class Person{
    age: number;
  public name: string = "lifei";
  constructor(age: number) {
    console.log(age);
  }
  public eat() {
    console.log("i am eating");
  }
}
var a = new Person(12);

类的访问控制符

访问控制符: public(公开), private(私有), protected(受保护)

1. public声明的属性可以在类的外面,实例化之后由实例调用.类的属性默认是public;
2. private声明的属性只能再类里面用this调用(比如this.name).不能在类的外面用实例调用;
3. protected声明的属性不能在外面调用,但是可以在子类里面调用;

构造函数constructor

1. 在构造函数里的代码只会在实例化的时候执行一次;
2. 构造函数只是一个实例化的时候向类里面传递参数的入口.
3. 构造函数的参数并不会成为类的属性,除非给参数添加访问控制符.
   说白了consstroctor构造函数只是一个入口,外层向类里面传递参数的入口;
   让类可以直接使用外面封装的属性方法;
   类的属性和方法应该在构造函数的外面直接声明;

class Person{
    name: string;
    constroctor(age: number){
        console.log(age)
        console.log(this.name);
    }
}
var a = new Person(12);     //这里传递的12,只是输出了而已,a并没有age属性,只有name属性;
class Person{
    name: string;
    constroctor(public age: number){
        console.log(age);
        console.log(this.name);
    }
}
var b = new Person(12)      //这里的b既有name属性,又有age属性;

类的继承

1. extends声明继承关系

class Person{
    name: string;
    constroctor(age: number){
        console.log(age)
        console.log(this.name);
    };
    eat() { console.log("eating")}
}
class Emx extends Person {

}
var emx1 = new Emx(12);     //这里的emx1是类Emx的实例,原型Person的实例;

2. super调父类的函数;
   如果在子类中有自己的构造函数,那么在执行自己的代码之前必须先执行一次父类的构造函数super(),就是这么规定的;
   如果在子类中要用到父类的方法,就用super["方法名"]来调用;

class Person{       //父类
    name: string;
    constroctor(age: number){
        console.log(age)
        console.log(this.name);
    };
    eat() { console.log("eating")}
}
class Emx extends Person {      //子类
    school: string;
    constructor(age: number, school: string){
        super(age);         //用super()执行父类的构造函数;
        this.school = school;
    };
    work() {
        super.eat();        //调用父类的eat方法;
    }
}
var emx1 = new Emx(12, "北街");     //这里的emx1是类Emx的实例,原型Person的实例;

泛型(generic)

用来指定一个集合的数据类型

var workers: Array<Person> = [];
//workers数组里的元素只能是Person类型实例化出来的对象,或者是Person的实例化出来的对象的子类;

接口(Interface)

接口用来简历某种代码约定,使得其他开发者在调用某个方法或者
创建新的类时必须遵循接口所定义的代码约定;
简单来说就是定义接口的时候,规定了一定的属性,方法;
一个类使用这个接口,那么这个类就要也有这些属性和方法;

1. 定义一个接口

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

2. 作为函数的参数的接口使用

class Person {
    constructor(public config: IPerson){}
}
var p1 = new Person({name: "lifei", age: 13});
//因为类Person的构造函数的参数使用了接口IPerson,在用new 创建Person实例的时候,
//构造函数的参数就必须有name,age属性;

3. 作为类的接口使用

interface Animal{
    eat();
}
class Sheep implements Animal{
    eat(){
        console.log("eating")
    }
}
//类Sheep使用了接口Animal,那么他就必须要有函数eat;

模块

模块可以帮助开发者将代码分割成可重用的单元,开发者可以决定
将模块中的类,方法,变量,暴露出去供外部使用,或者只在模块内部使用
在typescript里面一个文件就是一个模块;
export 导出, import导入;

export var prop1;   //在别的文件就可以用import引入这个变量
import prop1;       //在本文件中引入这个变量;

注解(annotation),又名装饰器

注解为程序的元素(类,方法,变量)加上更加直观的说明信息,
这些信息与程序的业务逻辑无关,而是给框架或工具的说明.;

import {Component } form "@angular/core";
@Component({        //这个就是注解(装饰器)
    selector: "app-root",
    templateUrl: './app.component.html',
    styleUrl;['./app.component.css']
})
export class AppComponent {
    title = "app works";
}
//上面的装饰器的作用是告诉angular4.0框架这个组件的html模板
和css文件到哪里找,selector: 'app-root'是指这个组件在html中
是用<app-root></app-root>标签标示的;
简而言之就是原来的script,link里面的信息用更简单的方式写了

angular4.0的装饰器还包括:
Component(组件装饰器),Directive(指令装饰器),Input(输入属性装饰器),
Pipe(管道装饰器),Output(输出属性装饰器)

类型定义文件

如果要在typescript中使用第三方插件比如jquery的话.就必须引入,
这个插件的typescript解析文件;
可以用typings下载第三方插件的typescript解析文件;