문가가 공부한 기록입니다. 부정확한 내용은 편히 지적 부탁드립니다.
타입스크립트는 우리의 객체지향 코드들을 더 안전하고 좋게 만들 수 있도록 도와준다.
기존 JS에서 우리가 Class를 만들 때 우리는 아래와 같은 코드를 작성해야 했다.
//Javascript 코드
"use strict";
class Player {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}생성자에 this.뭐시기 ~ this.거시기 ~~ 하지만 TS를 활용하면 전혀 그럴 필요가 없다.
//Typescript 코드
class Player {
constructor(
private firstName:string,
private lastName:string
) {}
}오우 너무 간단하고~~ TS코드를 보면 private(접근 제한자)가 있지만 JS에서는 보이지 않는다. JS로 컴파일되면서 사라진 것이다. 즉 private 키워드는 오로지 TS에서 우리를 보호해주기 위해서 사용하는 것이지 JS에서는 사용되지 않는다.
// TS
class Player {
constructor(
private firstName:string,
private lastName:string,
public nickName:string
) {}
}
const moon = new Player("jh", "moon", "문가놈");
// JS
"use strict";
class Player {
constructor(firstName, lastName, nickName) {
this.firstName = firstName;
this.lastName = lastName;
this.nickName = nickName;
}
}
const moon = new Player("jh", "moon", "문가놈");private와 public이 JS코드에서 반영되지 않았다고 할지라도 TS는 우리를 보호해줄 것이다. 만약 moon.firstName을 시도하면 이 코드는 작동하지 않을 것이다.(물론 JS에서는 작동이 될 것이다. 하지만 TS가 JS로 컴파일 자체를 해주지 않을 것이기에 문제없다.)
이제 클래스를 알아봤으니 추상 클래스도 같이 살펴보자.
abstract class User {
constructor(
private firstName:string,
private lastName:string,
public nickName:string
) {}
}
class Player extends User {
}
// 작동한다.
const moon = new Player("jh", "moon", "문가놈");
// 작동하지 않는다.
const nico = new User("nico", "las", "니꼬");
추상 클래스란 무엇일까? 추상 클래스는 다른 클래스가 상속받을 수만 있는 클래스다. 하지만 이 클래스는 직접 새로운 인스턴스를 만들 수 없다.
// TS
abstract class User {
constructor(
private firstName:string,
private lastName:string,
public nickName:string
) {}
getFullName() {
return `${this.firstName} ${this.lastName}`
}
}
class Player extends User {
}
const moon = new Player("jh", "moon", "문가놈");
moon.getFullName()Player 클래스는 User를 상속받고 있음으로 getFullName() 메서드를 그냥 사용할 수 있다.
// TS
abstract class User {
constructor(
private firstName:string,
private lastName:string,
private nickName:string
) {}
// 추상 메서드는 Call signature만 가진다.
abstract getNickName():void
getFullName() {
return `${this.firstName} ${this.lastName}`
}
}
class Player extends User {
}
const moon = new Player("jh", "moon", "문가놈");
moon.getFullName()
추상 클래스 안에서는 추상 메서드를 만들 수 있다. (메소드가 뭐냐고? 메소드는 클래스 안에 존재하는 함수이다!) 추상 메소드를 만들려면 메소드를 클래스 안에서 구현하지 않으면 된다. 대신에 메소드의 Call signature만 적어둔다. 추상 메소드는 우리가 추상 클래스를 상속받는 모든것들이 구현 해야하는 메소드를 의미한다. 즉 추상클래스를 상속받아 메소드를 어떻게 구현할지에 대해서는 간섭하고 싶지 않지만(구현은 어떻게 되어도 상관은 없지만) 무조건 구현은 되어야한다는 의미이다.
자 그럼 추상 메소드 getNickName()를 Player 클래스에서 구현해보자.
abstract class User {
constructor(
// 아래 Player 클래스의 getNickName() 메소드에서 접근하기 위해 protected로 수정했다.
protected firstName:string,
protected lastName:string,
protected nickName:string
) {}
// 추상 메서드는 Call signature만 가진다.
abstract getNickName():void
getFullName() {
return `${this.firstName} ${this.lastName}`
}
}
class Player extends User {
getNickName() {
console.log(this.nickName);
}
}
const moon = new Player("jh", "moon", "문가놈");
moon.getFullName()
+ 객체지향 개념이 아직 잡히지 않았다. 클래스, 추상 클래스, 인터페이스, 접근제어자에 대해서 학습하자
++참고자료
https://nomadcoders.co/typescript-for-beginners/lectures/3678
댓글