将接口数组键入为类成员

Question

类成员作为接口数组

我的代码出了什么问题我不明白为什么这个.circles.length是不确定的

interface Point {
x: number;
y: number;
}
interface Circle {
xy: Point;
radius: number;
}
class Canvas {
circles: Circle[]; //**interface Circle as Canvas member**
constructor() {
this.circles.push({
xy: {
x: 10,
y: 10,
},
radius: 0,
});
console.log(this.circles.length); //error
}
}

Answer 1

因为Typescript只是一个类型系统，所以您仍然需要做JS的工作来使其正常工作。

interface Point {
x: number;
y: number;
}
class Canvas {
circles: Circle[] = []; // add an empty array here
constructor() {
console.log(this.circles.length); // it should work now
}
}

---

为什么

请看这个例子。由于Typescript只是一个类型系统，当您将其编译为Javascript时，所有类型都将被删除。

// typescript
let circle: Circle;
// compiled to javascript
let circle; // have no value (undefined)

数组也是如此。

// typescript
let circles: Circle[];
// compiled to javascript
let circles; // have no value (undefined)

这就是为什么不能使用.push()或.length，因为它是未定义的。

Answer 2

您需要首先创建/初始化数组。您可以用数组中已有的一个元素初始化它，如下所示：

interface Point {
x: number;
y: number;
}
interface Circle {
xy: Point;
radius: number;
}
class Canvas {
circles: Circle[]; //**interface Circle as Canvas member**
constructor() {
this.circles = [{ // create and initialize array with one member
xy: {
x: 10,
y: 10,
},
radius: 0,
}];
console.log(this.circles.length); // prints "1"
}
}
new Canvas()

预期输出：

1

constructor()在两个步骤中完成上述操作的等效实现如下所示：

constructor(){
this.circles = [];
this.circles.push({
xy: {
x: 10,
y: 10,
},
radius: 0,
});
console.log(this.circles.length);
}