개발/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;
}