当前位置：极客教程 > TypeScript > TypeScript 教程 > TypeScript 创建对象

TypeScript 创建对象

TypeScript 创建对象

该对象包含其属性的键值对，或者它可以是TypeScript中类的实例。类和其对象是面向对象编程的基础。所以，没有对象，OOPS就不存在。主要是，对象被用来调用类的非静态方法。

在TypeScript中，有多种方法来定义对象。下面我们将逐一学习定义对象的所有方法。

使用Object Literal Notation来创建对象

对象文字符号意味着我们可以使用两个大括号来创建对象。通过逗号分隔，我们需要在大括号内定义对象属性的键值对。

语法

下面的语法显示了如何使用对象文字符号来定义对象和插入属性。

let object = {
   key1: Value1,
   key2: value2,
}
TypeScript

示例 1

在下面的例子中，我们已经创建了Employee接口，我们将用它来定义雇员对象的类型。Employee接口包含emp_name, department, and joining_date共3个属性。

之后，我们创建了包含不同属性值的雇员类型的emp对象。最后，我们打印了emp对象的属性值。

// Employee interface to define the object type
interface Employee {
   emp_name: string;
   department: string;
   joining_date: Date;
}
// Creating an object of the Employee type
let emp: Employee = {
   emp_name: "Shubham",
   department: "Writing",
   joining_date: new Date(),
};
// Printing the object information
console.log(
   "The joining date of the " +
   emp.emp_name +
   " into the " +
   emp.department +
   " department is " +
   emp.joining_date
)
TypeScript
// Creating an object of the Employee type
var emp = {
   emp_name: "Shubham",
   department: "Writing",
   joining_date: new Date()
};
// Printing the object information
console.log("The joining date of the " +
emp.emp_name +
" into the " +
emp.department +
" department is " +
emp.joining_date);
TypeScript

输出

上述代码将产生以下输出 —

The joining date of the Shubham into the Writing department is Sun Dec 25 2022 09:01:09
GMT+0000 (UTC)
TypeScript

示例 2

在下面的例子中，我们已经创建了接口car，它包含了一些汽车的属性，如模型和颜色。object_func()函数将汽车对象作为一个参数，并返回汽车信息。

之后，我们通过传递Car类型的匿名对象作为参数，执行object_func()函数。

// Type declaration for the Car object
interface Car {
   model: string;
   color: string;
   model_year: number;
}
// function whic returns the car info
function object_func(car: Car): string {
   return "The " + car.model + " is developed in the year " + car.model_year;
}
// Calling the object_func with anonymous object of the Car type
console.log(object_func({ model: "Verna SX", color: "black", model_year: 2016 }));
TypeScript
// function whic returns the car info
function object_func(car) {
   return "The " + car.model + " is developed in the year " + car.model_year;
}
// Calling the object_func with anonymous object of the Car type
console.log(object_func({ model: "Verna SX", color: "black", model_year: 2016 }));
TypeScript

输出

上述代码将产生以下输出 —

The Verna SX is developed in the year 2016
TypeScript

使用构造函数来定义对象

构造函数是一种类或对象的方法，当我们创建一个对象时总是首先调用。构造函数需要一个值作为参数，我们可以使用该参数值来初始化对象或类的属性。

语法

用户可以按照下面的语法来定义Number类的对象。此外，我们还将值作为构造函数的参数传给了对方。

let number_obj = new Number(value);
TypeScript

在上面的语法中，我们使用了箭头函数作为回调函数。

示例 1

下面的例子包含了表类。在表类中，我们为表定义了颜色和大小属性。此外，我们还使用构造函数关键字为表类创建了构造函数，它以table_color和table_size为参数。每次我们创建一个表类的对象时，构造函数都会被调用，并初始化表类的颜色和大小属性。

之后，我们使用table类的构造函数创建了table1对象，并把桌子的颜色和大小作为参数传给了他。在输出中，用户可以看到table1对象的属性值被改变。

// Creating the table class
class table {
   // defining the properties of the table class with default values
   color: string = "black";
   size: string = "19 x 19 inches";

