타입스크립트와 자바스크립트의 차이

• 타입스크립트 : 타입을 활용해서 대규모 서비스 등에 유용합니다.
• 자바스크립트 : 타입프리(Type Free), 대부분의 케이스에서 알아서 잘 동작합니다.
• 두 언어의 용법은 크게 다르지 않습니다.

데이터의 인터페이스를 지정해주는 게 타입스크립트에서 굉장히 중요합니다.

타입스크립트가 존재하는 가장 큰 의의 : 데이터가 어떻게 생겼는지 정의하는 것(=인터페이스)입니다.

타입스크립트는 앱 내에서 돌아가는 데이터들을 정리하는 목적으로 쓰입니다.

유저데이터를 가져오는 배열로 가져오는 케이스가 많습니다.

• 인터페이스를 보며 각각의 타입이 어떻게 생겼는지 파악해서 데이터가 들어오면 어떻게 처리를 하면 되겠구나 하는 식으로 개발을 보다 수월하게 할 수 있습니다.

MOCK_API 를 만들어서 객체의 배열로 데이터를 받아올때 간단한 코드 예시

// type.ts

export interface UserData {
  name: string;
  company: string;
  age?: number;
}

export interface UserAPIData {
  userData: [UserData];
}

// App.jsx

import { UserAPIData } from "./type";

const MOCK_API: UserAPIData = {
  userData: [
    {
      name: "Eun Cho",
      company: "오늘의집",
    },
  ],
};

// 컴포넌트 분리
const User = (): JSX.Element => {
  const { name, company } = MOCK_API.userData[0];
  return (
    <div>
      <h1>{name}</h1>
      <h2>{company}</h2>
    </div>
  );
};

export default function App() {
  return <User />;
}

결론 : 위의 장점들과 타입스크립트로 인한 에디터 프로그램이 제공하는 정보들을 활용하여 생산성이 향상됩니다.