타입스크립트_클래스

🎈주제: 클래스

 

1. 클래스란?

타입스크립트에서의 클래스는 자바스크립트와 거의 동일하다.

일부 기능 중에는 타입스크립트에서만 존재하는 고유문법인 것들이 있어 "거의"라고 표현했다.

그 일부 기능들은 컴파일 후 사라진다.

 

class PersonStudent {
    // 필드
    name: string;
    age: number;
    readonly location: string = 'Korea'
}

const person1 = new PersonStudent();

 

1-1. 생성자

 

클래스가 인스턴스화가 될 때 초기화를 담당한다.

 

class PersonStudent {
    // 필드
    name: string;
    age: number;
    readonly location: string = 'Korea'

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

// 매개변수로 name: string과 age:number 가 있다.
const person1 = new PersonStudent('kim', 99)

 

 

1-2. 메서드

 

메서드는 객체(클래스)에서 행동을 담당한다.

 

class PersonStudent {
    // 필드
    name: string;
    age: number;
    readonly location: string = 'Korea'

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

    // 메서드!!
    getinfo(): string {
        return `${this.name}님은 ${this.age}세 입니다.`
    }
}

const person1 = new PersonStudent('kim', 99)

console.log(person1.getinfo());
// "kim님은 99세 입니다."

 

1-3. getter / setter

• 필드에 접근할 권한을 가진 제어자
• getter가 있지만, setter가 없는 경우에는 자동으로 readonly 속성을 가진다.
• setter 매개변수의 타입 X / getter의 반환 타입에서 추론한다.
• private 속성은 .(dot)연산자로 접근할 수 없다.
  
  

class PersonStudent {
    // 필드
    name: string;
    private _age: number | string;

    // 생성자!!
    constructor(name: string, age: number | string) {
        this.name = name;
        this._age = age;
    }

	// getter & setter
    get age() {
        if(this._age === 0) {
            return '숫자를 입력하세요.'
        }

        return `나이는 ${this._age}세 입니다.`
    }

    set age(age) {
        if(typeof age === 'number') {
            this._age = age;
        } else {
            this._age = 0;
        }
    }
}

// age가 number가 아니기 때문에 문자를 넣으면 오류 발샐
const person2 = new PersonStudent('kim', 0)

console.log(person2.age)
// "숫자를 입력하세요."

 

 

1-4. extends

 

• 상속 or 확장의 역활을 한다. (사용시 고민해볼 필요가 있다.)

 

class 기본1 {
    result() {
        return 'Base';
    }
}

class 파생1 extends 기본1 {

}

const test1 = new 파생1();
console.log(test1.result());
// "Base"

 

class 기본2 {
    result() {
        return 'Base';
    }
}

class 파생2 extends 기본2 {
    result() {
        return 'Extends';
    }
}

const test2 = new 파생2();
console.log(test2.result());
// "Extends"

 

1-5. super

• 기본 클래스 호출 시 사용한다.
• 생성자에서 this 사용 전에 호출 되어야 한다.

 

class Person {
    name: string;

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

    sayHello() {
        return `안녕하세요! ${this.name}님`
    }
}

class Student extends Person {
    constructor(name: string) {
        super(name);
    }

    sayHello() {
        return `안녕하세요! ${this.name} 학생님`
    }
}

const student1 = new Student('kkan');
console.log(student1.sayHello());
// "안녕하세요! kkan 학생님"

 

1-6. 접근제어자

 

• 속성과 메서드에 접근을 제한할 수 있다.
• 클래스 내부 구현 정보를 적당히 공개하여 일부부만 노출 시킨다.

+) API와 비슷한 흉내를 낼 수 있다.

+) 타입 시스템을 이용해 규칙을 강제할 수 있다.

 

제어자	설명
public	어디서나 접근 가능 (기본값, 생략가능)
protected	해당 클래스와 서브클래스에서만 접근 가능
private	해당 클래스의 인스턴스에서만 접근 가능

 

class Person {
    public name: string;
    private age: number;
    protected gender: 'M' | 'F';

