[TypeScript] class type

🐣 들어가기 전에!

---

이번 시간에는 class 타입에 대해 다뤄보도록 하겠당!_! 당연한 말이지만 class도 타입이 존재한다. 혹여 class에 대해서 개념히 잘 생각 안난다면 object 객체를 복제하는 어떠한 것이라고 생각하면 된다. 그럼 class type도 꼬우꼬우!

 

손흥민 아버지 손웅정 씨('MBC스포츠탐험대' 유튜브 화면 캡쳐)

 

🐣 class type

---

1. class field 클래스 필드값 

class에 object들이 사용할 수 있는 것들을 만들 수 있는데, 아래처럼 타입을 지정할 수 있음.

class의 필드 타입을 지정할 수도 있고, 지정하지 않아도 자동으로 타입이 지정됨.

일반 변수처럼 타입 지정해주면 됨

class Person2{
    data = 0; // class 필드값(constructor와 똑같은 역할) / 자식들한테서 출력가능 (사람1.data 출력 가능)
    data1: number = 0; // class 필드 타입지정 가능(위에처럼 안해도 number로 자동 타입지정되기도 함)
}

let 사람1 = new Person2();
console.log(사람1.data)

 

2. class constructor type

class는 object를 복제하는 어떠한 것이라고 했는데, ES6부터는 constructor 함수를 사용하면 됨. 

다음 코드에서 type error가 발생하는데, 이는 this를 사용하기 이전에 field 값을 미리 설정해야하기 때문.

class Person3{
    constructor() {
        // this.name = "ham"; //그냥 this.name하면 name의 property값 없다고 나옴
    }
}

 

field 값 지정은 다음과 같이 1번에서 했던 것처럼 변수 설정하듯 미리 설정해두면 됨.

이렇게 constructor 안에서 사용하는 this 값을 사용하려면 field 값에 미리 지정을 해놔야 함!_! 

class Person4{
    name: string; //필드값에 미리 지정해놔야 밑에서 this.name 사용가능
    constructor() {
        this.name = "ham" // constructor 위에서 미리 name 필드값 정했기에, this.name 사용 가능
    }
}

이제 this.name 사용 가넝!!!

 

 

파라미터는?

참고로 이제 constructor 파라미터도 타입 지정이 가능한데, 아래 코드를 살펴보면 파라미터를 지정할 때 원래처럼 하면 됨. return 타입을 지정할 필요는 없음. 아니 안됨. 왜냐하면 constructor에 복제되는 것이 항상 object 이기 때문.

// constructor 파라미터 타입지정 가능
class Person5{
    name: string;
    constructor(a : string) { //파라미터 타입지정 / return 타입도 지정? => 복제되는게 항상 object이기에 return 타입 지정할 이유는 없음
        this.name = a;
    }
}

let 사람2 = new Person5("ham");
let 사람3 = new Person5("hailey");
console.log(사람2.name);
console.log(사람3.name);

// 당연히 함수 관련 파라미터 모두 가능
// rest parameter, default parameter 등 가능

 

3.  prototype 함수 어디에? methods type

class에는 prototype을 추가할 수 있음. prototype은 class 내부에 함수를 입력할 수 있는건데, 함수명 () {} 이렇게 사용할 수 있음.

아래 코드로 살펴보면, person6라는 class에 함수(){}라는 prototype을 추가했음. 사람4라는 변수가 person6 class를 만들고, 그 사람4(person6의 자식 개념)은 함수를 호출 가능함(메소드를 상속받을 수 있기 때문에 person6의 프로토타입에 정의된 함수를 호출 가능한 것)

참고로 프로토 타입의 함수는 함수의 타입 지정과 같이 파라미터와 return 타입 지정이 가능함.

class Person6{
    name: string;
    constructor(a:string) {
        this.name = a;
    }

    함수(a: string) { // 프로토타입 함수 추가 이곳에 / 프로토타입 파라미터 타입 지정 가능 / 모든 자식들은 사용 가능
        // 함수랑 똑같이 파라미터 & retrun 타입 지정 가능
        console.log("안녕~! " + a);
        return "a"
    }
}

