一、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()); //名称为:samxiaoguaiclass 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: numbername: stringconstructor(num: number, name: string) {this.name = namethis.num = num}
}
let objInter = new oneInterCalss(666, "samxiaoguai")
console.log(objInter) //oneInterCalss { name: 'samxiaoguai', num: 666 }

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

TypeScript 接口和TypeScript类相关推荐

c# typescript_在任何IDE中从C＃，Java或Python代码获取TypeScript接口的简单方法
c# typescript by Leonardo Carreiro 莱昂纳多·卡雷罗(Leonardo Carreiro) 在任何IDE中从C#,Java或Python代码获取TypeScript接 ...
typescript 接口 java_[Java教程]【TypeScript】TypeScript 学习 2——接口
[Java教程][TypeScript]TypeScript 学习 2--接口 0 2015-06-19 12:00:28 在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScr ...
typescript 接口 interface 的理解
在学习typescript的时候,经常发现别人写了好多接口(interface),那问题来了,我们自己写代码,应该在什么情况下写接口才比较合适呢.于是我就找了找资料,整理一下. 接口运行时的影响为 0 ...
typescript 接口 java_Typescript基础(4)——接口
前言今天继续typescript的学习,开始ts接口部分的学习. 接口接口的理解首先,我们谈论一下现实生活中的接口.比如生活中常用的插座接口,有些插头是三孔插座的,有些是两孔插座的.插座接口规定 ...
TypeScript 接口(Interface)
TypeScript 接口(Interface) 本节介绍 TypeScript 各种类型接口的声明及其使用方法,接口在 TypeScript 中是极其重要的,我们使用接口来定义契约,如类型命名.属性 ...
三分钟快速了解typeScript接口
typeScript接口属性类接口函数类型接口可索引接口类类型接口接口扩展接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通 ...
【TypeScript入门】TypeScript入门篇——类
TypeScript是面向对象的JavaScript.TypeScript支持面向对象的编程功能,如类,接口等.OOP中的类是用于创建对象的蓝图.类封装了对象的数据.Typescript为这个名为类的 ...
TypeScript入门教程之类/抽象类/构造器/Getter/Setter
TypeScript入门教程之类/抽象类/构造器/Getter/Setter 将JavaScript中的类作为头等项很重要的原因是: 类提供了有用的结构抽象为开发人员提供一种一致的方式来使用类, ...
【lib.es5】ArrayBuffer、DataView 的TypeScript接口
ArrayBuffer.DataView 的 TypeScript 接口邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263 ...

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 接口和TypeScript类相关推荐

最新文章

热门文章