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());