[TypeScript] ๐Ÿณ 3.1 ํด๋ž˜์Šค ์‚ฌ์šฉ

์กฐ์ค€ํ˜•ยท2021๋…„ 12์›” 6์ผ
0

TypeScript

๋ชฉ๋ก ๋ณด๊ธฐ
10/11
post-thumbnail

๐Ÿณ 3์žฅ ํด๋ž˜์Šค์™€ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•œ ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

์ด๋ฒˆ ์žฅ์—์„œ๋Š” ๊ฐ์ฒด์ง€ํ–ฅํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ด€์ ์œผ๋กœ ํด๋ž˜์Šค์™€ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋ฐฐ์›Œ๋ณผ ๊ฒƒ์ด๋‹ค.

๊ฐ์ฒด ์ง€ํ–ฅ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋Š” ํด๋ž˜์Šค์— ํŠน์ • API๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๐Ÿณ 3.1 ํด๋ž˜์Šค ์‚ฌ์šฉ

๐ŸŒ 2์žฅ ๋ณต์Šต

  • ๊ฐ์ฒด ์ง€ํ–ฅ ์–ธ์–ด๋Š” ๋ฉค๋ฒ„ ๋ณ€์ˆ˜๋กœ ํด๋ž˜์Šค๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋‹ค.
  • JS์—์„œ๋Š” ํด๋ž˜์Šค ๋‚ด ์ƒ์„ฑ์ž๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ ์ค‘ ํ•œ๋ฒˆ๋งŒ ํ˜ธ์ถœํ•œ๋‹ค.
  • ์ปดํŒŒ์ผ ํƒ€๊ฒŸ์ด ES5์ธ ๊ฒฝ์šฐ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํด๋ž˜์Šค๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ๋ณ€ํ™˜ํ•จ.
    ES6์ด์ƒ์ด๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํด๋ž˜์Šค๋กœ ์ปดํŒŒ์ผ๋จ.
  • ์ƒ์„ฑ์ž ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ readonly, public, protected, private ํ‚ค์›Œ๋“œ๋กœ ์ •์˜ํ•˜๋ฉด ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐ ํŒŒ๋ผ๋ฏธํ„ฐ์— ๋Œ€ํ•œ ํด๋ž˜์Šค ํ”„๋กœํผํ‹ฐ๋ฅผ ๋งŒ๋“ฌ.

๐ŸŒ 3.1.1 ํด๋ž˜์Šค ์ƒ์†

keyword : extends

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋„ ๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ ๊ธฐ๋Šฅ์„ ์ƒ์†์„ ๋ฐ›์Šต๋‹ˆ๋‹ค.

๊ธฐ์กด ํด๋ž˜์Šค๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ƒˆ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

class Person {
    firstName = '';
    lastName = '';
    age =0;
}

class Employee extends Person {
    department = '';
}

const empl = new Employee();
// empl.age;

empl. ํ›„ ctrl+Enterํ•˜๋ฉด ์ž๋™์™„์„ฑ ๋ชฉ๋ก์— Person์˜ ์š”์†Œ๋“ค์ด ์žˆ๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

Personํด๋ž˜์Šค๋Š” ๋ถ€๋ชจ์ด๊ณ , Employee๋Š” Person์„ ์ƒ์†๋ฐ›์€ ์ž์‹ํด๋ž˜์Šค๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

ํด๋ž˜์Šค๋Š” ํ”„๋กœํผํ‹ฐ ์™ธ์—๋„ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

๋ฉ”์„œ๋“œ๋กœ ํด๋ž˜์Šค ๋‚ด๋ถ€์— ์„ ์–ธ๋œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. (private๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด ์„œ๋ธŒํด๋ž˜์Šค์— ์ƒ์†๋จ.)

class Person {
    firstName = '';
    lastName = '';
    age =0;
    
    sayHello(): string {
        return `My name is ${this.firstName} ${this.lastName}`;
    }
}

class Employee extends Person {
    department = '';
}

const empl = new Employee();
// empl.sayHello

empl.์—์„œ ์ž๋™์™„์„ฑํ•˜๋ฉด sayHello๊ฐ€ ๋œฌ๋‹ค.

๐ŸŒ 3.1.2 public, private, protected ์ ‘๊ทผ ์ œ์–ด์ž

์ ‘๊ทผ์ œ์–ด์ž๋กœ ํด๋ž˜์Šค ๋ฉค๋ฒ„ ์ ‘๊ทผ ๊ถŒํ•œ์„ ์ œ์–ดํ•ฉ๋‹ˆ๋‹ค.

  • public : ํด๋ž˜์Šค ๋ฉค๋ฒ„๋Š” ๋ชจ๋“  ๋‚ด๋ถ€ ๋ฐ ์™ธ๋ถ€ ํด๋ž˜์Šค ์ ‘๊ทผ๊ฐ€๋Šฅ.
  • protected : ๋™์ผ ํŒจํ‚ค์ง€์— ์†ํ•˜๋Š” ํด๋ž˜์Šค์™€ ์„œ๋ธŒ ํด๋ž˜์Šค ๊ด€๊ณ„์ผ ๊ฒฝ์šฐ๋งŒ ์ ‘๊ทผ๊ฐ€๋Šฅ
  • private : ํด๋ž˜์Šค ๋‚ด์—์„œ๋งŒ ์ ‘๊ทผ๊ฐ€๋Šฅ.