// Person6.prototype.함수다 = function(){} //여기에 하는 것이 아니라 위에 constructor 밑에다가 추가하면 됨

let 사람4 = new Person6("toto");
사람4.함수("반가워 토토"); // 사람4에서 Person6의 프로토타입 출력 가능

 

 

4. Quiz 1

[Car 클래스를 만들기]
1. { model : '소나타', price : 3000 } 이렇게 생긴 object를 복사해주는 class를 만들어보십시오.
2. 그리고 복사된 object 자료들은 .tax() 라는 함수를 사용가능한데 현재 object에 저장된 price의 10분의1을 출력. 
3. model과 price 속성의 타입지정. tax() 함수의 return 타입. 

(동작 예시)
```
let car1 = new Car('소나타', 3000)
console.log(car1) //콘솔창 출력결과는 { model : '소나타', price : 3000 }
console.log(car1.tax()) //콘솔창 출력결과는 300
```

 

아래는 풀이

class Car{
    model: string;
    price: number;
    constructor(model:string, price:number) {
        this.model = model;
        this.price = price;
    }

    tax1():number {
        return this.price * 0.1
    }

    tax2(price: number):number {
        const tax = price * 0.1 
        return tax;
    }
}

let car1 = new Car('소나타', 3000) // car1은 Car 클래스의 인스턴스
console.log(car1); // Car {model: '소나타', price: 3000}
console.log(car1.tax1()); //tax 자동
console.log(car1.tax2(3000)); //tax를 직접 숫자입력해서 할 때

 

 

5. Quiz 2

[class인데 파라미터가 들어가는 class Word를 만들기]
1. object 만들 때 new Word() 소괄호 안에 숫자 혹은 문자를 입력하면 
2. 숫자는 전부 object 안의  num 속성 안에 array 형태로 저장되고 
3. 문자는 전부 object 안의 str 속성 안에 array 형태로 저장되는 class를 만들기
4. class 만들 때 넣을 수 있는 숫자와 문자 갯수는 일단 제한은 없고, 타입 지정


(동작 예시)
```
let obj = new Word('kim', 3, 5, 'park');
console.log(obj.num) //[3,5]
console.log(obj.str) //['kim', 'park']
```

 

아래는 풀이

class Word{
    num: number[];
    str: string[];
    constructor(...a: (number | string)[]) {
        this.str = [];
        this.num = [];

        a.forEach((i) => {
            if (typeof i === 'string') {
                this.str.push(i);
            } else if (typeof i === 'number') {
                this.num.push(i);
            }
        })
    }
}

let obj = new Word('ham', 3, 5, 'hailey');
console.log(obj.str);
console.log(obj.num);

 

아래처럼도 가능

//이렇게도 가능
class Word{
    num: number[];
    str: string[];
    constructor(...a: (number | string)[]) {
        let 글자 : string[] = [];
        let 숫자 : number[] = [];

        a.forEach((i) => {
            if (typeof i === 'string') {
                글자.push(i)
            } else{
                숫자.push(i)
            }
        })
        this.str = 글자;
        this.num = 숫자;
    }
}

 

6. 참고 : Rest Parameter

파라미터 여러개를 받고 싶을 때, rest parameter를 사용하면 됨. 객체 값으로 들어옴.

class Word1{
    constructor(...a) { // 그냥 a로 받으면 파라미터 한개만 받음('ham')
        //Rest 파라미터(Rest Parameter, 나머지 매개변수) : 매개변수 이름 앞에 세개의 ...을 붙여서 정의한 매개변수. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달 받음
        //(4) ['ham', 3, 5, 'hailey'] 이렇게 됨
        console.log(a)
    }
}

let obj1 = new Word1('ham', 3, 5, 'hailey');

 

 

---

이렇게 보니 class type도 별 것 없다는 것을 알 수 있음.
중요한건 역시 순정...돌고 돌아 결국 JS가 중요해!