   // constructor of the table class
   constructor(table_color: string, table_size: string) {
      this.color = table_color;
      this.size = table_size;
   }
}
// creating the object of the table class with constructor arguments
let table1 = new table("white", "4 x 4 feet");

// printing the information of the table1 object
console.log("The color of table1 is " + table1.color);
console.log("The size of the table1 is " + table1.size);
TypeScript
// Creating the table class
var table = /** @class */ (function () {

   // constructor of the table class
   function table(table_color, table_size) {

      // defining the properties of the table class with default values
      this.color = "black";
      this.size = "19 x 19 inches";
      this.color = table_color;
      this.size = table_size;
   }
   return table;
}());
// creating the object of the table class with constructor arguments
var table1 = new table("white", "4 x 4 feet");

// printing the information of the table1 object
console.log("The color of table1 is " + table1.color);
console.log("The size of the table1 is " + table1.size);
TypeScript

输出

上述代码将产生以下输出 —

The color of table1 is white
The size of the table1 is 4 x 4 feet
TypeScript

示例 2

在下面的例子中，我们定义了函数名称构造器。它将字符串值作为第一个参数，数字值作为第二个参数，函数作为第三个参数，并将这些值分配给其属性，即property1、property2和property3。

在TypeScript中，我们可以使用任何函数作为构造函数并创建其对象实例。在这里，我们使用了constructor()函数作为构造函数来创建一个new_object。之后，我们调用了new_object的property3()函数。

// Define the constructor function
function constructor(value1: string, value2: number, value3: Function) {
   this.property1 = value1;
   this.property2 = value2;
   // It takes the function as a value
   this.property3 = value3;
}
// Creating the new object by passing arguments to constructor,

// Third argument is the function.
let new_object = new constructor("shubham", 22, () => {
   return "Hello World";
});
console.log("The property1 value of the new object is " + new_object.property1);
console.log(
"Invoking the function of the property3, " + new_object.property3()
);
TypeScript
// Defininf the constructor function
function constructor(value1, value2, value3) {
   this.property1 = value1;
   this.property2 = value2;

   // It takes the function as a value
   this.property3 = value3;
}
// Creating the new object by passing arguments to constructor,

// Third argument is the function.
var new_object = new constructor("shubham", 22, function () {
   return "Hello World";
});
console.log("The property1 value of the new object is " + new_object.property1);
console.log("Invoking the function of the property3, " + new_object.property3());
TypeScript

输出

上述代码将产生以下输出 —

The property1 value of the new object is shubham
Invoking the function of the property3, Hello World
TypeScript

使用Object.create()方法来克隆现有的对象

在TypeScript中，我们可以使用Object.create()方法克隆现有对象。

语法

在下面的语法中，我们使用Object.create()方法克隆了obj方法并定义了clone_obj。

let obj = {
   message: "Hello Users!",
};
let clone_obj = Object.create(obj);
TypeScript

这里Obj是一个我们要创建克隆的对象。

示例

在下面的例子中，我们已经创建了包含一些属性的obj对象。之后，我们使用Object.create()方法将obj对象的所有属性克隆到clone_obj。在输出中，用户可以观察到clone_obj包含与obj相同的属性和它们的值。

// Creating the object with key-value pairs
let obj = {
   message: "Hello Users!",
   property1: "TutorialsPoint",
   Property2: 90
};

// cloning the obj using the Object.create() method
let clone_obj = Object.create(obj);
console.log(
   "Printing the information of the clone_obj is " +
   clone_obj.message +
   " " +
   clone_obj.property1
);
TypeScript
// Creating the object with key-value pairs
var obj = {
   message: "Hello Users!",
   property1: "TutorialsPoint",
   Property2: 90
};

// cloning the obj using the Object.create() method
var clone_obj = Object.create(obj);
console.log("Printing the information of the clone_obj is " +
clone_obj.message + " " +
clone_obj.property1);
TypeScript

输出

上述代码将产生以下输出 —

Printing the information of the clone_obj is Hello Users! TutorialsPoint
TypeScript

我们学习了在TypeScript中创建对象的两种不同方式。用户可以根据他们需要创建对象的情况，使用对象字面符号或构造器符号。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

TypeScript 教程

登录

找回密码？

注册