class Person {
    public firstName = '';
    public lastName = '';
    private age =0;
    
    protected sayHello(): string {
        return `My name is ${this.firstName} ${this.lastName}`;
    }
}

class Employee extends Person {
    department = '';
    
    reviewPerformance(): void {
        this.sayHello();
        this.increasePay(5);
    }
    
    increasePay(percent: number): void{
 //       this.
    }
}

const empl = new Employee();
empl.sayHello(); // ์˜ค๋ฅ˜ ๋ฐœ์ƒ

this.์—์„œ ์ž๋™์™„์„ฑ ์‹œ private์ธ age๋Š” ๋ณด์ด์ง€ ์•Š๋Š”๊ฒŒ ๋ณด์ธ๋‹ค.

sayHello๋Š” protected๋กœ ์„ ์–ธ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ํด๋ž˜์Šค ์ธ์Šคํ„ด์Šค์—์„œ๋Š” ์ ‘๊ทผ์ด ์•ˆ๋œ๋‹ค.

class Person {
    public firstName = '';
    public lastName = '';
    private age =0;
    
   constructor(firstName: string, lastName: string, age: number){
       this.firstName = firstName;
       this.lastName = lastName;
       this.age = age;
   }
}

javascript

class Person {
    constructor(public firstName: string,
                public lastName: string,
                private age: number){ }
}

const pers = new Person('John', 'Smith', 29)
console.log(`${pers.firstName} ${pers.lastName} ${pers.age}`)

js์—์„œ age์—์„œ ๋นจ๊ฐ„ ์ค„์ด ํ‘œ์‹œ๋œ๋‹ค. => private์ด๊ธฐ ๋•Œ๋ฌธ.

โ— ์‹ค์ œ๋กœ ๊ฐœ๋ฐœ ์‹œ noEmitOnError์˜ต์…˜์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“  ์˜ค๋ฅ˜๊ฐ€ ์—†์œผ๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋„๋ก ์„ค์ •ํ•œ๋‹ค.

๐ŸŒ 3.1.3 ๊ณ ์ • ๋ณ€์ˆ˜์™€ ์‹ฑ๊ธ€ํ†ค

ES6๋ถ€ํ„ฐ ํด๋ž˜์Šค์˜ ๊ฐ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ผ๋ถ€ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ณต์œ ํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ ์ •์  ํ”„๋กœํผํ‹ฐ๋กœ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” static ํ‚ค์›Œ๋“œ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

static๊ณผ private์ƒ์„ฑ์ž๋กœ ์‹ฑ๊ธ€ํ†ค ๋””์ž์ธ ํŒจํ„ด์„ ๊ตฌํ˜„ํ•ด๋ณด์ž.

class Gangsta {
    static totalBullets = 100;
    shoot(){
        Gangsta.totalBullets--;
        console.log(`Bullets left : ${Gangsta.totalBullets}`);
    }
}

const g1 = new Gangsta();
g1.shoot(); // 99

const g2 = new Gangsta();
g2.shoot(); // 98

๋‘ ์ธ์Šคํ„ด์Šค๋Š” ๋™์ผํ•œ ๋ณ€์ˆ˜ totalBullets๋ฅผ ๊ณต์œ ํ•˜๋ฏ€๋กœ 99 -> 98 ๋กœ ๋ณ€ํ–ˆ๋‹ค.

shoot()์˜ this.totalBullets๋Š” ์ธ์Šคํ„ด์Šค ๋ณ€์ˆ˜๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. staticํด๋ž˜์Šค ๋ฉค๋ฒ„ ์•ž์— ํ•ด๋‹น ํด๋ž˜์Šค ์ด๋ฆ„์„ ๋ถ™์ด๋ฉด ์ ‘๊ทผ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

โ— static์ธ ํด๋ž˜์Šค ๋ฉค๋ฒ„๋Š” ์„œ๋ธŒํด๋ž˜์Šค์— ๊ณต์œ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
SuperGangstaํด๋ž˜์Šค๊ฐ€ Gangsta์˜ ์„œ๋ธŒํด๋ž˜์Šค๋ผ๋ฉด totalBullets ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ณต์‚ฌํ•ด ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.
์ฐธ๊ณ  : goo.gl/3BSnjZ

ํ•œ ๊ณณ์—์„œ๋งŒ ์•ฑ ์ „์ฒด ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉฐ, ์™ธ๋ถ€์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์ž.
์ „์ฒด ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ ๊ณณ์—์„œ ๊ด€๋ฆฌํ•˜๋Š” ์šฐ๋„ˆ์น™์„ ๋‹จ์ผ ๋ฐ์ดํ„ฐ ์†Œ์Šค ๋˜๋Š” ๋‹จ์ผ ์ง„์‹ค ๊ณต๊ธ‰์›์ด๋ผ๊ณ ํ•จ.

๊ฐ์ฒด ์ง€ํ–ฅ ์–ธ์–ด์—์„œ ๋‹จ ํ•˜๋‚˜์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋””์ž์ธ ํŒจํ„ด์„ ์‹ฑ๊ธ€ํ†ค ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

new ํ‚ค์›Œ๋“œ๋กœ ์›ํ•˜๋Š” ๋งŒํผ ์—ฌ๋Ÿฌ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— new ํ‚ค์›Œ๋“œ์‚ฌ์šฉ์„ ๋ง‰์•„์•ผํ•ฉ๋‹ˆ๋‹ค.

๋‹จ์ผ ์ธ์Šคํ„ด์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•?

ํด๋ž˜์Šค ์ƒ์„ฑ์ž๊ฐ€ private์ธ ๊ฒฝ์šฐ ํด๋ž˜์Šค ๋‚ด์—์„œ๋งŒ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
staticํ‚ค์›Œ๋“œ๋กœ ํด๋ž˜์Šค ๋ฉ”์„œ๋“œ๋ฅผ ์ •์  ๋ฉ”์„œ๋“œ๋กœ ๋งŒ๋“ค๋ฉด ํŠน์ • ์ธ์Šคํ„ด์Šค๊ฐ€ ์•„๋‹Œ ํด๋ž˜์Šค์—๋งŒ ์†ํ•˜๋„๋ก ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ

๐Ÿ‘‰ ์˜ˆ์ œ

  • AppState ์‹ฑ๊ธ€ํ†ค ๋””์ž์ธ ํŒจํ„ด์œผ๋กœ counter๋ฅผ ๊ฐ€์ง.
  • counter๋Š” ์™ธ๋ถ€์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋ฉฐ ๋‹จ์ผ ์ธ์Šคํ„ด์Šค์—์„œ๋งŒ ๊ทธ ๊ฐ’์„ ์ €์žฅํ•จ.
  • counter์˜ ๊ฐ’์„ ์ฝ๋Š” ๋ฉ”์„œ๋“œ ์—ญ์‹œ AppState ์ธ์Šคํ„ด์Šค์—์„œ ๊ฐ€์ ธ์˜ด.
class AppState{
    counter = 0; // ์•ฑ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋ƒ„.
    private static instanceRef: AppState;
    private constructor() {}
	static getInstance(): AppState{
        if(AppState.instanceRef === undefined){
            AppState.instanceRef = new AppState();
        }
        return AppState.instanceRef;
    }
}

// const appState = new AppState(); // private ์ƒ์„ฑ์ž ๋•Œ๋ฌธ์— ์˜ค๋ฅ˜ ๋ฐœ์ƒ

// AppState ์ธ์Šคํ„ด์Šค์— ๋Œ€ํ•œ ์ฐธ์กฐ๋ฅผ ๊ฐ€์ ธ์˜ด.
const appState1 = AppState.getInstance();
const appState2 = AppState.getInstance();

appState1.counter++;
appState1.counter++;
appState2.counter++;
appState2.counter++;

console.log(appState1.counter)
console.log(appState2.counter)

AppStateํด๋ž˜์Šค๋Š” private ์ƒ์„ฑ์ž๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ new ํ‚ค์›Œ๋“œ๋กœ ์ƒ์„ฑ์ด ๋ถˆ๊ฐ€.

getInstance() ๋ฉ”์†Œ๋“œ๋กœ ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœ ๊ฐ€๋Šฅ.
์ •์  ๋ฉ”์†Œ๋“œ๋กœ ํฌ๋ž ์Šค ์ธ์Šคํ„ด์Šค๊ฐ€ ์—†์„ ๋•Œ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค.

๐ŸŒ 3.1.4 super() ๋ฉ”์„œ๋“œ์™€ superํ‚ค์›Œ๋“œ

  • ์Šˆํผํด๋ž˜์Šค์™€ ์„œ๋ธŒํด๋ž˜์Šค๊ฐ€ ๊ฐ™์€์ด๋ฆ„์˜ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ ์žˆ๋‹ค๋ฉด??
  • ๋‘˜ ๋‹ค ๋ชจ๋‘ ์ƒ์„ฑ์ž๊ฐ€ ์žˆ๋‹ค๋ฉด??

=> ๋‘˜ ๋‹ค ์ƒ์„ฑ์ž๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ์„œ๋ธŒํด๋ž˜์Šค์˜ ์ƒ์„ฑ์ž๋Š” super()๋ฉ”์†Œ๋“œ๋กœ ์Šˆํผ ํด๋ž˜์Šค์˜ ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœํ•ด์•ผํ•จ.

// 3_3.ts
class Person3_3{
  constructor(public firstname: string,
    public lastName: string,
    private age: number){}  // ์Šˆํผํด๋ž˜์Šค Person์˜ ์ƒ์„ฑ์ž
}