    constructor(name: string, age: number, gender: 'M' | 'F') {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    sayName() {
        return `이름은 ${this.name} 입니다.`
    }

    sayAge() {
        return `나이는 ${this.age}`
    }
}

const person1 = new Person('kkan', 22, 'M');

console.log(person1.sayAge())
// "나이는 22"

 

- private / protected는 .(dot) 연산자를 통해 접근이 불가능하다.

public인 name만 찍힘

 

private로 선언된 함수는 서브클래스에서도 접근 불가.

protected는 서브클래스에서 접근 가능.

 

1-7. static

 

• 클래스의 속성과 메서드를 new로 인스턴스화 하지 않고 호출할 수 있다.
• 접근 제어자를 활용할 수 있다.
• 몇가지 정적 이름을 사용할 수 없다.

접근이 되지 않는다...

static을 붙이면 모두 접근 가능!

class StaticClass {
    private static type = 'Type';

    static getType() {
        return StaticClass.type;
    }
}

StaticClass.getType();

이렇게도 사용 가능하다.

 

1-8. readonly

Ts만의 기능!

안전하게 사용이 가능하다.

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

const person1 = new Person('kkan', 22);
console.log(person1.name)   // "kkan"

person1.name = 'kim';
console.log(person1.name)   // "kim"

손쉽게 접근하여 수정이 가능하다.

 

이제 접근이 불가능하다.

1-9. 추상클래스

 

• abstract를 선언한 클래스로 직접 인스턴스화 될 수 없는 클래스이다.
• 직접 인스턴스화 될 수 없지만, extends 후 파생된 클래스를 인스턴스화하도록 유도한다.
• 추상 클래스는 구현된 메서도를 포함 시킬 수 있다.
• abstract 선언한 메서도는 파생된 클래스에서 메서드를 구현해야한다.
• 설계의 목적을 가졌다고 생각하면 된다. (선언된 메서드를 강제적으로 구현해야하므로!)

abstract class Person {
    // 선언된 메서드
    abstract hello(): string

    // 구현된 메서드
    run() {
        return this.hello() + ' run'
    }
}

// 직접 인스턴스가 될 수 없다.
// const person1 = new Person();

class Student extends Person {
    hello() {
        return '안녕!'
    }
}

const student = new Student(); 
console.log(student.hello());

 

1-10. Parameter Properties

 

이제 코드의 가독성을 올려보자!

 

STEP.01

class Person {
    public name: string;
    private age: number;
    protected gender: 'M' | 'F';

    constructor(name: string, age: number, gender: 'M' | 'F') {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    sayName() {
        return `이름은 ${this.name} 입니다.`
    }

    protected sayAge() {
        return `나이는 ${this.age} 입니다.`
    }
}

class Student extends Person {
    id: number;

    constructor(name: string, age: number, gender: 'M' | 'F', id: number) {
        super(name, age, gender)
        this.id = id
    }
}

 

STEP.02

class Person {
    constructor(
        public name: string,
        private age: number,
        protected gender: 'M' | 'F') {
        //생략됨
    }

    sayName() {
        return `이름은 ${this.name} 입니다.`
    }

    protected sayAge() {
        return `나이는 ${this.age} 입니다.`
    }
}

class Student extends Person {
    id: number;

    constructor(name: string, age: number, gender: 'M' | 'F', id: number) {
        super(name, age, gender)
        this.id = id
    }
}

조금 보기 좋을지도,,?

 

1-11. 메서드 오버라이딩

부모 클래스에 정의된 메서드를 자식 클래스에서 새로 구현하는 것이다.

• 오버 라이드 메서드의 매개변수 타입은 오버 라이딩 메서드의 매개변수 타입과 같거나 상위 타입이어야 한다.
• 오버 라이드 메서드의 매개변수 개수가 오버 라이딩 메서드의 매개변수 개수와 같거나 많아야 한다. (단, 조건 1이 성립된다는 전제가 있어야 함)

class Person {
    run() {
        return '달리기!'
    }
}

class Businessman extends Person {
    run() {
        return '회사원이 달린다.'
    }
}

class Student extends Person {
    run() {
        return '학생이 달린다.'
    }
}

const person1 = new Person();           // "달리기!"
const student1 = new Student();         // "회사원이 달린다."
const businessman1 = new Businessman(); // "학생이 달린다."

 

 

 

End.