[Typescript] Class

📌 참고 : https://poiemaweb.com/typescript-class

기본문법

ES6 클래스는 클래스 내부에 메소드만 선언할 수 있다. 즉 멤버변수(프로퍼티) 선언은 불가하고, 멤버함수(메소드)만 선언 가능하다.

멤버변수의 선언은 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화 한다.

// person.js
class Person {
	constructor(name) {
	this.name = name
	}

	walk() {
		console.log(`${this.name} is walking.`)
	}
}

하지만 Typescript 클래스는 클래스 몸체(내부)에 클래스 프로퍼티의 타입을 사전 선언하여야 한다.

//person.ts
class Person {
	name : string;

	constructor(name:string) {
		this.name = name;
	}
	
	walk() {
		console.log(`${this.name} is walking.`)
	}
}
const person = new Person('Lee');
person.walk(); // Lee is walking

 

접근제한자

public, private, protected를 지원한다.

보통 다른 객체지향 언어는 클래스의 프로퍼티와 메소드에 접근제한자를 생략하면, 암묵적으로 protected 인데

typescript는 public이 암묵적으로 선언된다.

 

반면, 생성자 파라미터에 접근제한자를 생략하면 생성자 내부에서만 유효한 지역변수가 되어 생성자 외부에서 참조가 불가능하다.

접근 제한자를 사용하는 이유? 캡슐화(encapsulation)!!

 

• 접근제한자 별 접근 가능한 위치

📌 출처 : https://velog.io/@mollog/Class-Public-Private-field-MDN-내용-정리

구분	public	protected	private
클래스 내부	O	O	O
자식 클래스 내부	O	O	X
클래스 인스턴스	O	X	X

 

• 생성자 파라미터(멤버변수)에서 접근 제한자 선언

생성자 파라미터에 접근 제한자를 선언하는 경우, 해당 파라미터가 암묵적으로 클래스 프로퍼티(멤버변수)로 선언되고

생성자 내부에서 별도의 초기화(this.parameter)를 하지 않아도 암묵적으로 초기화가 수행된다.

이때, 만약 생성자 파라미터에 접근제한자가 선언되지 않으면,

해당 파라미터는 생성자 내부에서만 유효한 지역번수가 되어 생성자 외부에서 참조가 불가능하게 된다.

// In Typescript
class Player {
  constructor(
    private firstName: string,
    private lastName: string,
    public nickname: string,
		score : number
  ) {}
}

// Compile to Javascript
class Player {
    constructor(firstName, lastName, nickname, score) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.nickname = nickname;
    }
}

const goodPlayer = new Player('명석', '이', '빛돌', 100);

goodPlayer.firstName = "명석명석" // error : 'firstName' 속성은 private이며 'Player' 클래스 내에서만 엑세스 할 수 있습니다.
goodPlayer.nickname = "바보"
goodPlayer.score = undefined

 

• readonly 키워드

출처 : http://typescriptstudy.com/ts/article/14-%ED%81%B4%EB%9E%98%EC%8A%A4-class

readonly가 선언된 클래스 프로퍼티는 선언 시 또는 생성자 내부에서만 값을 할당할 수 있다. 그 외의 경우에는 값을 할당할 수 없고 오직 읽기만 가능하다. 상수의 선언 시 사용한다.

 

class Employee {
    // 생성자에서 id 지정한 후 읽기 전용
    readonly id: number;   
    dept: string;

    constructor(empId: number) {
        this.id = empId;
    }

    // 속성 선언시 값 지정
    readonly empType: string = "FTE";
}

 

• static 키워드

출처 : http://typescriptstudy.com/ts/article/14-%ED%81%B4%EB%9E%98%EC%8A%A4-class

클래스의 프로퍼티에 접근하기 위해서는 인스턴스를 생성해야 한다. 즉 'this.프로퍼티명"을 통헤 접근 가능하다. 하지만 클래스 프로퍼티에 static 키워드를 붙이면 인스턴스를 생성하지 않더라도 "클래스명.프로퍼티명"으로 해당 프로퍼티에 접근이 가능해진다. 즉 static 키워드는 정적 프로퍼티를 만드는 키워드이다.

class Exam {    
    static Cutline: number = 80;
 
    scoreCheck(score: number) {
        if (score >= Exam.Cutline) {
            console.log("PASS");
        }
        else {
            console.log("FAIL");
        }
    }
}
 
let exam: Exam;
exam = new Exam();
console.log("cutline: " + Exam.Cutline);
exam.scoreCheck(85);

 

추상클래스

다른 클래스가 상속받을 수 있는 클래스.

하지만 추상 클래스로는 직접 인스턴스를 만들 수 없다.

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

class Player extends User {}

const nico = new User('nico', 'las', '니꼬');/ // 추상 클래스의 인스턴스를 만들 수 없습니다.

 

추상메소드

