OOP编程:TypeScript类使用详细指南

2021年3月24日13:58:24 发表评论 1,145 次浏览

OOP(面向对象编程)而言, 类是用于创建对象的蓝图。类是具有共同属性的对象的集合。它包含方法, 构造函数, 块, 嵌套类, 接口等。对象基本上是具有某些属性的实体, 例如现实世界中的对象(椅子, 桌子等)。

Typescript是一种基于Javascript(也称为Java的超集)构建的开源编程语言。与Javascript相比, Typescript具有更多功能。它支持面向对象的编程功能, 例如类, 接口, 多态等。

声明一个类的语法:

// typescript code
class class_name{
     field;
     method;
}

上面的代码传递给Typescript编译器后, 将转换为下面显示的javascript代码。我们可以随意使用任何名称代替class_name。

// code converted to javascript
var class_name = /** @class */ ( function () {
     function class_name() {
     }
     return class_name;
}());

注意:

打字稿代码使用.ts扩展名保存。

我们也来看一些打字稿示例:

// typescript code
class Student {
     studCode: number;
     studName: string;
  
     constructor(code: number, name: string) {
         this .studName = name;
         this .studCode = code;
     }
     getGrade() : string {
         return "A+" ;
      }
}

该示例声明一个Student类, 该类具有两个字段, 分别是

studCode

studName

构造函数是一种特殊的函数类型, 负责变量或对象的初始化。这里是参数化的构造函数(已经有参数)。和

这个

关键字, 指向类的当前实例。

getGrade()

是一个返回字符串的简单函数。

上面的打字稿代码将转换为javascript代码, 如下所示:

// converted javascript code
var Student = /** @class */ ( function () {
     function Student(code, name) {
         this .studName = name;
         this .studCode = code;
     }
     Student.prototype.getGrade = function () {
         return "A+" ;
     };
     return Student;
}());

对象

对象是类的实例, 其中包含一组键值对。它的值可以是标量值或函数, 甚至可以是其他对象的数组。

对象的语法类似于以下代码:

// simple object code in javascript
let object_name = { 
    key1: "value", key2: function () {
       //functions 
    }, key3:["content1", "content2"] //collection  
};

一个对象可以包含标量值, 函数和结构, 例如数组和元组。

让我们看一个简单的例子:

// simple javascript code
let person = {
    fName: "Mukul" , lName: "Latiyan" , Hello: function () {  }  //Type template 
} 
person.Hello = function () {  
    console.log( "Hello " +person.fName)
}  
person.Hello()

输出如下:

TypeScript类1
// typescript object example
var person = { 
    fname: "Mukul" , lname: "Latiyan" 
}; 
var hello = function (obj: { fname:string, lname :string }) { 
    console.log( "first name :" +obj.fname) 
    console.log( "last name :" +obj.lname) 
} 
hello(person)

输出如下:

TypeScript类2

用于创建实例对象。

要创建该类的实例, 请与

关键字, 后跟类名。在帮助下为对象分配内存

在运行时。喜欢:

let object_name = new class_name([ arguments ])

为了创建对象的实例, 我们可以执行以下代码。

let obj = new Student();

访问属性和功能:

对象可以访问类的属性和功能。在...的帮助下 ' 。 ’点表示法或方括号表示法(["]), 我们将访问类的数据成员。

//accessing an attribute 
obj.field_name or obj['field_name']

//accessing a function 
obj.function_name()

考虑下面的代码:

// typescript code
class Car { 
    //field 
    engine:string; 
     
    //constructor 
    constructor(engine:string) { 
       this .engine = engine 
    }  
     
    //function 
    display():void { 
       console.log( "Function displays Engine is  :   " + this .engine) 
    } 
} 
  
//create an object 
var o1 = new Car( "geeks" )
  
//access the field 
console.log( "Reading attribute value Engine as :  " +o1.engine)  
  
//access the function
o1.disp()

编译后, 此代码将转换为以下所示的javascript:

// converted javascript code
var Car = /** @class */ ( function () {
     //constructor 
     function Car(engine) {
         this .engine = engine;
     }
     //function 
     Car.prototype.display = function () {
         console.log( "Function displays Engine is  :   " + this .engine);
     };
     return Car;
}());
//create an object 
var o1 = new Car( "geeks" );
//access the field 
console.log( "Reading attribute value Engine as :  " + o1.engine);
//access the function
o1.disp();

输出如下:

TypeScript类3

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: