[TS] 실전에서 사용하는 타입스크립트 문법

1. 타입 만들어서 사용하기

- 타입을 만드는 두 가지 방법

- Type, Interface

- 세세하게 쪼개서 만들수록 유용하다

let data = {
	name = '계피;,
    category: '햄스터',
    address: {
        city : 'gyeonggi-do',
        detail : 'uijeongbu',
        zipCode: 1234435,
    },
    favorite : [{name: 'sunflower seeds', category:'seed', price: 1000}],
}

export type Pet = {
    name: string;
    category; string;
    address: Address;
    favorite: Favorite[]
}

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

export type Favorite = {
    name: string;
    categort: string;
    price: number;
}

 

 

2. Props 받을 때도 타입으로 만들기

interface OwnProps {
    info: Pets
}

const Store: React.FC<OwnProps>= ({info}) => {
    return (
        <div>{info.name}</div>
    )
}

export default Store

 

 

3. type은 &를 interface는 extends를 활용하자.

interface OwnProps extends Menu {
    showBestMenuName(name:string):string
}

 

4. type에서 이미 선언한 타입에서 원하는 속성만 빼고 싶을 땐 Omit을, 원하는 속성만 가져오고 싶을 땐 Pick을 사용하자. (또는 '?' 문법 사용)

export type AddressWithoutZip = Omit<Address, 'zipCode'>

 type Address = {
    city:string;
    detail:string;
    zipCode:number;
 }

 type AddressWithoutZip = {
    city:string;
    detail:string;
}

export type AddressOnlyCity = Pick<Address, 'city'>

AddressOnlyCity = {
    city:string;
}