TypeScript 핵심 타임 정리

기본 타입 지정 (Basic Type Annotations)

가장 기본적이지만 핵심적인 문법입니다. 변수, 함수 매개변수, 반환 값 등에 타입을 지정합니다.

• 원시 타입: string, number, boolean
• 배열: type[] 또는 Array<type>
• 어떤 타입이든 가능: any (사용을 지양하는 것이 좋습니다.)

TypeScript

 

const name: string = "Next.js";
const count: number = 14;
const isReady: boolean = true;

const items: string[] = ["a", "b", "c"];

2. 객체 타입 지정 (Interface & Type Aliases)

React 컴포넌트의 Props나 복잡한 데이터 구조를 정의할 때 필수적으로 사용됩니다.

인터페이스 (interface)

객체의 모양(shape)을 정의할 때 가장 많이 쓰입니다. 주로 컴포넌트의 Props 타입 지정에 사용됩니다.

TypeScript

 

interface UserProps {
  id: number;
  name: string;
  email?: string; // 물음표는 '선택적 속성 (Optional Property)'을 의미합니다.
}

const UserCard = (props: UserProps) => {
  // ... 컴포넌트 로직
};

타입 별칭 (type)

인터페이스와 유사하지만, 원시 타입, 유니온 타입, 튜플 등 더 광범위한 타입에 별칭을 부여할 수 있습니다.

TypeScript

 

type ID = string | number; // 유니온 타입 (Union Type): string 또는 number 타입

type Coordinate = [number, number]; // 튜플 타입 (Tuple Type): 길이가 고정된 배열

const userID: ID = 101;
const position: Coordinate = [37.5, 127.0];

3. 함수 타입 지정 (Function Type Annotations)

함수의 매개변수와 반환 값에 타입을 지정합니다. Next.js에서 데이터 패칭 함수(예: API 핸들러)나 유틸리티 함수를 만들 때 중요합니다.

TypeScript

 

// 매개변수는 'num1'과 'num2'는 number 타입, 반환 값도 number 타입
const add = (num1: number, num2: number): number => {
  return num1 + num2;
};

// 반환 값이 없을 때는 'void'를 사용합니다.
const logMessage = (message: string): void => {
  console.log(message);
};

4. 유니온 및 제네릭 타입 (Union & Generics)

유니온 타입 (|)

변수가 여러 타입 중 하나를 가질 수 있도록 정의합니다.

TypeScript

 

type Status = "pending" | "success" | "error"; // 리터럴 유니온 타입

const currentStatus: Status = "success"; 

제네릭 (Generics)

타입을 마치 함수의 인자처럼 유연하게 처리할 수 있게 해줍니다. 특히 Next.js에서 React 컴포넌트나 데이터 패칭 유틸리티를 만들 때 매우 유용합니다.

TypeScript

 

// T는 임시로 사용하는 타입 변수입니다.
interface ApiResponse<T> {
  data: T; // T 타입의 데이터를 포함합니다.
  status: number;
}

// UserListResponse는 data가 UserProps 배열인 응답 타입이 됩니다.
type UserListResponse = ApiResponse<UserProps[]>; 

5. Next.js/React 관련 자주 쓰이는 타입

Next.js와 React에서 제공하는 타입들을 가져와 사용하면 편리합니다.

타입 이름	용도	예시
React.FC (또는 React.VFC)	함수 컴포넌트 타입 지정	const MyComp: React.FC<Props> = ({ prop }) => { ... }
JSX.Element	컴포넌트의 반환 값 타입 (React 요소)	const renderItem = (): JSX.Element => { ... }
NextPage	Next.js 페이지 컴포넌트 타입 (Next에서 제공)	const Home: NextPage = () => { ... }
GetServerSidePropsContext	서버 사이드 렌더링 함수의 Context 타입
InferGetStaticPropsType<typeof getStaticProps>	데이터 패칭 결과를 Props 타입으로 추론