typescript学习笔记-1

一、类里面的修饰符 typescript里面定义属性的时候给我们提供了 三种修饰符

1、public

​ 公有 在类里面、子类、类外面都可以访问

2、protected

​ 保护类型 在类里面、子类里面可以访问、在类外部没法访问

3、private

​ 私有 在类里面可以访问，子类和类外部都没法访问

function Person(){

this.run1 = function(){

}

Person.run2 = function(){

}

}

加static关键词就是静态方法

静态方法没法直接调用类里面的属性

二、多态的定义

​ 多态： 父类定义一个方法不去实现，让继承它的子类去实现 每个子类有不同的表现

​ 多态属于继承

三、typescript中的抽象类：它是提供其他类继承的基类，不能直接被实例化

​ 用 abstract 关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体的实现并且必须在派生类中实现。

​ abstarct抽象方法只能放在抽象类里面

​ 抽象类和抽象方法用来定义标准

四、接口的作用

​ 在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里面方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。typescript中的接口类似java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

​ typescript中的接口

​ 1、属性类接口

​ 2、函数类型接口

​ 3、可索引接口

​ 4、类类型接口

​ 5、接口扩展

​

/***
 * 接口的作用
 */
function printLabel(labelInfo:{label:string}):void{
    console.log(labelInfo.label)
}
var labelInfo = {label: '123'}
printLabel(labelInfo)

​ 对批量方法传入参数进行约束

​ 接口：行为和动作的规范，对批量方法进行约束

​ 接口用interface定义

​ 1、属性接口

​ 第一种写法

/**
 * 接口用interface定义
 */
interface FullName{
    fistName:string; //注意 以;结束
    secondName?:string;
}

function consoleLog(info: FullName){
    console.log(info.fistName+info.secondName)
}
var info = {
    fistName:'123'    
}
consoleLog(info);

​ 第二种写法（推荐使用第二种）严格按照接口来，接口中有什么就写什么

/**
 * 接口用interface定义
 */
interface FullName{
    fistName:string; //注意 以;结束
    secondName?:string;
}

function consoleLog(info: FullName){
    console.log(info.fistName+info.secondName)
}
var info = {
    fistName:'123'    
}
consoleLog(info);

​ 接口可选属性

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ggiozYj-1572489774531)(C:\Users\silly\AppData\Roaming\Typora\typora-user-images\1572421005742.png)]

​ 封装的ajax

​

	/**
 * 封装ajax
 */
interface Config{
    type:string;

    url:string;

    data?:string;

    dataType:string;
}
function ajax(config:Config){
    var xhr = new XMLHttpRequest();
    xhr.open(config.type,config.url,true);
    xhr.send(config.data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            console.log("成功")
            if(config.dataType == 'json'){
                console.log(JSON.parse(xhr.responseText));
            }else{
                console.log(xhr.responseText)
            }
            
        }else{
            console.log("连接失败")
        }
    }
}
ajax({
    type: 'get',
    data: 'name=zhangsan',
    url: 'http://a.itying.com/api/productlist',
    dataType: 'json'
})

​ 2、函数类型接口

​ 函数类型接口：对方法传入的参数以及返回值进行约束

​ 加密的函数类型接口

​

//加密的函数类型接口
interface encrypt{
    (key:string,value:string):string;
}
var md5:encrypt = function(key:string,value:string):string{
    return key + value
}
console.log(md5('yijia','663856'))

interface uoload{
    (key:string,value:string):string;
}
var sayHi:uoload = function(key:string,value:string):string{
    return key + value + "say hi"
}
console.log(sayHi("你好","我是"))

​ 3、可索引接口

​ 在ts中定义数组的方式

​ 3.1 可索引接口 对数组的约束

​

//可索引接口，对数组的约束
interface UserArr{
    [index:number]:string;
}
var arr2:UserArr= ['123','456','789'];
console.log(arr);

​ 3.2 可约束接口 对对象的约束

​

//可索引接口对对象的约束
interface UserObj{
    [index:string]:string;
}
var Obj:UserObj = {
    hello: '你',
    say: "hi"
}
console.log(Obj)

​ 3.3可索引接口 对类的约束 和抽象类有点相似

​

//类类型接口：对类的约束 和抽象类有点相识
interface Animal1{
    name:string;
    eat1():void
}
class Dog1 implements Animal1{
    name:string
    constructor(name:string){
        this.name = name;
    }
    eat1(){
        console.log(this.name + "吃肉");
    }
}
var dogs = new Dog1("小狗");
dogs.eat1()

​ 3.4接口扩展：接口可以继承接口

​

//接口扩展：接口可以继承接口
interface Animal2{
    eat():void;
}
interface Person1 extends Animal2{
    work():void;
}
class Programmer{
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    coding(code:string){
        console.log(this.name + code)
    }
}
class Web2 extends Programmer implements Person1{
    constructor(name:string){
        super(name);
    }
    eat(){
        console.log("要吃")
    }
    work(){
        console.log("写代码")
    }
}
var person = new Web2("人");
person.eat();
person.work();
person.coding("codeYi");

5、 泛型

​ 软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

​ 在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，这个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

​ 通俗理解：泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持。

​ 泛型 可以支持不特定的数据类型 要求：传入的参数和返回的参数一致

​ T表示泛型，具体什么类型是在调用这个方法的时候决定的

​

function GetData<T>(value:T):T{
    return value;
}
console.log(GetData<number>(456))

​ 类的泛型

class MinClaa<T>{
    public list:T[] = [];
    add(value:T):void{
        this.list.push(value);
    }
    minClass(){
        var minNum = this.list[0];
        for(var i=0;i<this.list.length;i++){
            if(minNum > this.list[i]){
                minNum = this.list[i];
            }
        }
        return minNum
    }
}
var minClass = new MinClaa<number>()
minClass.add(9);
minClass.add(2);
minClass.add(77);
minClass.add(66);
console.log(minClass.minClass());