码迷,mamicode.com
首页 > 其他好文 > 详细

前端学习入门-angular2-Typescript基本语法(二)

时间:2017-10-27 13:20:10      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:方法   string   提高   对象   狗粮   tin   tom   move   scores   

  接口

  接口的创建

interface labelValue{  

    label:string;  

} 

  //创建函数对接口进行调用  labelObj是函数形式参数 其类型是接口类型labelValue

 function printLabel(labelObj:labelValue){  

     console.log(labelObj.label);  

 }  

  //创建对象  创建函数实参myObj

var myObj={label:"come on"};  

//调用函数  

printLabel(myObj) 

  接口的可选属性

interface USB{  

    name?:string;  

    age?:number;  

}  

function printUSB(pu:USB){  

    console.log(pu.name);  

    console.log(pu.age);  

}  

var me={name:‘jason‘};  

printUSB(me); 

  接口描述函数类型

interface SearchFun{  

//接口里面是函数,有两个形式参数source和subString,其类型都是string类型,

//函数的返回值是boolean类型

    (source:string,subString:string):boolean;  

}  

var mySearch:SearchFun;  //变量类型是接口类型

mySearch=function(src:string,sub:string){  

    let result=src.search(sub);  

    if(result!=-1){  

        return true;  

    }else{  

        return false;  

    }  

}   

 

[propName: string]: any;  任意属性取 string 类型的值

  用接口来描述数组类型

interface StringArray{  

    [index:number]:string;  

}  

let myArray:StringArray=[‘jason‘,‘john‘];  

console.log(myArray); 

  接口的继承与实现

interface Animal {

     name: string;

     eat(): void;

 }

class Dog implements Animal {

      name: string;

      constructor(theName: string) {

          this.name = theName;

     }

 

     eat() {

         console.log(`${this.name} 吃狗粮。`)

     }

 }

 let dog: Animal;

 dog = new Dog(‘狗狗‘);

 dog.eat();

 

  Class

  下面看一个使用类的例子:

class Greeter {

    greeting: string;

    constructor(message: string) {

        this.greeting = message;

    }

    greet() {

        return "Hello, " + this.greeting;

    }

}

let greeter = new Greeter("world");

  继承

  在TypeScript里,我们可以使用常用的面向对象模式。 当然,基于类的程序设计中最基本的模式是允许使用继承来扩展一个类。

  看下面的例子:

class Animal {

    name:string;

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

    move(distanceInMeters: number = 0) {

        console.log(`${this.name} moved ${distanceInMeters}m.`);

    }

}

class Snake extends Animal {

    constructor(name: string) { super(name); }

    move(distanceInMeters = 5) {

        console.log("Slithering...");

        super.move(distanceInMeters);

    }

}

class Horse extends Animal {

    constructor(name: string) { super(name); }

    move(distanceInMeters = 45) {

        console.log("Galloping...");

        super.move(distanceInMeters);

    }

}

let sam = new Snake("Sammy the Python");

let tom: Animal = new Horse("Tommy the Palomino");

sam.move();

tom.move(34);

  函数

  普通函数

  在TypeScript中,我们可以给函数指定类型,这样在编译阶段会规避很多错误.函数类型分为参数类型和返回值类型,如下代码所示,参数类型直接在参数后指定,返回值类型则在该函数后面指定。 TypeScript能够根据返回语句自动推断出返回值类型,因此我们通常省略它。

/*普通函数*/

function add(x:number,y:number):number{

    return x+y;

}

add(1,2);

/*匿名函数*/

var addFun=function (x:number,y:number):number {

    return x+y;

}

addFun(2,3);

  完整函数类型 
  在TypeScript中,为了提高代码的可读性,提供给我们另一种写法,这种写法会明确的指出参数的意义。 
如下代码所示,我们很容易就明白这个方法传的参数是数学分数和英语分数,该方法返回的是数学和英语分数的和。返回值类型是函数类型的必要部分,如果函数没有返回任何值,你也必须指定返回值类型为 void而不能留空。

let add:(mathScores:number,englishScores:number)=>number

=function (x:number,y:number):number {

    return x+y;}

  Lambda表达式 
  也叫箭头函数,就是用来声明匿名函数,并且能消除传统的javascript中匿名函数this指针问题。

  1、/*简单的箭头函数 无参数且无返回值*/

var add = () => {console.log("无参数且无返回值")};

  2、/*有一个参数 且有返回值*/

var add1=x=>`有一个参数的时候可以不写(),${x}

 ass`;

  3、/*多个参数*/

var add2=(x,y,z)=>{

    console.log(x+y+z);

}

add2(1,2,3);

  泛型

function identity<T>(arg: T): T {

    return arg;

}

  我们给identity添加了类型变量T。 T帮助我们捕获用户传入的类型(比如:number),之后我们就可以使用这个类型。 之后我们再次使用了T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。 这允许我们跟踪函数里使用的类型的信息。

我们把这个版本的identity函数叫做泛型,因为它可以适用于多个类型。 不同于使用any,它不会丢失信息,像第一个例子那像保持准确性,传入数值类型并返回数值类型。

我们定义了泛型函数后,可以用两种方法使用。 第一种是,传入所有的参数,包含类型参数:

let output = identity<string>("myString");  // type of output will be ‘string‘

 

前端学习入门-angular2-Typescript基本语法(二)

标签:方法   string   提高   对象   狗粮   tin   tom   move   scores   

原文地址:http://www.cnblogs.com/taoxingyu/p/7742295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!