interface
20 Apr 2023 | typeScript코딩애플강의를 보고 정리했습니다.
interface
type을 이용한 타입설정과 유사함
object 자료형의 타입을 보다 편리하게 지정 가능하다.
EX)
// 마찬가지로 맨 앞글자는 대문자로써주는게 관례이다.
interface Square {
color: string;
width: number;
}
let 네모: Square = { color: 'red', width: 100 };
extends 가능
interface Student {
name: string;
}
interface Teacher extends Student {
age: number;
}
이런식으로 extends
를 해주면 Teacher 타입은 age,name속성을 갖게된다.
type 키워드와 차이점?
extends 문법이 약간 다르다.
Ex) interface의 extends
interface Animal {
name: string;
}
interface Cat extends Animal {
legs: number;
}
Ex) type alias의 extends
(extends는 안되고, &
기호를 써서 object 두개를 합칠 수 있다. )
type Animal = {
name: string,
};
type Cat = Animal & { legs: number };
근데, interface도 type처럼 & 기호
를 이용해서 복사가능하다.
interface Student {
name: string;
}
interface Teacher {
age: number;
}
let 변수: Student & Teacher = { name: 'kim', age: 90 };
& 기호
를 intersection이라고 부르는데, extends와 유사하게 사용가능하다.
타입이름 중복선언
Animal 타입은 name,legs 속성을 가지게 됨 type 선언을 자주 쓰는 외부 라이브러리 이용시 type 선언을 내가 덮어쓰기, override 하기 편리함
interface Animal {
name: string;
}
interface Animal {
legs: number;
}
interface의 경우 타입이름 중복선언을 허용해준다.
extends한 것과 동일하게 동작함
type의 경우 중복선언을 허용하지 않는다.
type으로 타입설정 같은 경우 매우 엄격하다.
// 에러남
type Animal = {
name: string,
};
// 에러남
type Animal = {
legs: number,
};
extends 할 때 object 안의 속성이 중복될 경우
interface Animal {
name: string;
}
interface Dog extends Animal {
name: number;
}
name 속성이 중복되는 상황인데, 이러면 에러가난다.
interface Animal {
name: string;
}
interface Dog {
name: number;
}
let 변수: Dog & Animal = { name: '멍멍' };
& 연산자로 Dog, Animal을 합쳐놓은 코드이다.
name 속성이 중복되는데, 이러면 에러가 난다.
type 키워드도 똑같음
정리
일반적인 상황에선 type 키워드를 자주 사용하는데,
다른 사람이 내 코드를 이용하는 상황이 많다면 interface
로 유연하게 만드는게 좋다.
(그래서 타입스크립트로 작성된 라이브러리들은 interface로 타입 정해놓은곳이 많음)
혹은 object 자료형은 전부 interface로 만들고, 다른 자료형은 type 키워드로 만들고 이렇게 섞는것도 괜찮다고한다.
type과 interface문법을 잘 알고있다면, 기준은 정하기 나름이다.