Table of contents
1. Definition and simple use of TypeScript interface
1. Definition and simple use of TypeScript classes
2. TypeScript class inheritance
3. TypeScript class inherited method rewriting
4.TypeScript class static keyword
5. TypeScript instanceof operator
7. TypeScript access control modifiers
8. TypeScript classes and interfaces
1. TypeScript interface
1. Definition and simple use of TypeScript interface
A TypeScript interface is a declaration of a series of abstract methods, which is a collection of method features. The method itself is abstract and needs to be implemented by a specific class. Then a third party can use this set of abstract method calls to make a specific class execute a specific method. .
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 Ts2. Union types and interfaces
Using Union Types in Interfaces
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()) //13. Interfaces and arrays
In the interface, the index value and elements of the array can be set to different types, and the index value can be a number or a string.
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. Interface inheritance
An interface can extend itself by inheriting from other interfaces, the keyword uses 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) Single inheritance
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) Multiple inheritance
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 }2. TypeScript class
1. Definition and simple use of TypeScript classes
TypeScript classes describe common properties and methods for created objects
The keyword to define a class is class, followed by the class name. The class mainly includes the following modules (data members of the class):
(1) Field − A field is a variable declared in a class. Fields represent data about an object.
(2) Constructor − It is called when the class is instantiated, and can allocate memory for the object of the class.
(3) Method − A method is an operation to be performed by an object.
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()); //名称为:samxiaoguai2. TypeScript class inheritance
TypeScript supports inheritance classes, that is, we can inherit an existing class when creating a class. This existing class is called a parent class, and the class that inherits it is called a subclass.
Class inheritance uses the keyword extends. Subclasses can inherit everything except private members (methods and properties) and constructors of the parent class.
TypeScript can only inherit one class at a time, does not support inheriting multiple classes, but TypeScript supports multiple inheritance (A inherits B, B inherits 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()); //名称为:samxiaoguai3. TypeScript class inherited method rewriting
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 class static keyword
The static keyword is used to define the data members (properties and methods) of the class as static, and the static members can be called directly through the class name.
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:samxiaoguai5. TypeScript instanceof operator
The instanceof operator is used to determine whether the object is of the specified type, if it returns true, otherwise it returns 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
// false7. TypeScript access control modifiers
In TypeScript, access control operators can be used to protect access to classes, variables, methods, and constructors. TypeScript supports 3 different access rights.
(1) public (default): public, can be accessed anywhere.
(2) protected : protected and can be accessed by itself and its subclasses.
(3) private : private and can only be accessed by the class where it is defined.
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:ts8. TypeScript classes and interfaces
A class can implement an interface, using the implements keyword, and make its fields available as properties of the class.
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 }If you have any questions, please comment below and I will answer them for you.