추상메소드는 추상 클래스를 상속받는 클래스가 구현(implement)을 해야하는 메소드를 의미한다.

추상메소드는 인자를 정의해서는 안되고, call signatuer만 정의해야 한다.

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

class Player extends User {} //비추상 클래스 'Player'는 'User' 클래스에서 상속된 추상 멤버(메소드) ' getNickName'을 구현하지 않았습니다.

const nico = new Player('nico', 'las', '니꼬');

 

Interface

객체의 타입을 특정해주기 위해 사용한다.

type 키워드로도 객체의 타입을 정할 수 있지만 객체의 모양을 정의하기 위해 만들어진 inteface를 사용하는 것이 의도에 맞는 활용일 수 있다.

그리고 inteface는 같은 이름을 가진 인터페이스를 또 선언(선언 병합)하여 기존의 인터페이스 타입에 새로운 타입을 추가할 수 있지만

type키워드는 같은 이름을 가진 타입을 다시 선언할 수 없다.

또한 인터페이스는 클래스처럼 다른 인터페이스를 상속할 수 있다.

 

이와는 반대로 인터페이스를 활용하기보다, type alias를 활용하는 것이 유용하다는 의견도 있다.

1. 함수의 type을 나타내는데 더 직관적이다.
2. IDE에서 미리보기를 더 잘 지원한다.
-> 인터페이스는 call signature를 바로 확인할 수 없지만, type alias는 마우스 커서를 가져다 대면 바로 확인이 가능하다.
3. 원치 않는 선언 병합을 막아준다.

출처 : https://techblog.woowahan.com/9804/

 

interface Person {
  firstName: string;
  lastName: string;
}

// concrete type
type Team = "red" | "blue" | "yellow" 
type Health = 1 | 5 | 10

// we can use interface
// interface is only used to make object type
// but, type is used in many purposes
// Player === Person
type Player = {
  nickname :string
  team : Team
  health :Health
}
interface Person {
  nickname :string
  team : Team
  health :Health
}

interface User {
  name: string
}

// interface is similar to class
interface Player extends User {
}

const nico : Player = {
  name :"nico"
}

// we can do this to use type keyword like this
type User = {
  name:string
}

type Player = User & {
}

const nico : Player = {
  name : 'nico'
}

// // but, When define object shape, inteface is better

interface User {
  name:String
}

interface User {
  lastName : string
}

interface User {
  health: number
}

const nico : User = {
  name:'nico',
  lastName:'las',
  health:1
}

//also, interface can combine type in same interface params

// type extends
type PlayerA = {
  name :string
}

type PlayerAA = PlayerA & {
  lastName : string
}

type PlayerAAA = 

const playerA : PlayerAA = {
  name:'nico',
  lastName :'xxx'
}

//----------------------//

interface PlayerB {
  name:string
}

interface PlayerBB extends PlayerB {
  lastName:string
}
// or
// interface PlayerB {
//   lastName:string
// }

const playerB : PlayerB = {
  name:'nico',
  lastName : 'yyy'
}

 

인터페이스와 추상클래스의 차이

추상클래스는 단순히 표준화된 프로퍼티와 메소드를 갖도록하는 청사진 역할을 하는데

자바스크립트로 컴파일하면 단순 클래스로 변한다.

만약 추상클래스가 자바스크립트 코드로 클래스가 존재하는 것이 의미가 없을 경우 인터페이스를 사용한다.
인터페이스는 가볍기 때문에 컴파일하면 JS로 바뀌지 않고 사라지기 때문이다.

단, 인터페이스를 사용할 경우 접근제한자(protected, private)를 사용하는 것은 불가능하다.

abstract class User {
  constructor(
    protected firstName :string,
    protected lastName :string
  ) {}
  abstract sayHi(name:string):string
  abstract fullName():string
}

class Player extends User {
  fullName () {
    return `${this.firstName} ${this.lastName}`
  }
  sayHi (name:string) {
    return `Hello ${name}. My name is ${this.fullName()}`
  }
}

// abstract class can't make instance.
// abstract class is just blueprint!!
// 그렇다면 인터페이스를 쓸 때 클래스가 특정 형태를 따르도록 어떻게 만들 수 있을까?

interface User {
  firstName :string
  lastName :string
  sayHi(name:string):string
  fullName():string
}

interface Human {
  health : number
}

// implements!!
// but when implements interface, we can't set properties private, protected
class Player implements User, Human {
  constructor(
    readonly firstName:string,
    readonly lastName:string,
    health : number
    ){}
    fullName () {
      return `${this.firstName} ${this.lastName}`
      }
    sayHi (name:string) {
      return `Hello ${name}. My name is ${this.fullName()}`
      }
}

// interface and type both replace abstract class
type PlayerA = {
  firstName:string
}

interface PlayerB {
  firstName:string
}

class User implements PlayerB {
  constructor (
    public firstName:string
  ){}
}