TypeScript 接口和TypeScript类

目录

一、TypeScript 接口

1.TypeScript 接口的定义和简单使用

2.联合类型和接口

3.接口和数组

4.接口继承

二、TypeScript 类

1.TypeScript 类的定义和简单使用

2.TypeScript 类继承

3.TypeScript 类继承的方法重写

4.TypeScript 类static 关键字

5.TypeScript  instanceof 运算符

7.TypeScript 访问控制修饰符

8.TypeScript 类和接口

---

一、TypeScript 接口

1.TypeScript 接口的定义和简单使用

TypeScript 接口是一系列抽象方法的声明，是方法特征的集合，方法本身是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

interface onePerson {
    personName: string,
    personPwd: number,
    speakTs: () => string
}
let oneUser: onePerson = {
    personName: "samxiaoguai",
    personPwd: 123,
    speakTs: (): string => { return "Hello Ts" }
}
console.log(oneUser.personName)
console.log(oneUser.personPwd)
console.log(oneUser.speakTs())
// samxiaoguai
// 123
// Hello Ts

2.联合类型和接口

在接口中使用联合类型

interface twoPerson {
    personName: string;
    personPwd: string[] | number | (() => number);
}
let oneUser1: twoPerson = { personName: "test1", personPwd: 1 };
console.log(oneUser1)  //{ personName: 'test1', personPwd: 1 }
let oneUser2: twoPerson = { personName: "test1", personPwd: ["1", "2"] };
console.log(oneUser2)  //{ personName: 'test1', personPwd: 1 }
let oneUser3: twoPerson = { personName: "test1", personPwd: () => { return 1; } }; 
console.log(oneUser3) //{ personName: 'test1', personPwd: [Function: personPwd] }
let returnPersonPwd:any = oneUser3.personPwd;
console.log(returnPersonPwd()) //1

3.接口和数组

接口中可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

interface strlist {
    [index: number]: string
}
let list1: strlist = ["a", "b", "c"]
console.log(list1) //[ 'a', 'b', 'c' ]

interface numlist {
    [index: string]: number
}
let list2: numlist = {};
list2["a"] = 1  
console.log(list2) //{ a: 1 }

4.接口继承

接口可以通过继承其他接口来扩展自己，关键字使用extends

interface personName {
    personName: string
}
interface person3 extends personName {
    personPwd: number
} 
let oneUser4 = <person3>{}; 
oneUser4.personName = "samxiaoguai";
oneUser4.personPwd = 123;
console.log(oneUser4) //{ personName: 'samxiaoguai', personPwd: 123 }

(1)单继承

interface personName {
    personName: string
}
interface person3 extends personName {
    personPwd: number
} 
let oneUser4 = <person3>{}; 
oneUser4.personName = "samxiaoguai";
oneUser4.personPwd = 123;
console.log(oneUser4) //{ personName: 'samxiaoguai', personPwd: 123 }

(2)多继承

interface personName {
    personName: string
}
interface personPwd {
    personPwd: number
}
interface person4 extends personName, personPwd { };
let oneUser5: person4 = { personName: "samxiiaoguai", personPwd: 123 }
console.log(oneUser5) //{ personName: 'samxiiaoguai', personPwd: 123 }

二、TypeScript 类

1.TypeScript 类的定义和简单使用

TypeScript类描述了所创建的对象共同的属性和方法

定义类的关键字为 class，后面紧跟类名，类主要包含以下几个模块（类的数据成员）：

(1)字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

(2)构造函数 − 类实例化时调用，可以为类的对象分配内存。

(3)方法 − 方法为对象要执行的操作。

class onePersonClass {
    // 字段 
    name: string;
    // 构造函数 
    constructor(name: string) {
        this.name = name
    }
    // 方法 
    userName(): void {
        console.log("名称为:" + this.name)
    }
}
let onePeopleObj = new onePersonClass("samxiaoguai")
console.log(onePeopleObj.name);//samxiaoguai
console.log(onePeopleObj.userName()); //名称为:samxiaoguai

2.TypeScript 类继承

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

class onePersonClass2 extends onePersonClass {
    userName(): void {
        console.log("名称为:" + this.name)
    }

}
let onePeopleObj2 = new onePersonClass("samxiaoguai")
console.log(onePeopleObj2.name);//samxiaoguai
console.log(onePeopleObj2.userName()); //名称为:samxiaoguai

class onePersonClass3 extends onePersonClass2 {
    userName(): void {
        console.log("名称为:" + this.name)
    }

}
let onePeopleObj3 = new onePersonClass("samxiaoguai")
console.log(onePeopleObj3.name);//samxiaoguai
console.log(onePeopleObj3.userName()); //名称为:samxiaoguai

3.TypeScript 类继承的方法重写

class fatherClass {
    fatherStr: string;
    // 构造函数 
    constructor(fatherStr: string) {
        this.fatherStr = fatherStr
    }
    doPrint(): void {
        console.log("父类的 doPrint() 方法。")
    }
}
class childClass extends fatherClass {
    doPrint(): void {
        super.doPrint() // 调用父类的函数
        console.log("子类的 doPrint()方法。")
    }
}
let oneObj = new childClass("fatherS");
console.log(oneObj.doPrint());
//  父类的 doPrint() 方法。
// 子类的 doPrint()方法。

4.TypeScript 类static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class staticCalss {
    static staticname: string;
    static disp(): void {
        console.log("name:"+staticCalss.staticname)
    }
}
staticCalss.staticname = "samxiaoguai"
console.log(staticCalss.staticname) //samxiaoguai
console.log(staticCalss.disp()) //name:samxiaoguai

5.TypeScript  instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

class insCalss{ } 
class noinsCalss{ } 
let obj = new insCalss() 
let isInsCalss = obj instanceof insCalss; 
console.log(isInsCalss);
isInsCalss = obj instanceof noinsCalss; 
console.log(isInsCalss);
// true
// false

7.TypeScript 访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

(1)public（默认） : 公有，可以在任何地方被访问。

(2)protected : 受保护，可以被其自身以及其子类访问。

(3)private : 私有，只能被其定义所在的类访问。

class encapsulateClass {
    str1: string = "hello"
    private str2: string = "ts"
    protected str3: string = "ts"
    doPrint(): void {
        console.log("str2:" + this.str2);
        console.log("str3:" + this.str3);

    }
}

let encapsulateobj = new encapsulateClass()
console.log(encapsulateobj.str1)     // 可访问 
console.log(encapsulateobj.doPrint())
// console.log(encapsulateobj.str3)     // 编译错误  属性“str3”受保护，只能在类“encapsulateClass”及其子类中访问
// console.log(encapsulateobj.str2)   // 编译错误， str2 是私有的
// hello
// str2:ts
// str3:ts

8.TypeScript 类和接口

类可以实现接口，使用关键字 implements，并将其字段作为类的属性使用。

interface oneInter {
    num: number
}
class oneInterCalss implements oneInter {
    num: number
    name: string
    constructor(num: number, name: string) {
        this.name = name
        this.num = num
    }
}
let objInter = new oneInterCalss(666, "samxiaoguai")
console.log(objInter) //oneInterCalss { name: 'samxiaoguai', num: 666 }

有问题可以在下面评论，我会为大家解答。