타입스크립트 4 - 클래스

클래스

• 클래스의 속성 및 메서드의 타입을 정의한다.

class Person {

    ssn: string;

    firstName: string;

    lastName: string;

    constructor(ssn: string, firstName: string, lastName: string) {

        this.ssn = ssn;

        this.firstName = firstName;

        this.lastName = lastName;

    }

    getFullName(): string {

        return `${this.firstName} ${this.lastName}`;

    }

}

 

접근제한자 = 접근제어자 = Access Modifiers

private

• 클래스 외부에서 private 속성 및 메서드에 접근하면 접근이 불가 에러가 난다.

 class Person {

    private ssn: string;

    private firstName: string;

    private lastName: string;

    constructor(ssn: string, firstName: string, lastName: string) {

        this.ssn = ssn;

        this.firstName = firstName;

        this.lastName = lastName;

    }

    getFullName(): string {

        return `${this.firstName} ${this.lastName}`;

    }

}

 

let person = new Person('153-07-3130', 'John', 'Doe');

console.log(person.ssn); // only accessible within class

 

public

• public 한정자를 사용하면 모든 위치에서 클래스 속성 및 메서드에 액세스할 수 있습니다. 
• 속성 및 메서드에 대한 액세스 한정자를 지정하지 않으면 기본적으로 public 한정자를 사용합니다.

 

protected

• protected는 동일한 클래스 및 하위 클래스 내에서 액세스를 허용합니다.

readonly

• 속성을 불변으로 표시하려면 readonly 키워드를 사용합니다.
• readonly 속성은 재할당이 안 된다.
• 생성자에 인자로 readonly 속성을 정의하면 초기화를 따로 하지 않아도 된다.

class Person {

    constructor(readonly birthDate: Date) {

        this.birthDate = birthDate;

    }

}

let p = new Person(new Date());

console.log(p.birthDate);

p.birthDate = new Date(); // Cannot assign to 'birthDate' because it is a read-only property.

class Person2 {

    constructor(readonly birthDate: Date) { // 초기화를 따로 하지 않아도 됨

    }

}

let p2 = new Person2(new Date());

console.log(p2.birthDate);

readonly vs const

	readonly	const
사용	클래스 속성	변수
초기화	같은 클래스의 선언 또는 생성자에서	선언문에서

 

상속

자식 클래스의 생성자는 'super()' 호출을 포함해야 한다.

부모 클래스의 메서드에 바로 접근 가능하다.

class Person {

    constructor(private firstName: string, private lastName: string) {

    }

    getFullName(): string {

        return `${this.firstName} ${this.lastName}`;

    }

    describe(): string {

        return `This is ${this.firstName} ${this.lastName}.`;

    }

}

let p = new Person('a','b');

console.log(p.getFullName());

class Employee extends Person {

    constructor(firstName: string, lastName: string, private jobTitle: string) {

      super(firstName,lastName);

    }

}

let e = new Employee('a','b','c');

console.log(p.describe());

 

메서드 재정의

• super.methodInParentClass()

class Employee extends Person {

    constructor(

        firstName: string,

        lastName: string,

        private jobTitle: string) {

        super(firstName, lastName);

    }

    describe(): string {

        return super.describe() + ` I'm a ${this.jobTitle}.`;

    }

}

let employee = new Employee('John', 'Doe', 'Web Developer');

console.log(employee.describe()); // This is John Doe. I'm a Web Developer.

 

 

출처

https://yamoo9.gitbook.io/typescript

https://www.typescripttutorial.net/typescript-tutorial/typescript-interface/

https://joshua1988.github.io/ts/guide/interfaces.html