한번쯤 들어본 FE 기술

[typescript] type 과 interface

프론트루나 2025. 3. 12. 07:56
반응형

📌 AuthState는 interface로 유지하는 게 좋고, Notification 같은 데이터는 type이 적합해요! 😊 왜! ?

AuthState는 interface가 좋은 이유

  1. 확장 가능 해야 하기 때문
    1. 로그인 상태를 관리하는 데이터, 만약 새로운 속성이 필요하면 extends로 확장할 수 있다.
  2. 객체 기반 상태 관리에서 interface가 더 일반적
    1. 상태 관리 라이브러리에서는 보통 interface를 사용한다.
    2. AuthState처럼 상태를 나타내는 객체는 interface가 더 많이 쓰이는 패턴이다(그래서 유지보수가 쉽다!)

Notification은 type이 더 적합한 이유

  1. type은 유니온 타입(여러값 중 하나)을 쉽게 정의할 수 있음. (=type은 유니온타입을 지원한다.)
  2. Notification은 확장할 필요가 거의 없다.(필요하다면 &를 사용하여 쉽게 연장)

[Typescript] type 과 interface

  • type은 데이터 조합이 필요할 때 사용 → 여러 개의 타입을 합치거나 변경할 때
  • interface는 확장 가능한 구조가 필요할 때 사용→ 상태 관리에서 주로 사용

✅ type

  • “데이터 조합”이 필요할 때 사용
  • 여러 개의 데이터 타입을 합치거나(& 연산자)
  • 부분적으로 변경하거나(Omit, partial)
  • 유니온 타입이 필요할 때

✅ interface

  • extends키워드로 다른 인터페이스를 확장할 수 있음
  • 상태 관리 zustand, redux에서 많이 사용됨

Union Type

  • 여러 개의 타입 중 하나를 선택할 수 있도록 만드는 타입
  • “값이 A 또는 B일 수 있다” 같은 상황에서 사용
type Status = "success" | "error" | "loading"; * 세 개의 값만 가질 수 있다. 

let apiStatus:Status;

apiStatus = "success" // 가능 
apiStauts = "pending" // 오류(정의되지 않은 값)
  • 어떤 상황에 사용하면 좋을까?
    • API 응답 상태 (success | error)
    • 버튼 스타일(primary | secondary | danger)
    • 권한(admin | user | guest)

Omit<>, partial<>, 객체 타입을 합치는 & 연산자

객체 타입을 변형할 때 사용하는 유틸리티 타입

ㄴ 객체에서 일부 속성을 없애거나 선택적으로 만들때 사용

Omit<T, K> 특정 속성을 제거

type User = {
	name : string, 
	email : string, 
	password : string
}

// password 속성을 제외한 새로운 타입 생성
type PublicUser = Omit<User, "password">;

const user:PublicUser = {
	name : "김루나", 
	email : "test@example.com"
}

Partial<T> 모든 속성을 선택적으로 만들때 사용

ex. 사용자 정보를 업데이트할 때(이름만 변경할 수 있음)

type User = {
	name :string;
	email : string, 
	password : string
}

// 모든 속성이 선택적(optional)인 새로운 타입 생성
type UpdateUser = Partial<User>;

const user:UpdateUser = {
	name :"김루나" // 일부 속성만 있어도 됨
}

& 연산

type에만 적용 가능하다. 

type Person = {name:string};
type Employee = {company:string};

// 두개의 타입을 합친 새로운 타입
type Worker = Person & Employee;

const worker: Woker = {
	name : "김루나", 
	company : "google"
}

&는 type에서만 사용 가능하고 interface에서는 extends를 사용해야한다.

interface Person {
	name: string;
}

interface Employee extends Person {
	company:string;
}
반응형