조금더... 힘내보아...

타입스크립트 한발 더 !

extends ( 보태줘 )

• 똑같은 코드를 적을 필요 없고, 코드량을 줄일 수 있음!

export type Address = {
  city:string;
  detail:string;
  zipCode:Number;
}

export type Menu = {
  name:string;
  price:number;
  category:string;
}  // + function 메뉴 타입에 무언가를 더 넣고 싶을때 !


//BestMenu.tsx
import React from 'react'
import { Menu } from './model/restaurant'

interface OwnProps extends Menu {   // 메뉴를 가져와! 재사용!
	showBestMenuName(name:string):string
}

//타입일 경우
type OwnProps = Menu & {   
	showBestMenuName(name:string):string
}

const BestMenu:React.FC<Ownprops> = ({name, price, category,showBestMenuName}) => {
return (
<div>{name}</div>
)
}

export default MestMenu

Omit ( 빼줘! )

extend 반대로, 타입에 요소를 빼려면?

export type Address = {
  city:string;
  detail:string;
  zipCode:Number;
}

// 여기서 zipCode가 필요 없다면??

export type AddressWithoutZip = Omit<Address, 'zipCode'>
  //결과는 !
  //export type Address = {
  //city:string;
  //detail:string;
  //}
  

+추가)

export type Address = {
  city:string;
  detail:string;
  zipCode?:Number;
}

• ?연산자를 통해서 있어도 되고 없어도 되는 ! Omit 처럼 사용 가능하다.
  하지만, 꼭 필요할 때도 그냥 넘기기 때문에 주의...!

Pick ( 선택해줘!)

이번에는 타입에 요소 하나만 선택해 보여주고 싶다면??

export type Address = {
  city:string;
  detail:string;
  zipCode:Number;
}
// 여기서 city만 보여주고 싶다면

export AddressOnlyCity = Pick<Address,'city'>
  
  // 결과는 !
  // export AddressOnlyCity ={
  // city:string; 
  // }

⭐️API call을 타입스크립으로 만들 때!

Api를 받을때도 타입을 지정해줄 수 있다!

export type apiResponse<T>{
	data:T[],   //배열로 들어오는 데이터!
    totalPage:number,  // 다른 정보
    page:number // 다른 정보
}
// api 응답 !
export type RestaurantResponse = ApiResponse<Restaurant>
export type MenuResponse = ApiResponse<Menu>