class Employee3_3 extends Person3_3{ // ์„œ๋ธŒํด๋ž˜์Šค Employee
  constructor(firstName: string, lastName: string,
    age: number, public department: string){ // employee ์ƒ์„ฑ์ž
      super(firstName, lastName, age); // ์Šˆํผํด๋ž˜์Šค ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœํ•จ.
    }
}

const empl = new Employee3_3('Joe', 'Smith', 29, 'Accounting'); // ์„œ๋ธŒ ํด๋ž˜์Šค๋ฅผ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•จ.
console.log(empl);

// ๊ฒฐ๊ณผ
/*
  Employee3_3 {
  firstname: 'Joe',
  lastName: 'Smith',
  age: 29,
  department: 'Accounting'
}
*/

๋‘ ํด๋ž˜์Šค ๋ชจ๋‘ ์ƒ์„ฑ์ž๊ฐ€ ์žˆ์œผ๋ฉฐ, ๊ฐ ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ํ•„์ˆ˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ํ˜ธ์ถœ๋˜๋Š”์ง€ ํ™•์ธํ•ด์•ผํ•จ.

Employee์˜ ์ƒ์„ฑ์ž๋Š” new ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋งˆ๋‹ค ์ž๋™์œผ๋กœ ํ˜ธ์ถœ๋˜๋ฉฐ ์Šˆํผ ํด๋ž˜์Šค Person์˜ ์ƒ์„ฑ์ž ํ˜ธ์ถœ์„ ์ผ์ผ์ด ํ•ด์ค˜์•ผํ•จ.

department๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” Person๊ฐ์ฒด๋ฅผ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ๊ฒƒ์œผ๋กœ super()๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ด Person์— ์ „๋‹ฌํ•จ.

๋™์ผํ•œ ์ด๋ฆ„์„ ๊ฐ€์ง„ ์Šˆํผ ํด๋ž˜์Šค์˜ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœ ์‹œ this๋Œ€์‹  super์‚ฌ์šฉโ—

// 3_4.ts
class Person3_4{
  constructor(public firstName: string,
    public lastName: string,
    private age: number){}

    sellStock(symbol: string, numberOfShares: number){ // ๋ถ€๋ชจ์˜ sellStock()
      console.log(`Selling ${numberOfShares} of ${symbol}`);
    }
}

class Employee3_4 extends Person3_4{
  constructor(firstName: string, lastName: string, 
    age: number, public department: string){
    super(firstName, lastName, age); // ๋ถ€๋ชจ ์ƒ์„ฑ์ž ํ˜ธ์ถœ
  }

  sellStock(symbol: string, shares: number){ // ์ž์‹์˜ sellStock()
    super.sellStock(symbol, shares); // ๋ถ€๋ชจ์—์„œ sellStock() ํ˜ธ์ถœ
    this.reportToCompliance(symbol, shares);
  }

  private reportToCompliance(symbol: string, shares: number){ // reportToCompliance()๋Š” private ๋ฉ”์„œ๋“œ
    console.log(`${this.lastName} from ${this.department} sold ${shares} shares of ${symbol}`);
  }
}

const empl3_4 = new Employee3_4('Joe', 'Smith', 29, 'Accounting');
empl3_4.sellStock('IBM', 100); // Employee ์—์„œ sellStock ํ˜ธ์ถœ.

// ๊ฒฐ๊ณผ
/*
Selling 100 of IBM
Smith from Accounting sold 100 shares of IBM
*/

reportToCompliance()๋Š” ํด๋ž˜์Šค๋‚ด๋ถ€์—์„œ๋งŒ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.

superํ‚ค์›Œ๋“œ๋ฅผ ํ™œ์šฉํ•ด ์Šˆํผ ํด๋ž˜์Šค์—์„œ ์„ ์–ธํ•œ ๋ฉ”์„œ๋“œ์˜ ๊ธฐ๋Šฅ์„ ์žฌ์‚ฌ์šฉํ•˜์—ฌ ๋™์‹œ์— ์ƒˆ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•จ.

์ •๋ฆฌ

๋งˆ์ง€๋ง‰ ์ค„์˜ sellStock๋กœ Employee3_4์˜ sellStock์œผ๋กœ๊ฐ€๊ณ , superํ‚ค์›Œ๋“œ๋ฅผ ์ด์šฉํ•ด Person3_4์˜ sellStock์„ ์‹คํ–‰ํ•œ ํ›„ Employee3_4์•ˆ์— ์žˆ๋Š” reportToCompliance๋ฅผ ์‹คํ–‰

๐ŸŒ 3.1.5 ์ถ”์ƒ ํด๋ž˜์Šค

์ถ”์ƒ ํด๋ž˜์Šค๋Š” ๊ฐ์ฒด๋กœ ๋งŒ๋“ค ์ˆ˜ ์—†๋Š” ์ถ”์ƒ์ ์ธ ๊ฐœ๋…์œผ๋กœ ์ผ์กฐ์œผ์ด ์„ค๊ณ„๋„ ์—ญํ• .

abstract ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธํ•จ.

