리액트 타입스크립트 제네릭 활용 예시

강의내용추가

src - [module]폴더에 타입용 .ts 파일 생성

export type Restaurant = {
    name: string;
    menu: Menu[];
    address:Addr;
}

export type Addr = {
    city:string,
    zipcode:number,
}

export type AddrWithoutZip = Omit<Addr,'zipcode'>//빼기:omit, 하나만:pick

export type Menu = {
    name:string,
    price:number
};

export type APIRes<T> = {//T: 위의 타입중에 하나
    data:T[],
    totalPage:number,
    page:number
}

export type RestRes = APIRes<Restaurant>
export type MenuRes = APIRes<Menu>

사용하기

App.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import Store from './Store'
import {Addr, Restaurant} from './model/restaurant'
import BestMenu from './BestMenu'

let data:Restaurant = {
  name:'yujin',
  menu:[{
    name:'latte',
    price:3000,
  }],
  address:{
    city:'Daejeon',
    zipcode:1001
  }
}

const App:React.FC = () => {
  const [myRest, setMyRest] = useState<Restaurant>(data) 
  const changeAddr = (address:Addr) => {
    setMyRest({...myRest, address:address})
  }
  const showBestMenu = (name:string) => {
    return name
  }
  return (
    <>
      <Store info={myRest} changeAddr={changeAddr}/>
      <BestMenu name='불고기피자' category='pizza' showBestMenu={showBestMenu}/>
    </>
  )
}

export default App

 

Store.tsx

import { Addr, Restaurant } from "./model/restaurant"

interface OwnProps{
    info:Restaurant,
    changeAddr(addr:Addr):void//리턴값없음
}

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

 

BestMenu.tsx

import { Menu } from "./model/restaurant"

// interface OwnProps extends Menu{
//     category:string,
//     showBestMenu(name:string):string
// }
interface OwnProps extends Omit<Menu, 'price'>{
    category:string,
    detail?:string,//있어도되고 없어도되고
    showBestMenu(name:string):string
}
const BestMenu:React.FC<OwnProps> = ({name, category, showBestMenu}) => {
  return (
    <div>{name}</div>
  )
}

export default BestMenu

---

 

1. Function Component

import React from 'react'
// props : {items:string[]}처럼 일일이 지정해주는데신 @types/react패키지에서 정해준것을 사용
// FC는 FunctionComponent의 약자로 이미 제네릭타입
const Todos:React.FC<{items:string[]}> = (props) => {
    return (
      <ul>
          {props.items.map(item => <li key={item}>{item}</li>)}
        {/* <li>Learn React</li>
        <li>Learn TS</li> */}
    </ul>
    );
}
export default Todos

if it includes children or something else inside:

interface PropsType {
    href?:string;
    children?:React.ReactNode;
}

export const LinkStyle:React.FC<PropsType> = (props) => {
  return (
    <StyledLinkWrap href={props.href}>
        {props.children}
    </StyledLinkWrap>
  );
};

you can also use for styled component like this:

interface PropsType {
  primary?: string;
}

const StyledButton = styled.button<PropsType>`
...
  ${(props) =>
    props.primary &&
    css`
      ...
    `}
`

https://www.youtube.com/watch?v=V9XLst8UEtk&list=RDCMUCfBvs0ZJdTA43NQrnI9imGA&start_radio=1&rv=V9XLst8UEtk&t=2162 

https://stackoverflow.com/questions/59106742/typescript-error-property-children-does-not-exist-on-type-reactnode