add ts

Author: jarry

bridge-pattern/js/src/Shape.js

@@ -6,4 +6,4 @@ export class Shape {
   }
 
   draw(x, y, radius) {}
-}
+}

bridge-pattern/js/test/test.js

@@ -7,7 +7,7 @@ export function test() {
   const circle = new Circle(new DrawStyleA())
   // 调用对象的方法，里面执行了工具类的方法
   circle.draw(10, 20, 50)
-  //还可以调用父类里的方法
+  // 还可以调用父类里的方法
   circle.drawDone()
 
   // /*********************** 分割线 ******************************************/
@@ -31,7 +31,6 @@ jarry@jarrys-MacBook-Pro js % npm run test
 // or node execution
 jarry@jarrys-MacBook-Pro js % node test/test.js
 test start:
-test start:
 Circle::draw() [x=10 y=20 radius=50]
 DrawStyleA:drawStyle()
 RefinedShape::drawDone(), 执行的drawTool是: DrawStyleA

bridge-pattern/ts/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "esm-project",
+  "version": "1.0.0",
+  "main": "test/test.js",
+  "scripts": {
+    "test": "node test/test.js"
+  },
+  "type": "module"
+}

bridge-pattern/ts/src/Circle.ts

@@ -0,0 +1,16 @@
+import { RefinedShape } from './RefinedShape.js'
+import { DrawTool } from './DrawTool.js'
+
+// 具体业务类，调用工具来辅助实现功能
+export class Circle extends RefinedShape {
+
+  constructor(drawTool: DrawTool) {
+    super(drawTool)
+  }
+
+  draw(x: number, y: number, radius: number) {
+    console.log(`Circle::draw() [x=${x} y=${y} radius=${radius}]`)
+    // 通过工具类实际绘制
+    this.drawTool.drawStyle()
+  }
+}

bridge-pattern/ts/src/DrawStyleA.ts

@@ -0,0 +1,8 @@
+import { DrawTool } from './DrawTool.js'
+
+// 画圆A，实现了图画基础API
+export class DrawStyleA implements DrawTool {
+  drawStyle() {
+    console.log('DrawStyleA:drawStyle()')
+  }
+}

bridge-pattern/ts/src/DrawStyleB.ts

@@ -0,0 +1,8 @@
+import { DrawTool } from './DrawTool.js'
+
+// 画圆B，实现了图画基础API
+export class DrawStyleB implements DrawTool {
+  drawStyle() {
+    console.log('DrawStyeB:drawStyle()')
+  }
+}

bridge-pattern/ts/src/DrawTool.ts

@@ -0,0 +1,4 @@
+// 图形操作基础接口
+export interface DrawTool {
+  drawStyle(): void
+}

bridge-pattern/ts/src/RefinedShape.ts

@@ -0,0 +1,22 @@
+import { Shape } from './Shape.js'
+import { DrawTool } from './DrawTool.js'
+
+// 定义新抽象类继承基础抽象类
+export class RefinedShape extends Shape {
+  constructor(drawTool: DrawTool) {
+    super(drawTool)
+  }
+
+  // 覆盖父类的方法，会被真正的类再覆盖
+  draw(x: number, y: number, radius: number) {
+    console.log(`RefinedShape::draw() [x=${x} y=${y} radius=${radius}]`)
+  }
+
+  // 新抽象类里的方法，可作为补充
+  drawDone() {
+    console.log(
+      'RefinedShape::drawDone(), 执行的drawTool是: ' +
+        this.drawTool.constructor.name
+    )
+  }
+}

bridge-pattern/ts/src/Shape.ts

@@ -0,0 +1,11 @@
+import { DrawTool } from './DrawTool.js'
+
+// 定义抽象形状类，关联图形操作接口
+export abstract class Shape {
+  drawTool: DrawTool
+  constructor(drawTool: DrawTool) {
+    this.drawTool = drawTool
+  }
+
+  abstract draw(x: number, y: number, radius: number): void
+}

bridge-pattern/ts/test/test.html

@@ -0,0 +1,5 @@
+<script type="module">
+// module need run in http server
+import { test } from './test.js'
+alert('pls look console info.' + '\n\r' + test)
+</script>