[ Typescript ] - interface : Object는 특별하니까

Object는 특별하니깐 😁

Object에 쓸 수 있는 interface

오브젝트는 type alias로 타입을 미리 선언 할수도 있고

interface 라는 keyword로 타입을 선언 할 수 있다 .

// interface 작성 할 때 '=' 안붙인다.
interface Square{
      color: string
      width : number
}

let square : Square ={
      color: '#000',
      width: 100
}

interface는 object랑 비슷한 모습으로 작성하면 된다.

• 대문자로 작명하고
• { ... } 안에 타입을 명시해주면 끄읕

(참고) 한 줄 끝나면 콤마대신 세미콜론도 가능하고 둘다 안해도 compiler가 딴지 안걸긴 함.

interface의 extends

interface의 extends 키워드는 class에서 사용하는 keyword와 유사하게 상속과 비슷하다 .

Sample

interface Student {
  name :string,
}
interface Teacher {
  name :string,
  age :number,
}

중복인 name이라는 type이 보이는데 멋진 개발자라면 통일할 줄 알아야 할듯 하다.

이럴 때 사용 할 수 있는 extends 를 사용해서 줄여보자

interface Student {
  name :string,
}
interface Teacher extends Student {
  age :number
}

이제 Teacher 라는 interface는 age , name 이라는 타입속성을 가지게 된다.

오브젝트에 method 있을 때 interface 사용하고 싶다.

interface TodoListFunc {
      addTodo : (x:string) => string[],
      deleteTodo: (num:number)=> string[]
}

const todoListFunc : TodoListFunc = {
      addTodo(x){
            return [] as string[]
      },
      deleteTodo(num){
            return [] as string[]
      }

}

이런식으로 차근차근 생각하며 코드를 짜보자!

type 키워드와의 차이점

type alias와 interfac는 거의 똑같지만 extends 할 수 있다는 정도의 차이점이 있는데

type alias에서 interface의 extends 와 같이 합치려면

// type alias 의 & 기호
type Animal = { 
  name :string 
} 
type Cat = Animal & { legs: number }

// interface의 extends 
interface Animal {
      name: string
}

interface Cat extends Animal {
      legs: number
}

이러한 차이점이라고 말 할 수 있겠지만

사실 interface도 & 가능하다.

// interface에서도 & 기호 사용가능
interface Animal {
      name: string
}

interface Cat  {
      legs: number
}

let cat : Cat & Animal = {
      name: 'di',
      legs: 4
}

그렇다면 무슨 차이점이 있을까?

타입이름 중복 선언

interface Animal { 
  name :string 
} 
interface Animal { 
  legs :number 
}

// 이것으로 확정된다.
interface Animal {
      name: string
      legs : number
}

interface에서는 타입이름 중복선언을 허용해주며 중복시 extends 한 것으로 간주하며, 동일하게 동작한다 .

• 장점) : type 선언을 자주 쓰는 외부 라이브러리 이용시 type 선언을 내가 덮어써버리기, override 편리하다.

type Animal = { 
  name :string 
} 
type Animal = { 
  legs :number 
}

type의 경우 에러남 - 엄격근엄진지하다랄까...

extend 할 때 object 안의 속성이 중복될 경우

interface Animal {
      name: string
}

interface Dog extends Animal{
      name: number
}

타입에러가 난다 .

그렇다면

interface Animal {
      name: string
}
interface Animal{
      name: number
}

이렇게 하면 마지막에 있는 name의 타입이 number 가 될까?

안된다.