์ถ”์ƒ ํด๋ž˜์Šค๋กœ๋ถ€ํ„ฐ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋ฏ€๋กœ ์ธ์Šคํ„ด์Šคํ™” ํ•  ์ˆ˜ ์—†๊ณ , ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋„ abstract๋กœ ์„ ์–ธ ๊ฐ€๋Šฅ

โ“ why need?

๊ตฌ์ฒด์ ์ด์ง€ ์•Š์€ ๋ฉ”์„œ๋“œ๋ฅผ ์„œ๋ธŒ ํด๋ž˜์Šค์— ์œ„์ž„ํ•ด ํ•˜์œ„์—์„œ ๋” ์ž์„ธํžˆ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ‘‰ Example

AํšŒ์‚ฌ์—์„œ ์ง์›์€ ์ •๊ทœ์ง๊ณผ ๊ณ„์•ฝ์ง์œผ๋กœ ๊ตฌ๋ถ„๋จ.

  • constructor(name: string)
  • changeAddress(newAddress: string)
  • giveDayOff()
  • promote(percent: number)
    promote() ๋ฉ”์„œ๋“œ๋Š” ํœด์ผ์„ ํ•˜๋ฃจ ๋” ๋ถ€์—ฌํ•˜๊ณ , ์ •ํ•ด์ง„ ๋น„์œจ๋งŒํผ ๊ธ‰์—ฌ๋ฅผ ์ธ์ƒํ•ฉ๋‹ˆ๋‹ค.
  • increasePay(percent: number)
    increasePay() ๋ฉ”์„œ๋“œ๋Š” ์ผ๋ฐ˜ ์ •๊ทœ์ง ์ง์›์˜ ๊ฒฝ์šฐ ์—ฐ๊ฐ„ ๊ธ‰์—ฌ๋ฅผ, ๊ณ„์•ฝ์ง์˜ ๊ฒฝ์šฐ ์‹œ๊ฐ„๋‹น ๊ธ‰์—ฌ๋ฅผ ์ธ์ƒ

์œ„ ๋ฉ”์„œ๋“œ๋ฅผ ํฌํ•จ์‹œ์ผœ ์ง์›์„ ๊ฐ€๋ฆฌํ‚ค๋Š” ํด๋ž˜์Šค๋ฅผ ์„ค๊ณ„ํ•ฉ๋‹ˆ๋‹ค.
์ด ๋•Œ ๋‹จ ํ•˜๋‚˜์˜ console.log()๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// 3_5.ts
abstract class Person3_5{
  constructor(public name: string){};
    changeAddress(newAddress: string){
      console.log(`Changing address to ${newAddress}`);
    }

    giveDayOff(){
      console.log(`Giving a day off to ${this.name}`);
    }

    promote(percent: number){
      this.giveDayOff();
      this.increasePay(percent); // ์ถ”์ƒ๋ฉ”์„œ๋“œ ํ˜ธ์ถœ
    }
    
    abstract increasePay(percent: number): void; // ์ถ”์ƒ ๋ฉ”์„œ๋“œ๋ฅผ ์„ ์–ธ
}

giveDayOff()๋ฉ”์„œ๋“œ๋ฅผ ์™ธ๋ถ€์—์„œ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์„ ๋ง‰์œผ๋ ค๋ฉด private๋ฅผ ์„ ์–ธํ•ด์•ผํ•จ.
giveDayOff()๋ฅผ Personํด๋ž˜์Šค์™€ ์ž์‹ํด๋ž˜์Šค์—์„œ๋งŒ ํ˜ธ์ถœ์„ ํ—ˆ์šฉํ•  ๊ฒฝ์šฐ protected

์ค‘์š”ํ•œ ์ ์€ ์ถ”์ƒ ๋ฉ”์„œ๋“œ๋ฅผ "ํ˜ธ์ถœ"ํ•˜๋Š” ๋ช…๋ น๋ฌธ์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ.

์ถ”์ƒ ํด๋ž˜์Šค๋Š” ์ธ์Šคํ„ด์Šคํ™”ํ•  ์ˆ˜ ์—†์œผ๋‹ˆ ์ถ”์ƒ ๋ฉค๋ฒ„(๊ตฌํ˜„๋˜์ง€ ์•Š์€ ๋ฉ”์„œ๋“œ)๋Š” ์ ˆ๋Œ€ ํ˜ธ์ถœ ์•Š์Œ.
์ธ์Šคํ„ด์Šคํ™” ๊ฐ€๋Šฅํ•œ ์ถ”์ƒ ํด๋ž˜์Šค์˜ ์ž์‹์„ ์ƒ์„ฑํ•˜๋ ค๋ฉด ๋ถ€๋ชจ์˜ ๋ชจ๋“  ์ถ”์ƒ ๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„ํ•ด์•ผํ•จ.

// 3_6.ts
class Employee3_6 extends Person3_5{
  increasePay(percent: number){ // Employee๋ฅผ ์œ„ํ•œ increasePay()๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„ํ•จ.
    console.log(`Increasing the salary of ${this.name} by ${percent}%`);
  }
}

