Typescript class

class, 접근 제어자

class Player {
	constructor(
	private firstName:string,
	private lastName:string,
	public nickname:string
	){}
}
/* javascript
class Player {
	constructor(firstName, lastName, nickname) {
		this.firstName = firstName;
		this.lastName = lastName;
		this.nickname = nickname;
	}
}
*/

const gisuk = new Player("gisuk","jang","기석");
gisuk.firstName // 에러 발생
gisuk.nickname

타입스크립트는 constructor 매개변수로 접근제어자와 타입을 지정해주면 this 바인딩을 해준다.

접근제어자는 public, protected, private 세 가지가 있다.

구분	선언한 클래스 내	상속받은 클래스	인스턴스
private	O	X	X
protected	O	O	X
public	O	O	O

추상화 class

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

class Player extends User { }

const gisuk = new Player("gisuk","jang","기석");
const jang = new User("gisuk","jang","기석") // 에러발생

gisuk.nickname
gisuk.getFullName()

추상화 class 는 일반 class 처럼 사용이 불가능하다.
추상화 클래스는 다른 클래스에 상속하는 용도로만 사용 가능하며, 추상화 클래스로 생성자 함수를 사용할 경우 에러가 발생한다.

interface

interface User {
	name:string
}
interface Player extends User {
}
const gisuk: Player = {
	name :"기석"
}
///---------------------//
type User = {
	name:string
}
type Player = User & {
}

interface 는 [[Type]] 과 매우 유사하다. 기능은 [[Type]]이 더 많고 문법이 다르다.
[[Type]] 이 꼭 필요한 경우가 아니면 interface를 사용하자.

class 변수 초기화

type Words = {
	[key:string]: string
}
class Dict {
	private words: Words
	constructor(){
		this.words = {}
}
	add(word: Word) {
	if(this.words[word.term] === undefined){
		this.words[word.term] = word.def;
	}
}
	def(term:string){
		return this.words[term]
	}
}

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

const kimchi = new Word("kimchi", "한국의 음식");
const dict = new Dict();
  
dict.add(kimchi)
dict.def("kimchi")

constructor 접근 제어자를 활용해 매개 변수를 지정할 경우 타입스크립트에서 자동으로 this 바인딩을 해준다. 하지만 이렇게 작성할 경우, 생성자 함수를 통해 class 를 생성 할 때 인자를 추가해 줘야한다.
매개변수를 추가하지 않고, class 내부에 변수를 만들려면 먼저 선언을 하고 this 바인딩을 직접 해주면 된다.

추상화 class 와 interface

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

	abstract fullName(): string;
	abstract sayHi(name:string): string;
}

class Player extends User {
	fullName() {
		return `${this.firstName} ${this.lastName}`;
	}

	sayHi(name:string) {
		return `Hello ${name}. My name is ${this.fullName()}`
	}
}

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

class Player implements User {
	constructor(
		public firstName:string,
		public lastName:string
	){}

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

위 두 가지 코드는 동일하게 작동한다.
추상화 class 는 자바스크립트로 컴파일 할 때 일반 class 로 남게 되고, interface 는 상속받은 클래스만 남게 된다.

추상화 class는 constructor 에 접근 제어자를 사용해 this 바인딩을 할 수 있지만, interface 는 불가능 하다.
추상화 class 는 상속받은 class 에 constructor 를 사용하지 않아도 되지만, interface 는 사용을 해야 작동을 하며, public 접근 제어자만 사용 할 수 있다.