[TypeScript] 타입스크립트의 클래스

🥕 자바스크립트의 클래스

---

... 들어가기 전에

먼저 자바스크립트의 클래스를 알아보기 위해 js 파일을 하나 만들어준다.

js파일을 만들면 tsconfig.json 파일에 오류메세지가 뜬다.

이는 컴파일러가 타입스크립트 파일이 아닌 자바스크립트 파일가 생성되었음을 인지해 오류를 알려주는 것이다.

이를 해결하기 위해 '자바스크립트도 허용해라' 라는 의미로 "allowJs"옵션을 허용해준다.

    "compilerOptions": {
    	...
      "allowJs": true,
    },

 

 

 

---

클래스

동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법

let studentA = {
   name: '기지',
   grade: 'A+',
   age: 27,
   study(){
    console.log('열심히 함'); 
   } ,
   introduce(){
    console.log('안녕하세요');
   },
};

let studentB = {
    name: '죠니',
    grade: 'B-',
    age: 27,
    study(){
     console.log('열심히 함'); 
    } ,
    introduce(){
     console.log('안녕하세요');
    },
 };

 

위 두 객체는 동일한 형식을 가지고 있다. 이렇게 동일한 형식의 객체를 수없이 많이 만들어야하는 경우 중복되는 코드가 발생하게 된다.

이러한 경우 자바스크립트의 클래스 문법을 사용한다.

 

 

🥕 클래스 선언하기

클래스는 객체를 생성하는 툴로 붕어빵을 찍어내는 붕어빵 기계와 비슷하다.

 class Student { // 클래스의 이름은 보통 파스칼케이스를 사용
    // 필드 설정 필드-> 클래스가 만들어낼 객체의 프로퍼티
    name;
    grade;
    age;

    // 생성자 -> 클래스를 호출하면 실제로 객체를 생성하는 역할
    constructor(name, grade, age){ // 필드에 설정한 프로퍼티를 매개변수로 받음
        // this -> 이 클래스가 만들어내는 객체
        this.name = name;
        this.grade = grade;
        this.age = age;
    }
    
    // 메소드
    study(){
        console.log('열심히 함');
    }
    introduce(){
        console.log('안녕하세요');
    }
 };


 // 클래스를 호출해 객체 만들기
let studentC = new Student('김기지', 'A-', 27);

 

1. class 키워드로 클래스를 선언
   • 클래스명은 보통 파스칼케이스를 사용한다.
2. 필드를 선언
   • 클래스가 만들어낼 객체의 프로퍼티를 작성한다.
3. 생성자를 선언
   • 클래스가 호출되면 실제로 객체를 생성하는 역할을 한다.
   • 생성자메소드 constructor()을 이용해 선언한다.
   • 필드에 설정한 프로퍼티를 매개변수로 받아온다.
   • this.프로퍼티의 값으로 할당한다.
4. 메소드를 선언
   • 메소드를 포함하는 경우 메소드를 설정한다.

 

Student 클래스를 호출해 콘솔창에 찍어보자.

클래스를 이용해서 만든 객체를 인스턴스라 하며 아래 Student 클래스로 만든 객체를 Student 인스턴스라 한다.

// 클래스를 호출해 객체 만들기
// 클래스를 이용해서 만든 객체 -> 인스턴스
// Student 인스턴스 
let studentC = new Student('김기지', 'A-', 27);
console.log(studentC);
studentC.study();
studentC.introduce();

여기서 this를 활용해 넘겨주는 인자를 넣어 출력이 가능하다.

 

    // this 활용하기
    introduce(){
        console.log(`안녕하세요 ${this.name} 입니다`);
    }

 

 

🥕 클래스 상속

이미 만든 클래스를 기반으로 추가적인 필드와 메소드를 갖는 클래스를 선언하는 경우 상속을 이용하면 중복되는 불필요한 코드를 제거할 수 있다.

class StudentDeveloper extends Student{
    // 필드 -> 중복되는 프로퍼티는 super함수로 불러오기
    // name;
    // grade;
    // age;
    favoriteSkill;
    // 생성자
    constructor(name, grade, age, favoriteSkill){
        // super 함수로 호출
        super(name, grade, age)
        this.name = name;
        this.grade = grade;
        this.age = age;
        this.favoriteSkill = favoriteSkill;
    }

    // 메소드
    // study(){
    //     console.log('열심히 함');
    // }

