두번째 타입스크립트 기초공부 ! 정리

타입스크립트 자잘한 기초 정리~

리액트를 타입스크립트로 생성하기

• yarn create react-app 이름 --template typescript

함수 컴퍼넌트 단위는 어떻게 타입을 지정해 줄까?

리액트에서 이미 지정해 주었다!

const App:React.FC = () => {
return()
}

• react function component 타입! -> React.FC

복잡한 객체 는 어떻게 타입을 지정해줄까?

2가지 방법을 소개해 보겠다! type 과 interface !

Type

export type Restaurant ={
  name:string;
  category:string;
  address:Address;    // 타입 안에 타입 지정, 아래에 타입 만들어 놓음
  menu:Menu[]
  	
  }[]	//배열
}

// 팁! 타입 안에 또 타입을 만들 수 있다.
// 재사용성 증가! 다른 주소에 또 가져다 쓸 수 있어!

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

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


// 타입을 이렇게 가져다 쓴다.
import {Restaurant} from "./model/restaurant"

let data:Restaurant = {
  name:'닉 식당',
  category:'한식',
  address:{
  	city:'seoul',
    detail:'somewhere',
    zipCode:1322411
  },
  menu:[
    {name:'kimchi',price:2000,category:"한식"},
    {name:'bibimbab',price:20000,category:"한식"}]	
}

state에서는 타입을 어떻게? (<>제네릭 문법)

import React,{useState} from 'react';

const App:React.FC = () => {
const [myRestaurant, setMyRestaurant] = useState<Restaurant>(data)

return (
  <div>
  <Store info={myRestaurant}/>
  </div>
);
};

useState 함수도 타입을 지정해 줘야 하는데 그 때 쓰이는 제네릭 문법!

interface 와 <> 제네릭 문법!

//store.tsx 파일

import React from 'react'
import { Restaurant } from './model/restaurant'

interface OwnProps {
info:Restaurant
}

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

함수를 프롭스로 넘겨줄때 타입은?

import React,{useState} from 'react';
import { Address } from './model/restaurant'


const App:React.FC = () => {
...
const changeAddress = (address: Address) => {
	setMyRestaurant({...myRestaurant, address:address})
}

return (
  <div className="App">
  <Store info={myRestaurant} changeAddress={changeAddress}/>
  </div>
);
};

//store.tsx 파일

import React from 'react'
import { Restaurant } from './model/restaurant'

interface OwnProps {
...
changeAddress(address:Address):void      // 리턴이 함수로 바꿔주는 것 뿐일때, 타입이 없음 -> 따라서 타입이 없을 땐 void , 어떠한 타입도 없을 때! 
}

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