Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

개발공부일지

Typescript - design patterns with TS ① 본문

TypeScript

Typescript - design patterns with TS ①

보람- 2024. 1. 11. 15:25

 ★ 목표

① google map api 서비스영역을 제한

② interface 활용

③ implements 활용

 ★ 목차

1. percel

2. faker

3. google map api

4. marker

5. implements

 

 

1. percel 

npm i -g parcel-bundler

npx parcel index.html

  → 브라우저 열어서 http://localhost:1234

 

 

 

 

2. faker

https://fakerjs.dev/

 npm i @types/faker
 
 import { faker } from '@faker-js/faker';

 

import { faker } from '@faker-js/faker';

export class Company {
  companyName: string;
  catchPhrase: string;
  location: {
    lat: number;
    lng: number;
  };

  constructor() {
    this.companyName = faker.company.name();
    this.catchPhrase = faker.company.catchPhrase();
    this.location = {
      lat: faker.location.latitude(),
      lng: faker.location.longitude(),
    };
  }
}


const company = new Company();
console.log(company);
import { faker } from '@faker-js/faker';

export class User {
  name: string;
  location: {
    lat: number;
    lng: number;
  };

  constructor() {
    this.name = faker.person.firstName();
    this.location = {
      lat: faker.location.latitude(),
      lng: faker.location.longitude(),
    };
  }
}

const user = new User();
console.log(user);

 

 

 

 

 

3. google map api

https://developers.google.com/maps/documentation/javascript/using-typescript?hl=ko#Module_Import

 <body>
    <div id="map" style="height: 600px"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=Function.prototype"></script>
    <script src="./src/index.ts"></script>
  </body>
npm install @types/google.maps
export class CustomMap {
  private googleMap: google.maps.Map;

  constructor(divId: string) {
    this.googleMap = new google.maps.Map(
      document.getElementById(divId) as HTMLElement,
      {
        zoom: 1,
        center: new google.maps.LatLng(0, 0),
      }
    );
  }
}

 

 

 

4. marker

   - marker info window

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

  addMarker(mappable: Mappable): void {
    const marker = new google.maps.Marker({
      map: this.googleMap,
      position: {
        lat: mappable.location.lat,
        lng: mappable.location.lng,
      },
    });

    marker.addListener('click', () => {
      const infowindow = new google.maps.InfoWindow({
        content: mappable.markerContent(),
      });

      infowindow.open(this.googleMap, marker);
    });
  }

 

 

 

 

5. implements 

export interface Mappable {
  // addMarker
  location: {
    lat: number;
    lng: number;
  };

  markerContent(): string;
  color: string;
}
export class Company implements Mappable {
  companyName: string;
  catchPhrase: string;
  location: {
    lat: number;
    lng: number;
  };
  color: string = 'blue';
}

 

 

※ CustomMap.ts

더보기 
// import { User } from './User';
// import { Company } from './Company';

export interface Mappable {
  // addMarker
  location: {
    lat: number;
    lng: number;
  };

  markerContent(): string;
  color: string;
}

export class CustomMap {
  private googleMap: google.maps.Map;

  constructor(divId: string) {
    this.googleMap = new google.maps.Map(
      document.getElementById(divId) as HTMLElement,
      {
        zoom: 1,
        center: new google.maps.LatLng(0, 0),
      }
    );
  }

  addMarker(mappable: Mappable): void {
    const marker = new google.maps.Marker({
      map: this.googleMap,
      position: {
        lat: mappable.location.lat,
        lng: mappable.location.lng,
      },
    });

    marker.addListener('click', () => {
      const infowindow = new google.maps.InfoWindow({
        content: mappable.markerContent(),
      });

      infowindow.open(this.googleMap, marker);
    });
  }
}

 

 

※ Company.ts

더보기 
import { faker } from '@faker-js/faker';
import { Mappable } from './CustomMap';

export class Company implements Mappable {
  companyName: string;
  catchPhrase: string;
  location: {
    lat: number;
    lng: number;
  };
  color: string = 'blue';

  constructor() {
    this.companyName = faker.company.name();
    this.catchPhrase = faker.company.catchPhrase();
    this.location = {
      lat: faker.location.latitude(),
      lng: faker.location.longitude(),
    };
  }

  markerContent(): string {
    return `
    <div>
      <h1>Company Name : ${this.companyName}</h1>
      <h3>Catchphrase : ${this.catchPhrase}</h3>
    </div>
    `;
  }
}

 

※ User.ts

더보기 
import { faker } from '@faker-js/faker';
import { Mappable } from './CustomMap';

export class User implements Mappable {
  name: string;
  location: {
    lat: number;
    lng: number;
  };
  color: string = 'red';

  constructor() {
    this.name = faker.person.firstName();
    this.location = {
      lat: faker.location.latitude(),
      lng: faker.location.longitude(),
    };
  }

  markerContent(): string {
    return `User Name : ${this.name}`;
  }
}

 

※ index.ts

더보기 
import { User } from './User';
import { Company } from './Company';
import { CustomMap } from './CustomMap';

const user = new User();
const company = new Company();

const customMap = new CustomMap('map');

customMap.addMarker(user);
customMap.addMarker(company);
저작자표시

'TypeScript' 카테고리의 다른 글

Typescript - 2) more on design patterns with TS  (0) 2024.01.11
TypeScript - 전략패턴(Strategy Pattern)  (0) 2024.01.05
TypeScript - 제네릭(generics), tuple, interface  (0) 2024.01.05
TypeScript  (0) 2024.01.04
'TypeScript' Related Articles more