[실무용] TypeScript 10가지만 알면 됨

• React + TS 를 위한 글입니다.
• 이걸로 TS 공부할 생각 마세요. 이미 TS를 배운 사람을 위한 치팅시트입니다.

1. 리액트 타입스크립트 컴포넌트

react의 타입은 React.FC이다.

const App:React.FC = ()=>{
	return (
    	<div>
        	(생략)
        </div>
   	)
}	

2. 타입 생성 및 사용

일단 타입 생성하고

// (/model/restaurant.ts)

export type Restaurant = {
	name : string;
    category : string;
    address : {
    	city : string;
        detail : string;
        zipCode : number;
	};
    menu : {
    	name : string;
        price : number;
        category : string;
    }[] 
}

사용하는 방법은

//(App.tsx)

import {Restaurant} from './model/retaurant'

let data:Restaurant = { 포맷에 맞는 데이터 }


const App:React.FC = ()=>{
	return (
    	<div>
        	<Location info={data}/>
        </div>
   	)
}	

특정 type의 데이터를 하위 컴포넌트의 props로 넘겨줄 땐,

//(Location.tsx)
import {Restaurant} from './model/retaurant'

interface OwnProps {
	info : Restaurant
}

const Location:React.FC<OwnProps> = (props)=>{
	return(
    	<div>Location</div>
    
    )
}

export default Location

3. type으로 type 만들기

위에서 정의한 Restaurant 타입을 아래와 같이 만들 수도 있다.

// (/model/restaurant.ts)

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;
}

4. useState에서 type 쓰기

useState를 통해 특정 타입의 상태를 만드려면

//(App.tsx)
import {useState) from 'react'
import {Restaurant, Address} from './model/retaurant'

let data:Restaurant = { 포맷에 맞는 데이터 }

const App:React.FC = ()=>{
	const [myRestaurant, setMyRestaurant] = useState<Restaurant>(data)
    
	return (
    	<div>
        	(생략)
        </div>
   	)
}	

5. props로 변수, 함수 전달

<Location> 컴포넌트에 변수와 함수 타입을 설정해서 전달해야 한다.

//(App.tsx)
import {useState) from 'react'
import {Restaurant, Address} from './model/retaurant'

let data:Restaurant = { 포맷에 맞는 데이터 }

const App:React.FC = ()=>{
	const [myRestaurant, setMyRestaurant] = useState<Restaurant>(data)
    const changeAddress = (address:Address)=>{
    	setMyRestaurant({...myRestaurant, adress:adress})
    
    
	return (
    	<div>
        	<Location info={data} changeAddress={changeAddress}/>
        </div>
   	)
}	

props의 타입을 직접 정의해야 하는 부분이 중요하다.

//(Location.tsx)
import {Restaurant} from './model/retaurant'

interface OwnProps {
	info : Restaurant,
    changeAddress(address:Address):void
}

const Location:React.FC<OwnProps> = (props)=>{
	return(
    	<div>Location</div>
    
    )
}

export default Location

6. interface extends

이미 정의된 type를 참조해서 새로운 타입을 만들 때 쓴다.

//(./BestMenu.tsx)

...

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

const BestMenu:React:FC<OwnProps> = ({name, price, category, showBestMenu}) => {
	return(
    	<div>BestMenu</div>
    )
}

export default BestMenu

//(App.tsx)

...

const App:React.FC = ()=>{
	const showBestMenu = (name:string)=>{
    	return name
    }
    
    
	return (
    	<div>
        	<BestMenu name="맛있는 음식"  showBestMenu={showBestMenu}/>
        </div>
   	)
}	

7. type으로 extends

위에서는 interface로 props의 type을 extends했다.
type으로도 extends와 같은 기능을 구현할 수 있다.

아래와 같이 &를 활용하면 된다.

//(./BestMenu.tsx)

...

type OwnProps = Menu & {
	showBestMenu(name:string):string
}

...

8. Omit으로 기존 type 수정

앞서 정의한 type 중, Address의 zipCode를 뺀 type을 만들고 싶다면

// (/model/restaurant.ts)

...

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

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

아래와 같이 extends와 결합하여 사용할 수도 있다.
price에 대한 정보를 props에서 받지 않으려면 아래와 같이 Omit을 쓰면 된다.

//(./BestMenu.tsx)

...

interface OwnProps extends Omit<Menu,'price'>{
	showBestMenu(name:string):string
}

const BestMenu:React:FC<OwnProps> = ({name, category, showBestMenu}) => {
	return(
    	<div>BestMenu</div>
    )
}

export default BestMenu

9. API 응답에서 type

API의 응답 데이터가 Restaurant, Menu 와 같을 땐,
아래와 같이 여러 타입에 대해 대응할 수 있다.

export type ApiResponse<T> = {
	data:T[],
    totalPage:number,
    page:number
}

export type RestaurantRespone = ApiResponse<Restaurant>
export type MenuRespone = ApiResponse<Menu>