[RN] 타입스크립트 개념 정리 (3) - 인터페이스란?

 

 

 

 

😀 1. 인터페이스란 ? 

타입스크립트에서 객체의 구조나 클래스를 위한 타입을 지정할 때 사용하는 것이다.

인터페이스는 객체가 가져야 할 속성과 그 속성들의 타입을 명확하게 지정하며,

객체나 클래스가 일정한 구조를 따르도록 강제할 수 있다.

 

interface Person {
  name: hihilong;
  age: number;
  isStudent: boolean;
}

const person: Person = {
  name: "hihilong",
  age: 25,
  isStudent: true,
};

 

 

 

📌 이 부분 한번 보자 !

const person: Person = {
  name: "hihilong",
  age: 25,
  isStudent: true,
};

여기서 person: Person 이 표현은 TypeScript에서 변수 person의 타입이 Person 인터페이스를 따른다는 것을 의미한다.

이 구문을 통해 person이라는 변수가 Person 인터페이스에서 정의된 구조와 타입을 준수해야 한다는 것을 알려준다. 

 

 

 

 

이렇게 선언된 객체타입은 변수의 타입이나 파라미터의 타입으로도 사용할 수 있고

다른 인터페이스에서 참조하는 것도 가능하다.

interface Profile {
	id:number
	username:string;
	displayName:string;
}

interface Relationship {
	from:Profile;
    	to:Profile;
}

const relationship : Relationship = {
	from: {
    id: 1,
    username:'hihilong',
    displayName: "hihilong",
},
to: {
	id:2,
    username:"byebyelong",
    displayName:"byebyelong",
    },
};

 

 

---

2. 객체 사이의 연관성 나타내기

• from - to 는 두 객체 사이의 연관성이나 연결(예: 메시지 전송, 친구 요청, 배송 경로 등)을 표현할 때 사용=
• from 부분은 관계의 시작점을 나타냄.
• to 부분은 관계의 도착점 나타냄.
• 예를 들어, id: 1, username: 'hihilong'인 사용자가 from입니다. 이 사용자가 무언가를 시작한것(예: 친구 요청을 보냈다),
• id: 2, username: 'byebyelong'인 사용자가 to 라면 이 사용자는 from 사용자의 행동을 받는 입장이다.(예: 친구요청 받음)

interface Email {
  from: string;
  to: string;
  subject: string;
  body: string;
}

const email: Email = {
  from: "hihilong@example.com",
  to: "byebyelong@example.com",
  subject: "Meeting Reminder",
  body: "Don't forget about the meeting tomorrow at 10 AM.",
};

console.log(`Email sent from ${email.from} to ${email.to}`);

---

 

3. 상속 나타내기

 

• 기존 interface 타입에 필드를 더 추가할 때에는 상속을 통해 처리할 수 있다.
• 상속은 객체지향 프로그래밍(OOP)에서 자주 사용되는 개념으로, 클래스나 인터페이스 간의 관계를 나타낸다.
• 상속을 통해 하위 클래스 또는 하위 인터페이스가 상위 클래스나 인터페이스의 속성과 메서드를 물려받을 수 있다.
• 이를 통해 코드의 재사용성과 확장성을 높일 수 있다.
• extends 를 통해 상속을 나타낸다 
• 정리하자면 상속은 재사용과 확장에 초점을 맞추며, 상위 구조(클래스 또는 인터페이스)를 하위 구조가 물려받아 새로운 기능을 추가하거나 기존 기능을 재사용합니다.

