01. TypeScript, 노근본에 근본향 추가

그렇다 지금은 타입스크립트를 써야할 때, 피곤한 요즘 배울게 많아져서? 오히려 좋다.. 퀀텀점프를 할 때 (아무말 대잔치) 그래서 퇴근 후에 밤에서 짧게 공부를 하고, (코딩하는 누나? 유튜브 참고 - 강의가 아주 기초를 잘 알 수 있게 깔끔하니 좋았다.) 여기에 정리한다.

TypeScript : JavaScript와는 다르게 자료형을 명시할 수 있는 언어, 함수 및 변수의 목적을 명확히 할 수 있다.

let a:number = 3;
let b:string = "love you";

let c:any = 4;
c="asdf";

let d :number | string = "asdf";
d = 3;
// d=null;

let e:string[] = ['apple', 'mongo'];

function addNumber(a:number,b:number) :number {
  return a+b;
}

간단하다, 변수들, 함수의 매개변수들, 또한 함수의 반환값까지 자료형을 명시함으로, 목적을 명확히 할 수 있다. 지금까지는 이것말고 차이점을 잘 모르겠다.

자료형의 타입으로는 , string , number, any, boolean 등이 있다.

npx create-react-app my-app --template typescript

예시 코드를 따라 작성해보기 위해서, 기본 typescript template 설치가 필요했다.

• 나같은 경우에는 최초 설치했을 때, js로 구성된 React 기본 탬플릿이 구성되어있었는데, 이는 잘못된 것. 새롭게 설치해주어야한다. 캐쉬를 지워준다던지, 삭제하고 다시 설치해본다던지. 나의 경우 삭제도 하고~ 캐쉬도 지우고 다시 설치했다. ts, tsx로 구성된 파일들이 존재하면 성공~

const App:React.FC = () => 

대부분의 자료형에 결과를 명시해야하는 만큼 App.tsx의 반환값 역시 React.FC 이다. 반환값이 되게 많으니 그때 그때 마다 확인을 해야겠음.

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

src의 하위폴더로 model을 만들고, 그 안에 우리가 필요한 Class의 자료형들을 명시할 수 있다. 뭐랄까 큰 클래스 안에, 작은 클래스의 집합들로 구성될 수 있었다.

import React from "react";
import { Menu } from "./model/resturant";

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

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

export default BestMenu;

TypeScript를 통한 함수 Props 하는법이다. React.FC 를 통해, 필요한 data들이 props될 수 있다. 또한 함수의 반환값에도 string으로 자료형을 지정해줌

export type AddressWithoutZipcode = Omit<Address,'zipcode'>
export type RestaurantOnlyCategory = Pick<Restaurant,'category'>

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

restaurant.ts에 추가적으로 Omit과 Pick을 사용하여 새로운 유형의 Class를 만들어 준 느낌이다

기존 Address에는 string, string, number들의 자료형으로 구성되어있었는데 만약 number를 가지고 있는 zipcode 부분이 필요하지 않는다면 omit을 통해 zipcode가 없는 address로 구성가능하다.

Pick은 반대의 개념, 그거 하나만 탁 찝는 것!

또한 만약에 ApiResponse값으로 이 값 안에 무엇이 담겨서 들어올지 모를 때는 generic을 사용한다고 함. 를 사용해!

//app.tsx
import React, { useState } from "react";
import "./App.css";
import Store from "./Store";
import { Address, Restaurant } from "./model/resturant";
import BestMenu from "./BestMenu";

let data: Restaurant = {
  name: "gardener",
  category: "western",
  address: {
    city: "suwon",
    detail: "somewhere",
    zipcode: 2344,
  },
  menu: [
    { name: "rose pasta", price: 2000, category: "Pasta" },
    { name: "rose pasta", price: 2000, category: "Pasta" },
    { name: "rose pasta", price: 2000, category: "Pasta" },
  ],
};

const App: React.FC = () => {
  const [myRes, setMyRes] = useState<Restaurant>(data);
  const changeAddress = (address: Address) => {
    setMyRes({ ...myRes, address: address });
  };

  const showBestMenuName = (name: string) => {
    return name;
  };

  return (
    <div className="App">
      ,
      <Store info={myRes} changeAddress={changeAddress} />
      <BestMenu
        name="불고기피자"
        category="피자"
        price={1000}
        showBestMenuName={showBestMenuName}
      />
    </div>
  );
};

export default App;

전체 코드인데 useState에서도 어떤 값이 state를 통해 변화가 일어나는지 명확히 명시해주었다. 설명과 복습은 다 마친 듯!
마지막으로 App.tsx 코드를 통해 마친다.