#19 [5장_3] 제시된 코드에서 타입오류가 발생한 이유를 설명하고, 유틸리티 타입을 통한 해결 방법을 알려주세요!

[hyeyoonS]

❓문제

제시된 코드에서 타입 오류가 발생한 이유를 설명하고, 유틸리티 타입을 통한 해결 방법을 알려주세요!

interface Post {
  title: string;
  tags: string[];
  content: string;
  thumbnailURL?: string;
}

(...)

const noTitlePost: Post = { // :x:
  content: "",
  tags: [],
  thumbnailURL: "",
};

🎯답변

오류 발생 이유

• noTitlePost는 Post타입을 받고 있는데, Post타입에 있는 title프로퍼티가 noTitlePost에 존재하지 않기 때문에 타입 오류가 발생합니다.

해결 방법

• Omit으로 Post 타입에서 title 프로퍼티를 제거한 타입으로 변수의 타입을 정의해 주면 됩니다.

const noTitlePost: Omit<Post, "title"> = {
  content: "",
  tags: [],
  thumbnailURL: "",
};

---

Omit

• 특정 객체 타입으로부터 특정 프로퍼티 만을 제거하는 타입
• Omit 타입에 T가 name, age가 있는 객체 타입이고 K가 name 이라면 결과는 name을 제외하고 age 프로퍼티만 존재하는 객체 타입이 된다.

[drizzle96]

변수의 이름처럼 Post에서 title 프로퍼티가 제외된 객체 타입을 만들어야 하며 Omit를 사용하여 이를 처리합니다.

const noTitlePost: Omit<Post, 'title'> = {
  content: '',
  tags: [],
  thumbnailURL: '',
}

[qooktree1]

• Pick 유틸리티 함수 사용

  
  interface Post {
  title: string;
  tags: string[];
  content: string;
  thumbnailURL?: string;
  }

const noTitlePost: Pick<Post, 'content' | 'tags' | 'thumbnailURL'> = { content: "", tags: [], thumbnailURL: "", };