[TypeScript] 객체의 타입 interface

🐣 들어가기 전에!

---

이번에는 객체의 타입 2탄인 것인가! 지난번 객체의 타입을 정리할 때는 readonly에 대해서만 다뤘었는데, 이번에는 interface에 대해서 다뤄보자

 

 

객체의 타입 기본개념과 readonly에 대한 정리글

[TypeScript] 객체의 타입과 readonly

 

 

🐣 interface

---

1. 개념

객체에 타입을 지정하는 것. TypeScript에서 객체(Object)의 구조를 명확히 정의하여 타입을 선언하는 도구. 코드에서 해당 인터페이스를 구현한 객체는 인터페이스에서 정의한 속성과 타입을 준수하며, 코드의 가독성을 높이고 유지보수를 용이하게 함.

 

2. 특징

• interface의 extends / type의 &(intersection) : extends는 복사, &는 조건 만족
• 중복 선언 여부 : interface 가능 / type 불가능 : interface의 경우 중복 선언을 하게 되면 합쳐지는 개념
• 중복 속성 에러 발생 여부 : interface의 경우 extend 중복 속성 발생시 바로 에러 처리 / type의 경우 바로 에러처리 안하고 추후 선언후 할당때 발생 

 

3. 코드로 살펴보기

interface와 type alias 비교

type alias에서 {} 객체로 집어 넣던 것을 interface에서는 아래와 같이 할 수 있음.

// type alias
type Square = { color: string, width: number };

//여기서는 위에 type과 동일
interface Square { 
    color: string,
    width: number
};

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

 

interface

// 사용자 인터페이스 정의
interface User {
    name: string;  // 이름 속성은 문자열 타입
    age: number;   // 나이 속성은 숫자 타입
    isAdmin: boolean;  // isAdmin 속성은 불리언 타입
}

// 사용자 객체 생성
let user: User = {
    name: "Alice",
    age: 30,
    isAdmin: true
};

console.log(user.name);  // 출력: Alice

 

 

 

🐣 interface 와 type alias의 차이

---

0. 기본 코드

다음의 기본 코드로 차이점을 정리해보겠음!_!

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

let 학생:Student = { name: 'ham' }
let 선생:Teacher = { name : 'hailey', age : 20}

 

참고로 type alias에 대해 헷갈리다면 다음 정리글 참고!

[TypeScript] 타입 변수 type alias

 

1. extends / &(intersection)

interface (extends)

interface의 장점은 extends로 복사 가능하다는 

 

아래의 코드에서 살펴보면, interface Student1 타입을 extends 로 복사한 것을 볼 수 있음.

그러면 Teacher1의 타입은 name:string, age:number 되는 것!

interface Student1 {
    name: string;
}
interface Teacher1 extends Student1{ // extends
    age : number
}

let 학생1:Student = { name: 'ham' }
let 선생1:Teacher = { name : 'hailey', age : 20}

 

type alias ( & : intersection type)

interface의 extends랑 다른점 : &(intersection type)은 두 타입을 전부 만족하는 타입
interface의 extends는 복사의 개념

 

아래 코드의 경우 전체를 다 만족하는 개념이라 생각하면 됨

type Student2 = { name: string };
type Teacher2 = { age: number } & Student2;

 

 

2. 중복 선언

interface (중복 선언 가능(합쳐짐))

• 중복 선언이 가능
• 외부 라이브러리 같은 경우 interface 많이 사용
• 추후 타입에 어떤 것을 추가하는 것이 용이
• 다른 사람이 이용 많이 할 것 같은 object 타입 정할 때 interface 사용 가능

interface StudentTest{
    name: string;
}

interface StudentTest{
    score: number;
}

let 학생Test: StudentTest = { name: 'ham', score: 100 };

 

 

type alias (중복 선언 불가능)

다음 코드의 경우 error

type StudentTest2 = { name: string };
type StudentTest2 = { score: number }; //error 중복 선언 불가능

 

 

만약 extends 사용시 중복 속성 발생할 경우? 

에러가 됨

interface StudentTest3{
    name: string;
}

interface TeacherTest3 extends StudentTest3{
    name: string; // 똑같아서 ㄱㅊ
    name: number; // extends로 가져온것에 name : string 되어있기 때문에 name:number불가
}

 

 

type alias 에서 & 사용할 때 중복 속성 발생하면?

미리 에러가 나지 않아서 주의!

•  & : 합치는게 아니라 왼,오른쪽 둘다 만족하는 타입이기 때문
• name이 name이고 number이고 둘다 만족할 수는 없음

type StudentTest4 = { name: string };
type StudentTest55 = { name: number } & StudentTest4; //여기서는 에러 발생 안함

// let 학생Test1: StudentTest55 = { name: 'ham' }; //여기 name에서 에러 발생

---

interface도많이쓰게되징~