타입스크립트

Object에 쓸 수 있는 interface 문법 (8)

알럽유 2024. 9. 18. 02:36
728x90

1. interface를 사용하여 객체 타입 정의하기

 

interface 키워드는 객체의 구조를 미리 정의할 때 사용됩니다. 예를 들어, 특정 속성을 가진 객체를 정의하고 싶다면, 아래와 같이 interface를 사용하여 타입을 정의할 수 있습니다.

interface Square {
  color: string;
  width: number;
}

let 네모: Square = { color: 'red', width: 100 };

 

interface는 객체와 비슷한 형태로 작성되며, 객체의 속성 타입을 미리 지정할 수 있습니다.

type alias와 유사한 기능을 제공하지만, 주로 객체의 타입을 정의하는 데 자주 사용됩니다.

한 줄의 끝에는 콤마(,) 대신 세미콜론(;)을 사용할 수 있습니다.

 

2. interface의 확장 (Extends)

interface의 강력한 장점 중 하나는 extends 키워드를 사용하여 다른 interface를 확장할 수 있다는 점입니다.

이를 통해 중복되는 속성을 줄이고, 여러 인터페이스의 속성을 결합하여 사용할 수 있습니다.

 

예를 들어, Student와 Teacher 인터페이스가 필요하고,

Student에는 name 속성이, Teacher에는 name과 age 속성이 필요하다고 가정해봅시다.

interface Student {
  name: string;
}

interface Teacher extends Student {
  age: number;
}

 

위 예시에서 Teacher 인터페이스는 Student를 확장하여 name 속성을 포함하고, 추가적으로 age 속성을 가집니다. 이제 Teacher 타입은 name과 age 두 속성을 모두 요구합니다.

 

3. type 키워드와의 차이점

type과 interface는 거의 유사한 기능을 제공합니다. 하지만 두 가지 차이점이 있습니다.

 

interface는 extends 키워드를 사용하여 다른 인터페이스를 확장할 수 있지만,

type은 & 기호를 사용해 객체 두 개를 합칠 수 있습니다.

// interface 방식
interface Animal {
  name: string;
}
interface Cat extends Animal {
  legs: number;
}

// type 방식
type Animal = {
  name: string;
};
type Cat = Animal & { legs: number };

 

위 예시에서 interface는 extends를 사용하고, type은 & 기호를 사용하여 두 타입을 결합합니다. 결과적으로 Cat 타입은 name과 legs 속성을 모두 가집니다.

 

interface는 타입 이름의 중복 선언을 허용합니다. 타입 이름이 중복될 경우,

마치 extends 한 것처럼 동작하여 모든 속성을 합칩니다.

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

위와 같은 경우 Animal 타입은 name과 legs 속성을 모두 가지게 됩니다.

이는 외부 라이브러리 사용 시 타입을 덮어쓰거나 확장할 때 매우 유용합니다.

 

반면, type은 중복 선언을 허용하지 않으며, 동일한 이름의 타입을 다시 선언하려고 하면 오류가 발생합니다.

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

 

 

4. & 연산자를 사용한 타입 합성

 

interface와 type 모두 & 연산자를 사용하여 두 개의 타입을 결합할 수 있습니다. 이를 교차 타입(Intersection Type)이라고 부릅니다.

 

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

let 변수: Student & Teacher = { name: 'Kim', age: 90 };

 

위와 같은 코드에서 Student와 Teacher 인터페이스를 & 연산자로 결합하여 새로운 타입을 생성할 수 있습니다.

이 경우 변수는 name과 age 속성을 모두 가져야 합니다.

 

5. 타입 확장 시 주의할 점

 

interface를 확장하거나 & 연산자로 타입을 결합할 때, 중복된 속성이 있을 경우 주의해야 합니다.

예를 들어, 아래의 경우를 살펴보겠습니다.

 

interface Animal {
  name: string;
}
interface Dog extends Animal {
  name: number; // 오류 발생
}

 

위 코드에서는 Animal 인터페이스의 name 속성이 string 타입이고,

Dog 인터페이스의 name 속성이 number 타입으로 중복되었기 때문에 오류가 발생합니다.

동일한 이름의 속성이 다른 타입을 가질 때는 에러가 발생합니다.

 

두 속성이 동일한 타입을 가질 경우에는 오류 없이 하나로 합쳐집니다.

 

interface Animal {
  name: string;
}
interface Dog {
  name: string; // 같은 타입
}

let 변수: Dog & Animal = { name: '멍멍' }; // 오류 없음

 

일반적으로 type 키워드는 대부분의 상황에서 유연하게 사용될 수 있으며, 엄격한 타입 검사와 일관성을 제공합니다.

반면, interface는 주로 객체의 타입을 정의할 때 사용되며, 확장성이 필요한 경우 유용합니다.

외부 라이브러리와의 통합이나 여러 사람이 함께 작업하는 코드에서는 interface를 사용하는 것이 더 적합할 수 있습니다.