class Contractor3_6 extends Person3_5{
  increasePay(percent: number){ // Contracte๋ฅผ ์œ„ํ•œ increasePay() ๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„
    console.log(`Increasing the hourly rate of ${this.name} by ${percent}%`);
  }
}

class A extends class B์˜ ๊ฒฝ์šฐ A๊ฐ€ B๋ฅผ ํ™•์žฅํ•œ๋‹ค๋Š” ๋œป์œผ๋กœ A๊ฐ€ ๋” ๋งŽ์€ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์— B๊ฐ€ ๋” ์ผ๋ฐ˜์ ์ด๊ณ , A๊ฐ€ ๋” ์ƒ์„ธํ•˜๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// 3_7.ts
// ... 3_5์˜ Person๊ณผ 3_6์˜ employee, contractor ์‚ฌ์šฉ.
const workers3_7: Person3_7[] = []; // ์„œ๋ธŒ ํด๋ž˜์Šค ํƒ€์ž…์„ ๋ฐฐ์—ด๋กœ ์„ ์–ธ.

workers3_7[0] = new Employee3_7('John');
workers3_7[1] = new Contractor3_7('Mary');

workers3_7.forEach(worker => worker.promote(5)); // ๊ฐ ๊ฐ์ฒด๋งˆ๋‹ค promote() ์‹คํ–‰

// ๊ฒฐ๊ณผ
/*
Giving a day off to John
Increasing the salary of John by 5%
Giving a day off to Mary
Increasing the hourly rate of Mary by 5%
*/

๋ฐฐ์—ด workers๋Š” personํƒ€์ž…์˜ ๋ฐฐ์—ด๋กœ ์ž์‹ ๊ฐ์ฒด์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ์ €์žฅํ•จ.

โ— Person์˜ ์ž์‹์€ ์Šค์Šค๋กœ ์ƒ์„ฑ์ž๋ฅผ ์„ ์–ธํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— Employee์™€ Contrator๊ฐ€ ์ƒ์„ฑ๋  ๋•Œ ๋ถ€๋ชจ์˜ ์ƒ์„ฑ์ž๊ฐ€ ์ž๋™์œผ๋กœ ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค. ์–ด๋Š ์ž์‹๋„ ์ƒ์„ฑ์ž๋ฅผ ๊ฐ–๊ณ  ์žˆ์ง€ ์•Š๋‹ค๋ฉด super()๋กœ person์˜ ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

์ด์ฒ˜๋Ÿผ ์ƒ์†์„ ํ†ตํ•ด ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜๊ฑฐ๋‚˜ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์„ ๋‹คํ˜•์„ฑ ์ด๋ผ๊ณ  ํ•˜๋ฉฐ ๊ฐ์ฒด ์ง€ํ–ฅ ์–ธ์–ด์˜ ํŠน์ง• ์ค‘ ํ•˜๋‚˜์ž„.

โ— ์ธ์Šคํ„ด์Šคํ™” ํ•  ์ˆ˜ ์—†๋Š” ํด๋ž˜์Šค๋ฅผ ์„ ์–ธํ•ด์•ผ ํ•˜์ง€๋งŒ, ์„œ๋ธŒ ํด๋ž˜์Šค๋Š” ์ธ์Šคํ„ด์Šคํ™”๊ฐ€ ๊ฐ€๋Šฅํ•จ.
์Šˆํผ ํด๋ž˜์Šค์— protected์ƒ์„ฑ์ž๋ฅผ ์„ ์–ธํ•˜๊ณ  ์„œ๋ธŒ ํด๋ž˜์Šค ์ƒ์„ฑ์ž์—์„œ super() ๋ฉ”์„œ๋“œ๋กœ ํ˜ธ์ถœ ๊ฐ€๋Šฅ.
์ถ”์ƒ ํด๋ž˜์Šค ๊ธฐ๋Šฅ์„ ๋ชจ๋ฐฉํ•œ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.
protected์ƒ์„ฑ์ž๋ฅผ ๊ฐ€์ง„ ํด๋ž˜์Šค๋ฅผ ๊ทธ ์ž์ฒด๋กœ ์ถ”์ƒ์œผ๋กœ ์„ ์–ธํ•ด์•ผ ์ถ”์ƒ ๋ฉ”์„œ๋“œ๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐ŸŒ 3.1.6 ๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋กœ๋”ฉ

๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋Š” ๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋กœ๋”ฉ์„ ์ง€์›ํ•จ.
ํŒŒ๋ผ๋ฏธํ„ฐ์˜ ์œ ํ˜•๊ณผ ๊ฐœ์ˆ˜๋Š” ๋‹ค๋ฅด์ง€๋งŒ ์ด๋ฆ„์ด ๊ฐ™์€ ๋ฉ”์„œ๋“œ๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ ๊ฐ€์งˆ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ.