interface Animal {
  name: string;
  speak(): void;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = {
  name: "Rex",
  breed: "Golden Retriever",
  speak() {
    console.log("Woof!");
  },
};

 

=> 이렇게 하면  animal 인터페이스는 name 과 speak 메서드를 가지고 있었는데 

이 animal 을 상속(extends) 하여 breed 라는 추가적인 속성을 가질 수 있다.

 

 

 

 

**
위의 from - to 와 상속(extends) 의 차이점은 ? ? 
from - to 는 단순히  관계나 연결을, 상속은 확장과 재사용을 목적으로 한다.

 

 

 

 

---

4. 선택적 속성

전에 타입을 다룰 때에도 선택적 속성에 대해서 이야기 했었다.

인터페이스도 마찬가지고 옵셔널 속성을 다룰 수 있다.

 

interface Profile {
	id:number,
    username:string;
    photoURL? :string;  //photoURL 에 옵셔널 속성 부여 (안넣어도댐)
    
}

const profile: Profile = {
	id:1,
    username:"hihilong",
};
//이렇게 들어가도 괜춘하다는 얘기다

 

---

 

📌 5. type 과 interface 의 차이점 ? ? 

사실 둘 다 객체, 함수, 배열 등의 구조를 정의하는 것이기 때문에 아주 비슷하게 보일 수 있다.

물론 ~ 비슷하게보일수있지만 몇가지 중요한 차이점이 있다.

 

1️⃣ 5-1.  선언방법의 차이

• 인터페이스는 interface 키워드를 사용하고 주로 객체의 구조를 정의한다.
• type 은 type 키워드를 사용하고 객체 뿐만 아니라 유니언 타입, 튜플, 함수 등 조금 더 다양한 타입을 정의할 수 있다. 

 

 

2️⃣ 5-2. 확장의 차이

 

• 인터페이스는 extends 키워드를 사용하여 확장하고 여러 인터페이스를 상속받을 수 있다.
• 타입은 & 연산자를 사용해 여러 타입을 결합할 수 있다. 여러 타입을 합쳐 새로운 타입을 만들 수 있다.

//interface로 확장
interface Person {
  name: string;
  age: number;
}

interface Student extends Person {
  grade: string;
}


//type 으로 확장
type Person = {
  name: string;
  age: number;
};

type Student = Person & {
  grade: string;
};

 

 

3️⃣ 5-3. 선언병합의 차이

• 인터페이스는 선언 병합(Declaration Merging)이 가능하다.
• 즉, 동일한 스코프 내에 같은 이름의 인터페이스를 여러 번 선언할 수 있다. => 타입스크립트 엔진이 자동으로 하나로 합치기 때문에! 
• 타입은 같은 이름으로 여러번 선언할 수 없다. = 선언병합이 불가능하다. 

 

 

📌 선언병합에 대해 조금 더 살펴보자

interface Person {
  name: string;
}

interface Person { 
  age: number;
}

// => 이걸 합쳐서 밑의 코드로 인식해버린다.

interface Person {
	name: string;
	age: number;
}

타입은 이렇게 하는게 불가능하다. 

type Person = {
  name: string;
};


type Person = { 
  age: number;
};


// 이미 위에서 Person 의 타입을지정해주었기 때문에 오류남...​

인터페이스에도 주의사항이 있다.
동일한 이름의 인터페이스들이 동일한 이름의 프로퍼티를 서로 다른 타입으로 정의한다면 오류가 발생한다.

interface Person {
  name: string;
}

interface Person {
  name: number;
  age: number;
}

// name 끼리 충돌나서 오류남 ㅠ

 

 

 

 

결론 !

타입이 좀 더 유연하게 사용할 수 있고 객체 뿐만 아니라 함수, 튜플, 유니언타입 등 다양한 타입을 정의할 수 있다.
인터페이스는 보통 객체 구조를 정의하는 데 사용하고 클래스와 상호작용할 때 많이 사용한다.


=> 따라서 객체의 형태를 정의하고 클래스와 상호작용 할때에는 인터페이스를, 다양한 타입을 조합하거나 복잡한 타입을 정의해야할 때에는 타입을 사용하는 것이 좋겠다 ~

 

 

 

 

 

 

reference

책 <리액트 네이티브를 다루는 기술 - 김민준> 

https://ts.winterlood.com/