TS - TIL(3)

인터페이스 vs 타입 별칭

이 둘의 미묘한 차이점에 대해서 알아보자

type Person = {
    name: string;
    age: number;
}

interface User {
    name: string;
    age: number;
}

let kimcoding: Person = {
    name: '김코딩',
    age: 30,
}

let coding: User = {
    name: '김코딩',
    age: 30,
}

• kimcoding => type Person 참조

• coding => interface User 참조

둘의 차이점은 무엇일까!

visual studio로 각각의 참조객체에 마우스를 올려보면, 내부에 어떤 property들이 있는지 보이는데, type Person에는 보이는 반면, interface User에는 보이지 않는다.

• 결론은, 타입 별칭으로 정의한 타입으로 작성할 때 조금 더 편하게 코드를 작성할 수 있다.

type Person = {
    name: string;
    age: number;
}

interface User {
    name: string;
    age: number;
}

//에러
type Students extends Person {
    className: string;  
}

//동작
interface Students extends User {
	 className: string;   
}

//동작
interface Students extends Person {
    className: string;  
}

타입 별칭은 타입에 새로운 이름을 부여하는 것에서 그치기 때문에, 확장이 되지 않는다.

그러나, 인터페이스는 확장이 가능하다.

인터페이스는 기존의 인터페이스 및 타입 별칭으로 만들어진 타입을 둘 다 상속할 수 있기 때문에, 유연한 코드 작성을 위해서는 인터페이스로 만들어서 필요할 때마다 확장이 가능하다.

ts에서의 클래스

클래스의 속성, 메서드에 대한 타입을 명시한다.

class Person {
  //여기에 contructor를 이용해서 초기화하는 멤버들은 상단에서 정의해줘야 한다.
  name: string;
  age: number;

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

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

---

또한, ts의 class는 interface와 같이 기존에 존재하던 클래스를 상속받아 확장하여 새로운 클래스를 만들 수 있다.
extends키워드를 사용해서 상속할 수 있다.

아래의 예제로 볼 수 있다.

class Animal {
    move(distanceInMeters: number): void {
        console.log(`${distanceInMeters}m 이동했습니다.`);
    }
}

class Dog extends Animal {
    speak(): void {
        console.log("멍멍!");
    }
}

const dog = new Dog();
dog.move(10);
dog.speak();

• Animal : 상위 클래스, 기초클래스
• Dog : 하위 클래스, 파생클래스

public, private, readonly 키워드

공개된다고 명시적으로 표시해둘 때 : public
외부에 드러내지 않을 멤버 : private

//public 예제
class Person {
  public name: string;
  public age: number;

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

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

//private 예제
class Person {
  public name: string;
  private age: number;

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

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

readonly 키워드를 사용하면 프로퍼티를 읽기 전용으로 만든다. 읽기 전용 프로퍼티들은 선언 또는 생성자에서 초기화해야한다.

밑에서는 name이 readonly로 명시되어 있기 때문에, 값을 변경할 수 없다. 변경되면 안 될 값을 readonly로 명시하여 보호한다!

class Mydog {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let spooky = new Mydog("스푸키");
spooky.name = "멋진 스푸키"; // 에러