ํƒ€์ž… ์–ธ์–ด์—์„œ ํƒ€์ž…์ด ์—†๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ฐ€์ง„ ํด๋ž˜์Šค ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ํŒŒ๋ผ๋ฏธํ„ฐ ํƒ€์ž…๊ณผ ๋ฐ˜ํ™˜๊ฐ’์„ ๋ช…์‹œํ•˜์—ฌ ๋ฉ”์„œ๋“œ๋ฅผ ๋งŒ๋“ค์–ด์•ผํ•จ.

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ํ•จ์ˆ˜ ๋‚ด ํŒŒ๋ผ๋ฏธํ„ฐ ๊ฐœ์ˆ˜๋ฅผ ์ฒ˜์Œ๋ณด๋‹ค ๋” ๋งŽ์ด ํ˜น์€ ๋” ์ ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฌผ๋ก  ๋ฉ”์„œ๋“œ๋‚ด์—์„œ ์ „๋‹ฌ๋œ ๊ฐ์ฒด๊ฐ€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๋ฉด ๋Ÿฐํƒ€์ž„ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// 3_8.ts
class ProductService3_8{
  getProducts(){ // getProducts ๋ฉ”์„œ๋“œ๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ์—†์Œ
    console.log(`Getting all products`);
  } 

  getProducts(id: number){ // ์˜ค๋ฅ˜๋ฐœ์ƒ -> getProducts()๋ฉ”์„œ๋“œ๋Š” 1๊ฐœ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ฐ€์ง.
    console.log(`Getting the product info for ${id}`);
  }
}

const prodService = new ProductService3_8();
prodService.getProducts(123);
prodService.getProducts();

์ค‘๋ณต ํ•จ์ˆ˜ ๊ตฌํ˜„์˜ค๋ฅ˜๋ฅผ ์ผ์œผํ‚ด.
์˜ค๋ฅ˜๊ฐ€ ์žˆ๋Š” TS์ง€๋งŒ, JS์—์„œ๋Š” ์œ ํšจํ•จ.

class ProductService3_9{
    // ํ—ˆ์šฉ๊ฐ€๋Šฅํ•œ ๋ฉ”์„œ๋“œ๋“ค์„ ์„ ์–ธ
    getProducts();
    getProducts(id: number);

    // ๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„
    getProducts(id?: number){ // ์˜ค๋ฅ˜๋ฐœ์ƒ -> getProducts()๋ฉ”์„œ๋“œ๋Š” 1๊ฐœ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ฐ€์ง.
      typeof id === 'number' ? console.log(`Getting the product info for ${id}`) : console.log(`Getting all Products`)
    }
  }
  
  const prodService = new ProductService3_9();
  prodService.getProducts(123);
  prodService.getProducts();

getProducts(id?: number)

?๋Š” ํ•ด๋‹น ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์„ ํƒ ์‚ฌํ•ญ์œผ๋กœ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
์ƒ๋žต์‹œ Overload signature is not compatible with function implementation์ด๋ผ๋Š” ์˜ค๋ฅ˜ ๋ฐœ์ƒ.

! ์œ„์ชฝ์— ๋จผ์ € ์„ ์–ธํ•œ ํ—ˆ์šฉ ๊ฐ€๋Šฅํ•œ ๋ฉ”์„œ๋“œ๋“ค์„ ์ƒ๋žตํ•ด๋„ ํ”„๋กœ๊ทธ๋žจ ๋™์ž‘์€ ๋ณ€ํ•˜์ง€ ์•Š์Œ.
IDE๋‚ด getProducts()ํ•จ์ˆ˜์˜ ์ž๋™ ์™„์„ฑ ๊ธฐ๋Šฅ์„ ๋„์™€์ฃผ๋Š” ์—ญํ• ์„ ํ•จ.
์ƒ์„ฑ๋œ JSํŒŒ์ผ์„ ๋ด๋„ getProducts(id)๋งŒ ๋‚จ์•„์žˆ์Œ

๋ฉ”์„œ๋“œ ์‹œ๊ทธ๋‹ˆ์ณ๋ฅผ ์˜ค๋ฒ„๋กœ๋“œํ•ด ๋‹ค๋ฅธ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์„ ๋ฟ ์•„๋‹ˆ๋ผ ๋‹ค๋ฅธ ํƒ€์ž… ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ์Œ.

๋‹ค์Œ ์ฝ”๋“œ๋Š” 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ํ˜ธ์ถœ ๊ฐ€๋Šฅ.

  • product์˜ description์„ ์ „๋‹ฌํ•˜๊ณ  Productํƒ€์ž…์ธ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜.
  • product์˜ id๋ฅผ ์ „๋‹ฌํ•˜๊ณ  Product ํƒ€์ž…์ธ ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜
// 3_10.ts
interface Product3_10{
  id: number;
  description: string;
}

