typescript) interface와 type의 차이와 utility type

Interface & Type

Interface

• extends로 확장

interface IName {
  name:string
}
interface IData extends IName {
 data:{
   product:string
   ordernumber:number
 }
}
const salesProduct:IData = {
  name:'candy',
  data: {
  	product:'orange taste candy',
  	ordernumber: 14512245
  }
}

---

Type

• &(엔퍼센드)로 확장한다.
• Type은 주로 원시값, 튜플, union 타입을 정의하지만 객체 타입이 저장이 불가능한 것은 아니다.

type TName = {
  name:string
}
type TDATA =  TName & {
 data:{
   product:string
   "production-data":number
 }
}
const salesProduct:TDATA = {
  name:'candy',
  data: {
  	product:'orange taste candy',
  	"production-data": 14512245
  }
}

---

Interface는 interface의 이름이 같으면 자동확장된다.

IData의 프로퍼티에 origin이 추가되면서, salesProduct2에 오류가 발된다.

---

결론은 인터페이스와 타입 별칭중 일반적으로는 인터페이스를 지향하지만 무엇이든 사용할 수 있다.
복잡한 타입 union이나 튜플 등을 사용할때는 타입 별칭을 사용한다.

---

Utility type

유틸리티 타입같은 경우, type allias를 많이 사용한다.

Pick : 하위 집합 내에 사용할 key를 구체적으로 명시
Omit : 하위 집합 내 제거할 key를 구체적으로 명시
Partical: 하위 집합 내 key 중 하나를 사용(명시하지 않음)
Record<key type, value type>: type,interface를 키:값 형식으로 매핑

---

Pick

하위 집합 내에 사용할 key를 구체적으로 명시

interface IBeachInfo {
  beachname: string;
  beachlocation: string;
  isopen: boolean;
}
 
type TBeachPreview = Pick<IBeachInfo, "beachname" | "beachlocation">;
 
const beach: TBeachPreview = {
  beachname: "Gyeong-Po",
  beachlocation: "somewhere"
};

---

Omit

하위 집합 내 제거할 key를 구체적으로 명시한다.
복수로도 제거가 가능하다.

interface IStudyInfo {
  title: string
  description: string
  completed: boolean;
  createdAt: number;
  member: string[]
}
 
type TStudyPreview = Omit<IStudyInfo, "createdAt">;
 
const study:TStudyPreview  = {
  title: "react-handling-skills",
  description:'now we learning how to adjust tailwind.css at react ',
  completed: false,
  member: ['Myungseong','fame','eremes','reputation']
};
 
type TStudySimpleInfo = Omit<IStudyInfo, "completed" | "createdAt" | "member">;
 
const studySimpleInfo: TStudySimpleInfo = {
  title: "Deepdive study",
  description: "we study at pm 10:00 to am 12:00",
};

---

Partical

interface IFeeds {
  username: string;
  description: string;
}
 
function replyFeeds(todo: IFeeds, fieldsToUpdate: Partial<IFeeds>) {
  return { ...todo, ...fieldsToUpdate };
}
 
const feedsData = {
  username: "myungseong1114",
  description: "타스는 어렵지만 재밌다.",
};
 
const feedsContent = replyFeeds(feedsData, {
  description: "자세한 내용은 타스 핸드북으로",
});

---

Record

별개의 Type,Interface를 키:값 형식으로 매핑. 재활용도를 높일 수 있다.

interface IDevInfo {
  end: string;
  age: number;
  desc: string;
}
 
type TDevName = "eremes" | "fame" | "reputation";

type TPersonnelEvaluation = {
  point: number;
  report: string;
}
const devList: Record<TDevName, IDevInfo> = {
  eremes: { end:'front', age: 10, desc: "Persian" },
  fame: { end:'back', age: 5, desc: "Maine Coon" },
  reputation: { end:'full', age: 16, desc: "British Shorthair" },
};
 
const SecondQuarterPersonnelEvaluation: Record<TDevName,TPersonnelEvaluation> = {
  eremes: {point: 100, report:'he is genius'},
  fame: {point: 110, report:'he is really genius'},
  reputation: {point: 100, report:'he is super genius'}
}