[typescript] interface object 타입지정

object에 쓸 수 있는 interface 문법

interface 문법을 쓰면 object 자료형의 타입을 보다 편리하게 지정 가능하다.

<script>
interface Square {
	color : string,
    width : number,
}

let square : Square = { color : 'red', width : 100 }
</script>

interface는 object랑 비슷한 모습으로 작성하면 된다. type alias 용도와 기능이 똑같다. 대문자로 작명하고 {} 안에 타입을 명시해주면 된다.

interface의 extends

<script>
interface Student {
	name :string,
}
interface Teacher {
	name :string,
    age :number,
}
</script>

위와 같이 중복 사항들을 extends 문법을 이용해 줄일 수 있다. extends 문법은 interface 여기에 복사해달라는 뜻이다.

<script>
interface Student {
	name :string,
}
interface Teacher extens Student {
	age :number
}
</script>

Student interface를 extends 해달라고 적으면 Student 안에 있던걸 복사해서 Teacher에 넣어준다. 이제 Teacher 타입은 age, name 속성을 가지고 있다.

type 키워드와의 차이점

type alias와 interface는 거의 똑같은 기능을 제공한다. 차이점은 extends 문법이 약간 다른 것이다.

interface의 extends

<script>
interface Animal {
	name :string
}
interface Cat extends Animal {
	legs :number
}
</script>

type alias의 extends

<script>
type Animal = {
	name :string
}
type Cat = Animal & { legs: number }
</script>

type alias의 경우 extends는 안되고 & 기호를 쓰면 object 두개를 합칠 수 있다.
여기서 주의 extends 쓸 때 타입끼리 중복속성이 발견될 경우 에러가 발생할 수 있다.

타입이름 중복선언시

<script>
interface Animal {
	name :string
}
interface Animal {
	legs :number
}
</script>

interface의 경우 타입이름 중복선언을 허용 해주며 중복시 extends 한 것이랑 동일하게 동작한다. 이러면 Animal 타입은 name, legs 속성을 가질 수 있다.

<script>
type Animal = {
	name :string
}
type Animal = {
	legs :number
}
</script>

type의 경우 중복선언을 허용하지 않는다. 에러 발생

그래서 일반적인 상황에선 type 키워드 자주 활용하면 되고, 다른 사람이 내 코드를 이용하는 상황이 많으면 interface로 유연하게 만드는게 좋다.

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

<script>
interface Animal {
	name :string
}
interface Dog extends Animal {
	name :number
}
</script>

Animal 복사해서 Dog interface를 만들었지만 name 속성이 중복되기 때문에 에러가 발생한다.

<script>
type Animal = {
	name :string
}
type Dog = {
	name :number
}

let 변수 :Dog & Animal = { name : '멍멍' }
</script>

type 키워드도 마찬가지로 속성이 중복되면 에러가 발생한다. 하지만 name : string, name : number 라서 에러가 발생하고 둘다 name: string 타입이면 에러가 나지 않고 하나로 합쳐준다.