2023-09-05T13:45:25.169Z

src/030-classes/106-class-methods.problem.ts

@@ -1,19 +1,18 @@
 import { expect, it } from "vitest";
 
 class CanvasNode {
-  readonly x = 0;
-  readonly y = 0;
+  x = 0;
+  y = 0;
 }
 
-it("Should work", () => {
+it("Should be able to move", () => {
   const canvasNode = new CanvasNode();
 
   expect(canvasNode.x).toEqual(0);
   expect(canvasNode.y).toEqual(0);
 
-  // @ts-expect-error Property is readonly
-  canvasNode.x = 10;
+  canvasNode.move(10, 20);
 
-  // @ts-expect-error Property is readonly
-  canvasNode.y = 20;
+  expect(canvasNode.x).toEqual(10);
+  expect(canvasNode.y).toEqual(20);
 });

src/030-classes/106-class-methods.solution.1.ts

@@ -0,0 +1,23 @@
+import { expect, it } from "vitest";
+
+class CanvasNode {
+  x = 0;
+  y = 0;
+
+  move(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+it("Should be able to move", () => {
+  const canvasNode = new CanvasNode();
+
+  expect(canvasNode.x).toEqual(0);
+  expect(canvasNode.y).toEqual(0);
+
+  canvasNode.move(10, 20);
+
+  expect(canvasNode.x).toEqual(10);
+  expect(canvasNode.y).toEqual(20);
+});

src/030-classes/106-class-methods.solution.2.ts

@@ -0,0 +1,23 @@
+import { expect, it } from "vitest";
+
+class CanvasNode {
+  x = 0;
+  y = 0;
+
+  move = (x: number, y: number) => {
+    this.x = x;
+    this.y = y;
+  };
+}
+
+it("Should be able to move", () => {
+  const canvasNode = new CanvasNode();
+
+  expect(canvasNode.x).toEqual(0);
+  expect(canvasNode.y).toEqual(0);
+
+  canvasNode.move(10, 20);
+
+  expect(canvasNode.x).toEqual(10);
+  expect(canvasNode.y).toEqual(20);
+});

src/030-classes/108-receiving-arguments-to-constructor.problem.ts

@@ -0,0 +1,33 @@
+import { expect, it } from "vitest";
+
+class CanvasNode {
+  x = 0;
+  y = 0;
+
+  move(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+it("Should be able to move", () => {
+  const canvasNode = new CanvasNode();
+
+  expect(canvasNode.x).toEqual(0);
+  expect(canvasNode.y).toEqual(0);
+
+  canvasNode.move(10, 20);
+
+  expect(canvasNode.x).toEqual(10);
+  expect(canvasNode.y).toEqual(20);
+});
+
+it("Should be able to receive an initial position", () => {
+  const canvasNode = new CanvasNode({
+    x: 10,
+    y: 20,
+  });
+
+  expect(canvasNode.x).toEqual(10);
+  expect(canvasNode.y).toEqual(20);
+});

src/030-classes/108-receiving-arguments-to-constructor.solution.ts

@@ -0,0 +1,38 @@
+import { expect, it } from "vitest";
+
+class CanvasNode {
+  x;
+  y;
+
+  constructor(position?: { x: number; y: number }) {
+    this.x = position?.x ?? 0;
+    this.y = position?.y ?? 0;
+  }
+
+  move(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+it("Should be able to move", () => {
+  const canvasNode = new CanvasNode();
+
+  expect(canvasNode.x).toEqual(0);
+  expect(canvasNode.y).toEqual(0);
+
+  canvasNode.move(10, 20);
+
+  expect(canvasNode.x).toEqual(10);
+  expect(canvasNode.y).toEqual(20);
+});
+
+it("Should be able to receive an initial position", () => {
+  const canvasNode = new CanvasNode({
+    x: 10,
+    y: 20,
+  });
+
+  expect(canvasNode.x).toEqual(10);
+  expect(canvasNode.y).toEqual(20);
+});

src/030-classes/108.5-getters.problem.ts

@@ -0,0 +1,35 @@
+import { expect, it } from "vitest";
+
+class CanvasNode {
+  x;
+  y;
+
+  constructor(position?: { x: number; y: number }) {
+    this.x = position?.x ?? 0;
+    this.y = position?.y ?? 0;
+  }
+
+  move(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+it("Should be able to move", () => {
+  const canvasNode = new CanvasNode();
+
+  expect(canvasNode.position).toEqual({ x: 0, y: 0 });
+
+  canvasNode.move(10, 20);
+
+  expect(canvasNode.position).toEqual({ x: 10, y: 20 });
+});
+
+it("Should be able to receive an initial position", () => {
+  const canvasNode = new CanvasNode({
+    x: 10,
+    y: 20,
+  });
+
+  expect(canvasNode.position).toEqual({ x: 10, y: 20 });
+});

src/030-classes/108.5-getters.solution.ts

@@ -0,0 +1,42 @@
+import { expect, it } from "vitest";
+
+class CanvasNode {
+  x;
+  y;
+
+  constructor(position?: { x: number; y: number }) {
+    this.x = position?.x ?? 0;
+    this.y = position?.y ?? 0;
+  }
+
+  get position() {
+    return {
+      x: this.x,
+      y: this.y,
+    };
+  }
+
+  move(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+it("Should be able to move", () => {
+  const canvasNode = new CanvasNode();
+
+  expect(canvasNode.position).toEqual({ x: 0, y: 0 });
+
+  canvasNode.move(10, 20);
+
+  expect(canvasNode.position).toEqual({ x: 10, y: 20 });
+});
+
+it("Should be able to receive an initial position", () => {
+  const canvasNode = new CanvasNode({
+    x: 10,
+    y: 20,
+  });
+
+  expect(canvasNode.position).toEqual({ x: 10, y: 20 });
+});

src/030-classes/example.ts

@@ -1,5 +1,21 @@
 import { expect, it } from "vitest";
 
+function logXAndY(
+  originalMethod: (...args: any[]) => any,
+  context: ClassMethodDecoratorContext<Shape>,
+) {
+  const methodName = String(context.name);
+
+  function replacementMethod(this: Shape, ...args: any[]) {
+    console.log(`Calling ${methodName} with`, ...args);
+    console.log(`x: ${this.x}, y: ${this.y}`);
+    const result = originalMethod.call(this, ...args);
+    return result;
+  }
+
+  return replacementMethod;
+}
+
 type ViewMode = "hidden" | "visible" | "selected";
 
 type InitialOptions = { x: number; y: number; viewMode?: ViewMode };
@@ -10,21 +26,22 @@ interface IShape {
 }
 
 class Shape implements IShape {
-  #x: number;
-  #y: number;
+  x: number;
+  y: number;
 
   constructor(initial?: InitialOptions) {
-    this.#x = initial?.x ?? 0;
-    this.#y = initial?.y ?? 0;
+    this.x = initial?.x ?? 0;
+    this.y = initial?.y ?? 0;
   }
 
   get position() {
-    return { x: this.#x, y: this.#y };
+    return { x: this.x, y: this.y };
   }
 
+  @logXAndY
   move(deltaX: number, deltaY: number) {
-    this.#x += deltaX;
-    this.#y += deltaY;
+    this.x += deltaX;
+    this.y += deltaY;
   }
 }
 
@@ -36,9 +53,10 @@ class CanvasNode extends Shape {
     this.#viewMode = initial?.viewMode ?? "visible";
   }
 
-  hide = () => {
+  @logXAndY
+  hide() {
     this.#viewMode = "hidden";
-  };
+  }
 
   get isHidden() {
     return this.#viewMode === "hidden";