Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use class and interface in TypeScript, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will have something to gain after reading this article on how to use class and interface in TypeScript. Let's take a look.

Class

One thing we need to be clear about on the home page is the difference between TypeScript classes and ES6 syntax classes in JavaScript. Don't get confused. Compared to js, ts adds the type of declared property and the type of parameter, as well as the type of return result. This place will be wrong as soon as you look at it, and if you don't declare that ts will report an error.

Class Person {name:string; constructor (name:string) {this.name = name;} getName (): void {console.log (this.name);}} class Person {constructor (name) {this.name = name;} getName () {console.log (this.name);}}

Results edited by ES5

Var Person = / * * @ class * / (function () {function Person (name) {this.name = name;} Person.prototype.getName = function () {console.log (this.name);}; return Person;} ()); get and set of the class

Ts compiles es3 by default when compiling get and set, and the vscode editor will report an error error TS1056: Accessors are only available when targeting ECMAScript 5 and higher needs to be compiled to version ES5 or above, the solution: $tsc xxx.ts-t es5.

Class User {myname:string; constructor (myname:string) {this.myname = myname} get name () {return this.myname} set name (newName:string) {this.myname = newName}}

The compiled result of ES5

Var User = / * * @ class * / (function () {function User (myname) {this.myname = myname;} Object.defineProperty (User.prototype, "name", {get: function () {return this.myname;}, set: function (newName) {this.myname = newName) }, enumerable: false, configurable: true}); return User;} ()

Here are a few thinking questions, and the answers are at the end of the article:

Var u = new User ("a"); console.log (u); console.log (u.myname); u.myname = 'breadth console.log (u.myname); console.log (u.hasOwnProperty ("name")); console.log (Object.getPrototypeOf (u)); console.log (Object.getPrototypeOf (u) .hasOwnProperty ("name")); Abstract class

The abstract keyword represents an abstract class. Abstract classes cannot be instantiated, that is, new, and can only be inherited. Abstract classes are generally used to encapsulate common methods and properties that are provided to subclasses.

Abstract class Animal {public readonly name:string; protected age:number = 38; private money:number = 10 Constructor (name:string) {this.name = name}} class Dog extends Animal {static className = 'Dog' static getClassName () {console.log (this.className)} getName () {console.log (this.name)} getAge () {console.log (this.age)}} let a = new Animal ("ss")

Print here to see the result of inheritance:

Console.log (a); / / Dog {age: 38, money: 10, name: 'ss'}

By the way, the access modifier public protected private

Public can be accessed both inside and outside, including itself, its own subclasses and other classes.

Protected itself and subclasses can access it, but not anywhere else.

Private is private (only you can access it, no other subclasses can access it)

The interface interface represents the properties of the object interface Rectangle {width: number; height: number} let r: Rectangle = {width: 100, height: 10} interface Speakable {speak (): void; name?: string} let speaker: Speakable = {/ / name: "bdt", speak () {}} API is used to describe abstract behavior interface AnimalLink {eat (): void Move (): void} interface can inherit interface PersonLike extends AnimalLink {speak (): void} class Person2 implements PersonLike {speak () {}; eat () {}; move () {}} constrain variable type interface Person3 {readonly id: number; name: string through the interface [PropName: string]: any} let p1: Person3 = {id: 1, name: "sss"} via interface constraint (specification) function interface DiscountInterface {(price:number): number} let discount:DiscountInterface = function (price:number): number {return price * .8} constrains arrays and objects interface UserInterface {[index:number]: string} let arr:UserInterface = ['aa'] by index 'bb'] interface UserInterface2 {[index:string]: string} let obj:UserInterface2 = {name: "sss"} Constructor class Animal3 {constructor (public name:string) {} interface WithClassName {new (name:string): Animal3} function createClass (clazz:WithClassName,name:string) {return new clazz (name)} let a3 = createClass (Animal3, "Don't shake your legs") The difference between console.log (A3) class and interface

The class class declares and implements methods

Interface interface declaration, but cannot implement methods

Abstract class Animal {name:string= "111"; abstract speak (): void / / Abstract classes and methods do not contain concrete implementations must be implemented in the subclass} / / the methods in the interface are abstract interface Flying {fly (): void} interface Eating {eat (): void} class Dog extends Animal {speak () {console.log (woof) / / rewrite: subclass overrides methods inherited from the parent class}} class Cat extends Animal implements Flying Eating {speak () {/ / methods that inherit abstract classes must implement console.log ("meow")} fly () {console.log ("I am a flying animal")} eat () {console.log ("I am a foodie")}}

The answer in the text

User {myname:'a'} ab falseUser {name: [Getter/Setter]} true's article on "how to use class and interface in TypeScript" ends here. Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use class and interface in TypeScript". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.