TypeScript-对象

时间:2020-02-23 14:46:21  来源:igfitidea点击:

在本教程中,我们将学习TypeScript中的对象。

如果要使用JavaScript创建对象,请编写以下代码。

var user = {
  username: 'theitroad',
  points: 10
};

在上面的代码中,我们以名称" user"创建了一个对象,该对象具有两个属性" username"和" points",分别具有字符串和数字值。

在TypeScript中,我们可以以类似方式创建对象。

let user = {
  username: 'theitroad',
  points: 10
};

上面代码中的唯一区别是TypeScript现在假定用户对象的类型如下。

{ username: string, points: number }

也就是说,TypeScript希望user对象具有两个属性。
第一个属性名称必须是"用户名",并且是"字符串"类型,第二个属性名称必须是" points",并且是"数字"类型。

因此,如果我们尝试将其他一些值重新分配给user,那么它将在编译期间给我们带来错误。

The following code will not work.

//creating an object
let user = {
  username: 'theitroad',
  points: 10
};

//now assigning a new value
//this will give error
user = {
  name: 'theitroad',
  score: 10
};

编译时,出现以下错误。

$tsc
script/objects.ts(12,3): error TS2322: Type '{ name: string; score: number; }' is not assignable to type '{ username: string; points: number; }'.
  Object literal Jan only specify known properties, and 'name' does not exist in type '{ username: string; points: number; }'.

对象类型

以下是创建对象类型的语法。

let varName: { prop1: type1, ...};

其中," varName"是变量的名称。
变量的类型设置为一个对象,该对象以prop1作为属性,并接受给定类型type1的值,依此类推。

在下面的示例中,我们将创建一个对象类型来存储用户名,点和描述。

//declaring variable of object type
let user: { username: string, points: number, description: string };

我们现在可以像下面这样将对象值分配给user变量。

//assign value
user = {
  username: 'theitroad',
  points: 9,
  description: 'This is my profile.'
};

创建复杂的对象类型

在下面的示例中,我们创建一个对象类型,该对象类型使用两个数字并且还具有一个返回数字之和的函数。

let obj: { x: number, y: number, getSum: () => number };

因此obj对象具有三个属性。
前两个属性的类型为number,第三个属性为Arrow Function,该函数不带任何参数,但返回number类型的值。

现在我们可以给obj变量赋值。

//assign value
obj = {
  x: 10,
  y: 20,
  getSum: function (): number {
    return this.x + this.y;
  }
};

//call the function getSum()
console.log("Sum: " + obj.getSum());