Typescript | Class

이동주·2022년 7월 11일
0

Typescript

목록 보기
6/7
post-thumbnail

Class

1. 타입스크립트로 class 사용하기

타입스크립트에서는 파라미터들을 써주기만 하면 타입스크립트가 알아서 constructor 함수를 만들어준다.
this.~~ = ~~ 할 필요가 없다.

타입스크립트에서는 public 또는 private 프로퍼티를 만들 수 있다.
이는 거의 모든 객체지향 프로그래밍 언어들이 가지고 있는 특징이지만 자바스크립트에서는 사용되지 않는다. 그래서 타입스크립트에서 private, public을 자바스크립트로 컴파일 하면 사라지게 된다. 따라서 이런 키워드는 나를 보호해주기 위해서만 사용되는 것이다.

class Player {
    constructor (
        private firstName: string,
        private lastName: string,
        public nickName: string
    ) {}
}

const nico = new Player("nico", "las", "니꼬")

이런 키워드들이 자바스크립트에서 반영되지 않아도 타입스크립트는 이를 보호해준다.

nico.firstname; // 오류

2. 추상 클래스

추상 클래스란 다른 클래스로 상속 받게만 해줄 수 있는 클래스이다.

abstract class User {
  constructor (
        private firstName: string,
        private lastName: string,
        public nickName: string
    ) {}
}

class Player extends User{
    
}

const nico = new Player("nico", "las", "니꼬")

이 클래스는 직접 새로운 인스턴스를 만들 수 없다.

const nico = new User("nico", "las", "니꼬") // 오류

3. 추상 클래스 안에서의 메소드 사용

추상 클래스 안에서 메소드를 만들면 상속받은 클래스는 바로 사용이 가능하다.

abstract class User {
  constructor (
        private firstName: string,
        private lastName: string,
        public nickName: string
    ) {}
    getFullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

class Player extends User{
    
}

const nico = new Player("nico", "las", "니꼬")

nico.getFullName()

getFullName 메소드 앞에 private을 적는다면 nico.getFullName()은 더이상 작동하지 않는다. privatepublic은 프로퍼티 뿐만 아니라 메소드에서도 작동한다는 것을 알 수 있다.

4. 추상 메소드

추상 클래스 안에서는 추상 메소드를 만들 수 있다.
추상 메소드를 만들기 위해서는 메소드를 클래스 안에서 구현하지 않으면 된다. argument는 가능하며 메소드의 call signature만 적어둬야 한다는 이야기다.

getFullName() {
        return `${this.firstName} ${this.lastName}` // 이 부분 작성 X
    }

추상 메소드는 내가 추상 클래스를 상속받는 모든 것들이 구현을 해야 하는 메소드이다.(필수)

abstract class User {
  constructor (
        private firstName: string,
        private lastName: string,
        private nickName: string
    ) {}
    abstract getNickName(): void
    getFullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

class Player extends User{
    getNickName() {
        console.log(this.nickName)
    }
}

그러나 nickName은 private이기 때문에 오류가 생긴다. 이런 경우 어떻게 해야 할까?

+ protected

protectedprivate는 다르다.
private는 인스턴스 밖에서 접근할 수가 없으며 다른 자식 클래스에서도 접근이 불가능하다.
해당(User) 클래스의 인스턴스나 메소드에서는 접근이 가능하나 추상 클래스는 인스턴스화 할 수 없다.

만약 필드가 외부로부터는 보호되지만 다른 자식 클래스에서는 사용되기를 원한다면 protected를 사용하면 된다.

abstract class User {
  constructor (
        protected firstName: string,
        protected lastName: string,
        protected nickName: string
    ) {}
    abstract getNickName(): void
    getFullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

class Player extends User{
    getNickName() {
        console.log(this.nickName)
    }
}

+ readonly

readonly를 사용하면 해당 타입이 public이라고 할 지라도 외부에서 수정이 불가능하다.
주로 다른 누군가가 데이터를 덮어쓰는 것을 방지하기 위해서 privateprotect를 사용하는데, 프로퍼티를 public으로 두어야 하는 상황에서 외부로부터 보호하기를 원한다면 readonly를 사용하면 된다.

class Word {
	constructor(
    	public readonly term: string,
        public readonly def: string
    ) {}
}

const kimchi = new Word("kimchi", "한국음식");

kimchi.def = "미국음식"; // 오류
profile
안녕하세요 이동주입니다

0개의 댓글