JS 에서 TS 넘어가기 - 2 ( 인터페이스 )

인터페이스 왜 써야할까?

let user: object; 

user = {
	name : 'xx',
    age : 20
}

console.log(user.name) // 에러

위와 같이 오브젝트 타입을 지정해두고 그값을 로그 값을 출력하는 과정에서 에러가 생기게 되는데요.. 에러 로그를 보면 오브젝트에는 name이 없다! 라고 나옵니다.

이렇게 프로퍼티를 정해서 객체를 표현하고자 할때 인터페이스를 사용합니다!

즉 ,TS 에서 인터페이스는 Type과 JS 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약 같은 것입니다.

어떻게 쓸까?

위의 예시를 인터페이스를 적용하면,

interface User {
	name: string,
    age : number
}

let user: User = {
	name : 'xx',
    age : 20
}

console.log(user.age) // O
user.sex = "male" // X

고쳐서 콘솔 값을 표현하는것 자체는 문제가 없지만 새로운 값을 추가하려고 할때 에러가 발생하게 됩니다.

이땐 인터페이스에 들어와도 된다는 것을 알려줘야합니다.

type Score = 'A' | 'B' |'C'

interface User {
	name: string,
    age : number,
    sex?: string // ?: 있어도 되고 없어도 된다.
    readonly birth : number // 읽기 전용 속성으로 수정이 불가능함.
    [grade:number] : string // 숫자를 키로 하고 문자열을 값으로 하는 프로퍼티를 여러개 받을 수 있음
    [grade:number] : Score // score 에 해당된 값들만 가능.
 
}

let user: User = {
	name : 'xx',
    age : 20
}

console.log(user.age) // O
user.sex = "male" // O

이렇게 인터페이스로는 함수도 적용이 가능합니다.

interface Add {
	(num1: number, num2: number ) : number; // (파라미터 타입) : 리턴 타입 
}

const add : Add = function(x,y){return x+y}

implement , extends

implements 는 부모의 메소드나 변수를 그대로 가져다 쓰는게 아닌 반드시 오버라이드 해서 사용 해야 한다.

해당 인터페이스에 있는 프로퍼티 및 메소드를 전부 가지고 있거나 구현해야 한다.

그리고 다중 상속도 지원한다.

interface Animal {
  dog: string;
  getName(): void;
}

class Dog implements Animal {
  constructor(public dog: string) {}

  getName(): void {
    console.log(this.dog);
  }
}

function callWith(dog: Animal): void {
  dog.getName();
}
callWith(new Dog("jindo"));

extends 상속 이라는 개념의 대표적인 형태이다.

객체 지향에 대해 설명한 글에서 추상화 개념과 상속의 개념을 설명했는데

상속의 한 ‘형태’ 라고 생각하면 된다.

부모에서 선언된 메소드 혹은 변수를 자식은 모두 상속 받아 그대로 사용 할 수 있다.

class Phone {
  protected version: string = "ios14";

  public getVerson() {
    return this.version;
  }

  public setVerson(version: string) {
    this.version = version;
  }
}

class IPhone extends Phone {
  public printVersion() {
    console.log(this.version);
  }
}

let phone = new IPhone();
console.log(phone.printVersion()); // ios14