220728 TIL

Parker.Park·2022년 7월 28일

TIL typescript

TIL

목록 보기

36/39

220728 TIL

오늘도 typescript 인프런강의이다.
인프런강의 : 타입스크립트 시작하기

class

들어가기 전에 클래스에 대해 정리한 블로그가 있으니 부족하다고 생각하면 참고 바란다.
[클래스?:ES6 클래스에 대한 정리]

typescript 에서 class에서 property를 선언하고 초기화 해주어야 한다. 반대로 property를 선언만해주고 초기화를 해주지 않아도 에러가 발생한다. (Strict Property Initialization라고 하는데 정확히는 모르겠다.) 이게 ES6클래스 부분을 알아야하는거 같다. 이 부분은 추후에 배워야겠다~.

class Point {
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
// error TS2339: Property 'x' does not exist on type 'Point'.
//error TS2339: Property 'y' does not exist on type 'Point'.

반대로 property를 선언만 하고 초기화 해주지 않아도 에러가 발생한다.

class Point {
  x: number;
  y: number;
}
//Property 'x' has no initializer and is not definitely assigned in the constructor.
//Property 'y' has no initializer and is not definitely assigned in the constructor.

생성자를 통해 초기화 해주어도 되지만 직접 초기화를 하여도 무관하다.

class Point {
  x = 0;
  y = 11;
}

const pt = new Point();

console.log(pt.x, pt.y); // 0, 11

pt.x = 0;
console.log(pt.x); // 0
pt.x = "0"; //Error가 발생한다. 이미 x type은 number로 고정되어있다.

접근 제한자 - public, protected, private

다른 클래스 기반 객체 지향 언어에는 접근 제한자가 있다고 한다. JavaScript에는 없어서 좀 생소하였다. TypeScript의 접근제한자가 다른 언어들의 접근 제한자와 차이가 있다. 다른 언어들은 접근 제한자를 명시하지 않았을 경우 암묵적으로 protected가 지정되지만 TypeScript는 자동으로 public으로 지정된다. 아마도 javaScript라는 배경이 있어서이지 않을까 한다.
접근 제한자에 따른 접근 가능성에 대해 아래 표를 참고하자

접근 가능성	public	protected	private
클래스 내부	◯	◯	◯
자식 클래스 내부	◯	◯	✕
클래스 인스턴스	◯	✕	✕

참조 : Poiemaweb

- public

public은 위에서 설명 했듯이 class에 있는 프로퍼티를 외부에서도 사용 가능하다는 것을 의미한다. 예시로 보자.

class Animal {
  public name: string;

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

  sayHello(): void {
    console.log(`Hello ${this.name}`);
  }
}
const animal1 = new Animal("kkokko");

console.log(animal1.name); // kkokko

animal1.name = "chacha"; 
console.log(animal1.name);// chacha

- private

private은 클래스 내부에서만 참조 가능하며 외부에서는 접근이 불가능하다.

class Animal {
  private name: string;

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

  sayHello(): void {
    console.log(`Hello ${this.name}`);
  }
}
const animal1 = new Animal("kkokko");

console.log(animal1.name); 
// rror TS2341: Property 'name' is private and only accessible within class 'Animal'.

또한 상속된 클래스에서도 접근이 불가능하다.

class Animal {
  private name: string;

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

  sayHello(): void {
    console.log(`Hello ${this.name}`);
  }
}

class Dog extends Animal {
  kind: string;
  constructor(name: string, kind: string) {
    super(name);
    this.kind = kind;
  }

  sayName(): void {
    console.log(`I'm ${this.name}`);
  }
}


const dog1 = new Dog("ddoddo", "Shiba");

dog1.sayName();
// error TS2341: Property 'name' is private and only accessible within class 'Animal'.

- protected

protected는 외부에서 접근이 불가능하지만 상속된 클래스에서는 접근이 가능하다.

class Animal {
  protected name: string;

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

  sayHello(): void {
    console.log(`Hello ${this.name}`);
  }
}

class Dog extends Animal {
  kind: string;
  constructor(name: string, kind: string) {
    super(name);
    this.kind = kind;
  }

  sayName(): void {
    console.log(`I'm ${this.name}`);
  }
}


const dog1 = new Dog("ddoddo", "Shiba");

dog1.sayName(); // I'm ddoddo

constructor에 접근범위를 정해주면 자동으로 멤버변수로 할당

클래스에 경우 기존에 property를 선언하고 constructor를 통해서 초기화하는 과정을 가졌다. 그런데 constructor 파라미터에 접근 제한자를 선언 가능하며, 선언 후에는 프로퍼티 선언과 초기화 과정을 생략할 수 있게 된다.

class Animal {
  
  constructor(public name: string) {}

  sayHello(): void {
    console.log(`Hello ${this.name}`);
  }
}
const animal1 = new Animal("kkokko");
animal1.sayHello(); // Hello kkokko
// public 이기 때문에 외부에서 접근 가능하다.
console.log(animal1.name); // kkokko

readonly

readonly 속성은 읽기전용의 의미를 갖는다. 그렇기 때문에 다른 값으로 바꿀 수 없다.

class Animal {
  constructor(private readonly name: string) {}

  sayHello(): void {
    //private 이기 때문에 클래스 내부에서는 접근이 가능하다.
    this.name = "chacha";
    //하지만 readonly속성때문에 에러가 발생한다.
    //error TS2540: Cannot assign to 'name' because it is a read-only property.
    console.log(`Hello ${this.name}`);
  }
}
const animal1 = new Animal("kkokko");
animal1.sayHello(); // Hello chacha