    // introduce(){
    //     console.log(`안녕하세요 ${this.name} 입니다`);
    // } 

    programming(){
       console.log(`${this.favoriteSkill}로 프로그래밍 함`) 
    }
}

인터페이스의 확장과 비슷하게 extends 뒤에 상속 받을 클래스명을 가져온다.  StudentDeveloper 클래스는 Student 클래스를 상속하여 Student 클래스에 정의된 모든 필드와 메소드를 자동으로 갖게 된다.

 

필드에서 정의된 프로퍼티 중 상속하는 프로퍼티는 지워준 후 생성자 부분에서 super 메소드로 해당 프로퍼티를 Student 클래스에서 받아온다. super를 호출하고 인수로 name, grade, age를 전달하면 슈퍼 클래스(확장 대상 클래스)의 생성자를 호출한다.

따라서 this.name, this.grade, this.age의 값을 설정하게 된다.

 

StudentDeveloper 클래스로 인스턴스를 생성해 실행해보자.

const studentDeveloper = new StudentDeveloper('김기지', 'B-', 27, 'TypeScript');
console.log(studentDeveloper);
studentDeveloper.programming();
studentDeveloper.introduce();

 

 

 

 

---

 

🥕 타입스크립트의 클래스

 

타입스크립트에서는 클래스의 필드를 선언할 때 타입 주석으로 타입을 함께 정의해야한다.

필드의 타입을 정해주지 않으면 암시적 any 타입으로 추론되어 엄격한 타입 검사 모드일 때 오류가 발생한다.

만약, any 타입으로 추론되길 원하는 경우에는 tsconfig.json에서  noImplicitAny  옵션을 false로 설정하면 오류가 발생하지 않는다.

{
    "compilerOptions": {
    	...
      "noImplicitAny": false
    },
    ...
  }

하지만, 이 방법은 안전한 방법이 아니므로 건들이지 않는 것이 좋다!

 

 

 

필드의 타입을 정해줄 때 초기값도 함께 명시한다.

필드에 타입만 정해줄 경우, 아래와 같은 에러 메세지가 뜬다.

초기값이 없고 생성자에 할당도 되어있지 않은 상태에서는 필드에 undefined가 들어가게 되어 필요가 없어진다.

이를 해결하는 방법으로는

1. 선택적 필드로 만들기

?를 붙여 선택적 필드로 만들어 준다.

class Employee {
    // 필드
    name?: string;
    age?: number;
    position?: string;
}

하지만 이 방법은 좋은 방법이 아니다.

 

2. 기본값 넣기

class Employee {
    // 필드
    name: string = "";
    age: number = 0;
    position: string = "";
}

 

3. 생성자 함수에서 초기화하기

만약, 초기값으로 넣을 마땅한 값이 없는 경우에는 생성자 함수에서 필드의 값들을 초기화 한다.

class Employee {
    // 필드
    name: string;
    age: number;
    position: string;

    // 생성자
    constructor(name: string, age: number, position: string){
        this.name = name;
        this.age = age;
        this.position = position;
    }
    
    // 메소드
    work(){
        console.log('일함')
    }
}

 

 

 

 

 

 

타입스크립트의 클래스는 타입으로도 사용할 수 있다.

const employeeB = new Employee('김기지', 27, '개발자');

Employee 클래스로 만든 employee 인스턴스에 커서를 대면 타입이 Employee로 정의되어 있다.

 

클래스를 타입으로 사용하면 해당 클래스가 생성하는 객체의 타입과 동일한 타입이 된다.

// 클래스는 타입으로도 사용
const employeeC: Employee = {
    name: "",
    age: 0,
    position: "",
    work(){}
}

이는 타입스크립트는 구조적 타입 시스템을 따르기 때문에 클래스의 구조를 보고 동일한 필드와 메소드를 가지는 변수는 해당 클래스의 타입이라고 결정하기 때문이다.

 

 

 

🥕 클래스 상속

타입스크립트에서 클래스의 상속을 이용할 때 super 메소드를 호출해 슈퍼 클래스의 생성자를 호출해야 하며 호출 위치는 생성자의 최상단 이어야 한다.

// 상속
class ExecutiveOfficer extends Employee {
    // 필드
    officeNumber: number;

    // 생성자
    constructor(name: string, age: number, position: string, officeNumber: number){
       super(name, age, position);
       this.officeNumber = officeNumber; 
    }
}

 

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의