目录
一、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 }
有问题可以在下面评论,我会为大家解答。