[타입스크립트(TypeScript)] 타입스크립트 실전

리액트 프로젝트와 TS 설치하기 

npx create-react-app "이름" --template typescript
#or
yarn create react-app "이름" --template typescript

 

기존 프로젝트에 TS 설치하기

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
#or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

 

컴포넌트 함수의 타입

타입스크립트로 함수를 작성할 땐 함수의 매개변수와 return값의 type을 지정한다.

함수 컴포넌트의 타입 지정 ( React.FC )

//app.tsx
const App: React.FC = () => {
  return <div></div>;
};

export default App;

 

 

데이터의 타입 정의하기

보통 타입들은  Types폴더를 만들고 Type.ts 파일에 모아 놓고 관리를 한다.

// App.tsx
let data = {
  name: '강식당',
  catagory: '음식점',
  address: {
    city: '평택시',
    detail: '지산동',
    zipcode: 12345678,
  },
  menu: [
    { name: '로제 파스타', catagory: 'PASTA', price: 200000 },
    { name: '김치볶음밥', catagory: 'RICE', price: 1000 },
    { name: '오리 주물럭', catagory: 'MEAT', price: 10 },
  ],
};

위 데이터 타입들을 정의해 준다.

//src/types/types.ts

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

 

Type의 Type 만들기

type의 type을 만들어서 가독성이 더 좋게 refactor 할 수 있다. 객체 안에 여러 타입들이 있다? 빼서 따로 타입 지정 해주자!!

 

#before

 

#after

 

useState의 타입 

useState에 초기값으로 data를 넣었을 때 초기값의 타입을 정의해 주어야 하는데

이때 제네릭(Generic)< >을 사용한다.

useState는 리액트에서 제공하는 함수이고 이 함수의 타입이 리액트 입장에선 무엇인지는 모른다. 

그렇기 때문에 useState를 사용할 때 < > 제네릭 타입을 쓰겠다.라고 선언 하는 것.

const [restaurant, setRestaurant] = useState<Restaurant>(data);

 

props로 데이터 받고 props의 타입 정의 하기

TS에서 함수는 매개변수와 return의 타입을 정해주어야 하기 때문에 props의 타입 또한 지정해주어야 한다.

props는 따로 타입을 지정해 준다.

 

# interface로 타입 정하기 어떤 데이터를 받고 그 타입은 무슨 타입인지 정의하기

 + 리액트 FC 컴포넌트는 제네릭으로 어떤 타입을 받을지 선언해 줄 수 있다.

import React from 'react';
import { Restaurant } from './Types/types';

interface OnlyProps {
  data: Restaurant;
}

const Store: React.FC<OnlyProps> = (props) => {
  return <div></div>;
};

export default Store;

 

Props로 함수 보내기 

#1 함수 생성

  const changeAdress = (address: Address) => {
    setRestaurant({ ...restaurant, address: address });
  };

함수는 매개변수와 return타입을 지정해주어야 한다. 때문에 adress타입을 이전에 만들어 놓았던 Address로 지정.

 

#2 Props로 받은 함수의 타입 지정하기

함수의 인자로는 address를 받고 return은 void를 해준다. void는 return값이 명확하지 않다. any랑 비슷하다고 생각하면 된다. 하지만 return값이 예를 들어 true를 반환하는 함수라면 return타입을 boolean으로 지정해주어야 한다.

//Store.tsx
interface OnlyProps {
  data: Restaurant;
  changeAdress(address:Address):void
}

 

 

extends(확장하다)

원래 있던 타입에 새로운 타입을 추가할 때 사용한다. 하나의 타입을 추가한다고 타입을 새로 작성하게 되면 얼마나 비효율 적인 작업인가.

 

# interface에서의 extends

interface OnlyProp extends Menu{
  //이곳에 원하는 타입을 추가 하면 된다.
  //Menu의 타입이 이미 이곳에 정의 되어 있다.
}

 

interface OnlyProp extends Menu {
  테스트(이름: string): void;
}
// 기존 Menu타입 + 함수타입 추가

 

# type에서의 extends

type OnlyProp = Menu & {
  테스트(이름: string): void;
};
//Menu type 그리고(&) 추가 타입

 

 

Omit (빼주세요)

extends, &는 기존타입에 새로운 타입을 추가하고 싶을 때 사용 했다면 Omit은 기존 타입에서 원하는 타입을 뺄 수 있다.

export type AddressWithOutZipcode = Omit<Address, 'zipcode'>;
// Address타입에서 'zipcode'를 뺀 타입

 

+ interface와 함께도 사용 가능하다.

interface OnlyProps extends Omit<Menu, 'name'> {
  테스트(이름: string): void;
}
//OnlyProps 타입은 Menu 타입에서 name은 빼고 테스트라는 함수는 추가한 타입이다.

 

pick

타입 중에 원하는 타입만 지정해서 가지고 올 수 있게 해 준다.

export type RestaurantPickCatagory = Pick<Restaurant, 'catagory'>;
//Restaurant타입중 catagory타입만 꺼내 쓴다.

 

api데이터의 타입 정해주기

보통 api 응답으로는 data의 타입이 다양하기 때문에 <T>(genaric)으로 선언해 준다.

export type ApiResponse<T> = {
  data: T[];
  pages: number;
  total: number;
};
//사용할때
export type RestaurantResponse = ApiResponse<Restaurant>
export type MenuResponse = ApiResponse<Menu>

이렇게 되면 data의 응답 타입이 바뀔 때마다 간편하게 타입을 지정해 줄 수 있다.