개발/typescript
타입스크립트 기초 문법 - 인터페이스
모그
2023. 12. 27. 15:25
인터페이스 - 타입 별칭처럼 타입에 이름을 지어주는 문법이다.
interface Test {
name:string;
age:numer;
}
type Test = {
name:string;
age:numer;
}
타입 별칭과는 등호 표시 빼고는 문법이 같다.
타입 별칭이 갖고있는 기능, 예를 들면 선택적 프로퍼티, 읽기전용 프로퍼티 역시 설정할 수 있다.
- 메서드 오버로딩
호출 시그니처를 이용해 오버로딩 구현도 가능하다.
함수 타입 표현식은 안됨
type Foo = (a:number) => number; //함수타입표현식
type Foo = { //호출시그니처
(a:number) : number
}
interface Test {
foo(a:number):void;
foo(a:number, b:number):void;
}
타입별칭과 다른 점
1.union 이나 intersection 타입을 정의할 수 없다.
interface Test = {
name:string;
} | number
이런건 오류발생, intersection으로 만든 타입으로 대수타입을 만들고 싶다면
type Type1 = boolean | Test
이런식으로 타입별칭을 활용해야한다.
2.인터페이스 확장
하나의 인터페이스를 다른 인터페이스가 상속받아 중복코드를 줄일 수 있다.
interface Animal {
name:string;
age:number;
}
interface Dog {
name:string;
age:number;
breed:string;
}
interface Cat {
name:string;
age:number;
color:string;
}
interface mouse {
name:string;
age:number;
height:number;
}
각각 name과 age 프로퍼티가 중복된다.
Animal 인터페이스를 기준으로 Dog, Cat, mouse 인터페이스들이 파생되었다고 볼 수 있다.
그래서 Animal 인터페이스를 확장시킨다.
interface Animal {
name:string;
age:number;
}
interface Dog extends Animal{
breed:string;
}
interface Cat extends Animal{
color:string;
}
interface mouse extends Animal{
height:number;
}
이렇게 확장을 하면서 프로퍼티를 재정의할 수도 있다.
interface Dog extends Animal{
name: "강아지"
breed:string;
}
☘️주의점
원본 프로퍼티값을 A, 재정의한 프로퍼티값을 B라고 할 때
A가 B의 슈퍼타입이어야한다.
- interface를 사용한다면 type 별칭 역시 확장 가능
type Animal = {
name:string;
age:number;
}
interface Dog extends Animal {
breed: string;
}
- 다중확장은 콤마( , )를 사용한다.
interface DogCat extends Dog,Cat {
}
3.선언 합침
타입별칭은 같은 스코프 내에서 동일한 이름을 쓸 수 없다.
하지만 인터페이스는 동일 이름 사용 가능하며, 이러한 인터페이스들은 자동으로 합쳐진다.
interface Animal {
name:string;
}
interface Animal {
age:number;
}
let animal:Animal = {
name:"동물",
age:100
}
☘️주의점
동일한 인터페이스명의 동일한 프로퍼티 타입을 다르게 정의하면 오류발생!
interface Animal {
name:string;
}
interface Animal {
name:number; //오류발생
age:number;
}