class ProductService3_10{
  getProducts(description: string): Product3_10[]; // ์ฒซ๋ฒˆ์งธ
  getProducts(id:number): Product3_10; // ๋‘๋ฒˆ์งธ
  getProducts(product: number | string): Product3_10[] | Product3_10{ // ๋ฉ”์„œ๋“œ๊ตฌํ˜„
    if(typeof product === 'number'){ // id๋กœ ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋˜์—ˆ๋Š”์ง€ ํ™•์ธ
      console.log(`Getting the product info for id ${product}`);
      return {id: product, description: 'great product'};
    }else if(typeof product ==='string'){ // description์œผ๋กœ ํ˜ธ์ถœ๋˜์—ˆ๋Š”์ง€ ํ™•์ธ
      console.log(`Getting product with description ${product}`);
      return [{id: 123, description: 'blue jeans'}, {id: 789, description: 'blue jeans'}];
    } else{
      return {
        id: -1,
        description: 'Error: getProducts() accept only number or string as args'
      }
    }
  }
}

const prodService3_10 = new ProductService3_10();

console.log(prodService3_10.getProducts(123));

console.log(prodService3_10.getProducts('blue jeans'));

๋ฐ˜ํ™˜๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋ฉด, ๊ฐ์ฒด์™€ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜๋œ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ‘‰ ์˜ค๋ฒ„๋กœ๋”ฉ ์ƒ์„ฑ์ž

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํด๋ž˜์Šค๋Š” constructor ํ‚ค์›Œ๋“œ๋กœ ์ƒ์„ฑ์ž๋ฅผ ๋งŒ๋“ ๋‹ค.

// 3_11.ts
class Product3_11{
  id: number;
  description: string;
  constructor(); // ์ƒ์„ฑ์ž ์„ ์–ธ ๋‚ด ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ์—†์Œ. (์ƒ์„ฑ์ž ์„ ์–ธ)
  constructor(id: number); // ์ƒ์„ฑ์ž ์„ ์–ธ ๋‚ด ํ•œ๊ฐœ์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ์žˆ์Œ. (์ƒ์„ฑ์ž ์„ ์–ธ)
  constructor(id: number, description: string); // 2๊ฐœ์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ์žˆ์Œ. (์ƒ์„ฑ์ž ์„ ์–ธ)
  constructor(id?: number, description?: string){
    // ์ด๊ณณ์— ์ƒ์„ฑ์ž๋ฅผ ๊ตฌํ˜„
    // ๋ชจ๋“  ๊ฐ€๋Šฅํ•œ ํŒŒ๋ฆฌ๋ฏธํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ์ƒ์„ฑ์ž๋ฅผ ๊ตฌํ˜„ (์ƒ์„ฑ์ž ์„ ์–ธ)
  }
}

ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ์—†๋Š” ์ƒ์„ฑ์ž๋„ ํ—ˆ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์„ฑ์ž ๊ตฌํ˜„์—์„œ ๋ชจ๋“  ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์„ ํƒœ๊ฐ›ใ„น ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์—ˆ์Œ.

๊ฐ์ฒด ์†์„ฑ ์ดˆ๊ธฐํ™”๋ฅผ ์œ„ํ•ด ์˜ค๋ฒ„๋กœ๋”ฉ ์ƒ์„ฑ์ž๊ฐ€ ์œ ์ผํ•œ ์ •๋‹ต์€ ์•„๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ์ƒ์„ฑ์ž์— ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋“  ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š ใ„ด์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋‹ค.

์ธํ„ฐํŽ˜์ด์Šค๋Š” ์„ ํƒ์  ํ”„๋กœํผํ‹ฐ๋ฅผ, ํฌ๋ž ์Šค๋Š” ์„ ํƒ์  ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ทจํ•˜๋Š” ๋‹จ์ผ ์ƒ์„ฑ์ž๋ฅผ ๊ฐ€์ง.

// 3_12.ts
interface ProductProperties3_12{ // ProductProperties๋Š” ๋‘ ๊ฐœ์˜ ์„ ํƒ์  ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ฐ€์ง
  id?: number,
  description?: string;
}

class Product3_12{
  id: number;
  description: string;
  constructor(properties?: ProductProperties3_12){
    // ํด๋ž˜์Šค ์ƒ์„ฑ์ž๋Š” ProductProperties ํƒ€์ž…์ธ ์„ ํƒ์  ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ฐ€์ง.
    // ์ด๊ณณ์— ์ƒ์„ฑ์ž๋ฅผ ๊ตฌํ˜„
  }
}

์ •๋ฆฌ

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ ์˜ค๋ฒ„๋กœ๋”ฉ ๋ฉ”์„œ๋“œ๋‚˜ ์ƒ์„ฑ์ž๋ฅผ ์‚ฌ์šฉํ•  ๋–„ ์ฃผ์˜๊ฐ€ ํ•„์š”ํ•จ.

์˜ค๋ฒ„๋กœ๋”ฉ์„ ์‚ฌ์šฉํ•˜๋ฉด ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๋กœ์ง์„ ์ฝ๊ณ  ํŒ๋‹จํ•˜๊ธฐ ํž˜๋“ค์–ด ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ค๋ฒ„๋กœ๋”ฉ ์‚ฌ์šฉ์„ ์ ˆ์ œํ•˜๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ .

profile
๊นƒํ—ˆ๋ธŒ : github.com/JuneHyung

0๊ฐœ์˜ ๋Œ“๊ธ€