目录

一、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 }

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

最后

以上就是留胡子盼望为你收集整理的TypeScript 接口和TypeScript类一、TypeScript 接口二、TypeScript 类的全部内容，希望文章能够帮你解决TypeScript 接口和TypeScript类一、TypeScript 接口二、TypeScript 类所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。