A, classes,

TypeScript is object-oriented JavaScript. Classes describe common properties and methods of the objects they create. TypeScript supports all object-oriented features, such as classes, interfaces, and so on.

The class keyword is class, followed by the class name. Classes can contain the following modules:

  • Fields: Fields are variables declared in a class. Fields represent data about an object.
  • Constructor: called when a class is instantiated to allocate memory for its objects.
  • Methods: Methods are the operations to be performed by the object.

Usage:

class Greeter {
  static cname: string = "Greeter";// Static attributes
  greeting: string; // Member attributes
  constructor(message: string) {// constructor - performs initialization
    this.greeting = message;
  }

  static getClassName() {// Static method
    return "Class name is Greeter";
  } 
  greet() {// Member methods
    return "Hello, " + this.greeting; }}// Compile the generated ES5
"use strict";
var Greeter = / * *@class * / (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.getClassName = function () {
        return "Class name is Greeter";
    };
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    Greeter.cname = "Greeter";
    returnGreeter; } ());Copy the code

Class inheritance

When you create a class, you inherit from an existing class. The existing class is called a parent class, and the classes that inherit from it are called subclasses. Class inheritance uses the extends keyword. Subclasses can inherit anything except the private members (methods and properties) and constructors of their parent class.

TypeScript inherits only one class at A time and does not support multiple classes, but TypeScript supports multiple inheritance (A inherits B, B inherits C).

class Root { 
   str:string; 
} 
class Child extends Root {} 
class Leaf extends Child {} // Multiple inheritance, inheriting Child and Root classes
 
var obj = new Leaf(); 
obj.str ="hello" 
Copy the code

Method override of an inherited class

After class inheritance, a subclass can redefine the methods of its parent class, a process called method rewriting. The super keyword is a direct reference to the parent class, which can refer to the attributes and methods of the parent class.

class PrinterClass { 
   doPrint():void {
      console.log("Parent's doPrint() method.")}}class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // Call the parent function
      console.log("Subclass's doPrint() method.")}}Copy the code

Classes and interfaces

Classes can implement interfaces, use the keyword implements, and use the interest field as an attribute of the class.

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10.1)
Copy the code

Second, the object

An object is an instance that contains a set of key-value pairs. Values can be scalars, functions, arrays, objects, and so on.

var sites = {
    site1: "Runoob".site2: "Google".sayHello: function () {}// Type templates. Objects in Typescript must be instances of specific types; JavaScript does not
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello();
Copy the code

Namespaces

A namespace defines the visible scope of an identifier. An identifier can be defined in multiple namespaces, and its meaning in different namespaces is irrelevant.

Namespaces are defined using a namespace. If we need to call classes and interfaces in the namespace externally, we need to add the export keyword to the classes and interfaces. If a namespace is in a separate TypeScript file, it should be referenced with a triple slash ///.

Method of use

// IShape.ts
namespace Drawing { 
    export interfaceIShape { draw(); }}// Circle.ts 
/// <reference path = "IShape.ts" /> 
namespace Drawing { 
    export class Circle implements IShape { 
        public draw() { 
            console.log("Circle is drawn"); }}}// TestShape.ts
/// <reference path = "IShape.ts" />   
/// <reference path = "Circle.ts" />  
function drawAllShapes(shape:Drawing.IShape) { 
    shape.draw(); 
} 
drawAllShapes(new Drawing.Circle());
Copy the code

Nested namespaces

Namespaces support nesting, which means you can define a namespace in another namespace. Members access using periods. To implement.

namespace Runoob { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * 40.; }}}}/// <reference path = "Invoice.ts" />
var invoice = new Runoob.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));
Copy the code

Four, modules,

Modules execute in their own scope, not in a global scope, and the relationship between the two modules is established by using import and export at the file level.

A module uses the module loader to import other modules. At run time, the module loader’s job is to find and execute all of the module’s dependencies before executing the module code. Familiar JavaScript module loaders are CommonJS for Node.js and require.js for Web applications.

Method of use

// IShape.ts
export interface IShape { 
   draw(); 
}

// Circle.ts 
import shape = require("./IShape"); 
export class Circle implements shape.IShape { 
   public draw() { 
      console.log("Cirlce is drawn (external module)"); }}// TestShape.ts
import shape = require("./IShape"); 
import circle = require("./Circle");  
function drawAllShapes(shapeToDraw: shape.IShape) {
   shapeToDraw.draw(); 
} 
drawAllShapes(new circle.Circle());
Copy the code