[Nextjs] 2장 Typescript 기본 문법

✅ 1. 프로젝트 구조

next-bloging/
├─ pages/
│  └─ index.tsx
├─ components/
│  └─ UserCard.tsx
├─ types/
│  ├─ user.ts
│  └─ userClass.ts
├─ utils/
│  └─ wrap.ts
└─ ...

---

✅ 2. 타입과 인터페이스 (types/user.ts)

/**
 * 타입 선언 (Type Alias)
 * - 특정 타입에 이름을 붙여 재사용 가능함
 * - 유니온 타입(|)아니 튜플, 객체 등 다양하게 정의
 */
export type ID = string | number;

/**
 * 인터페이스 (Interface)
 * - 객체 구조를 정의 시 사용
 * - 선택적 속성(?)을 사용 가능
 * - 상속 가능
 */

export interface IUser {
  id: ID;
  name: string;
  age?: number; // 석택적 속성
}

/**
 *  유틸리티 타입(Utility Types)
 * - TypeScript에서 제공하는 편리한 타입 변형 도구
 */
export type Todo = {
  id: number;
  title: string;
  completed: boolean;
};

// Partial: 모든 속성을 선택적으로
export type PartialTodo = Partial<Todo>;

// Required: 선택적 속성을 필수로 만들어줌
export type RequiredTodo = Required<Partial<Todo>>;

// Pick: 객체에서 일부 속성만 선택
export type PickTodo = Pick<Todo, "id" | "title">;

// Omit: 특정 속성 언어
export type OmitTodo = Omit<Todo, "completed">;

// ReadOnly: 모든 속성을 읽기 전용 모드로
export type ReadonlyTodo = Readonly<Todo>;

• type -> 간단하기 이름 붙인 타입, 유니온/튜플 가능
• interface-> 객체 구조 정의, 상속 가능
• Partial/Required/Pick/Omit/Readonly -> 기존 타입을 쉽게 변형 가능

---

✅ 3.클래스와 상속 (types/userClass.ts)

import { ID } from "./user";

/**
 * 클래스(Class)
 * - OOP 방식으로 데이터와 메서드를 묶어 관리
 * - 접근제어자(public/private/protected/readonly) 사용 가능
 */
export class Person {
  public name: string; // 어디서나 접근 가능함
  private ssn: string; // 클래스 내부에서만 접근 가능함
  protected role: string; // 클래스 내부 + 상속 클래스에서만 접근 가능
  readonly id: ID; // 초기화 후 수정 불가능 함

  constructor(name: string, ssn: string, role: string, id: ID) {
    this.name = name;
    this.ssn = ssn;
    this.role = role;
    this.id = id;
  }

  more(): void {
    console.log(`Hi, I'm ${this.name}`);
  }
}

/**
 * 상속(Inheritance)
 * - 부모 클래스(Person)의 기능을 물려받아 확장 가능
 */

export class Employee extends Person {
  position: string;

  constructor(
    name: string,
    ssn: string,
    role: string,
    id: ID,
    position: string
  ) {
    super(name, ssn, role, id); // 부모 생성자 호출
    this.position = position;
  }

  work(): void {
    console.log(`${this.name} is working as ${this.position}`);
  }
}

• public -> 어디서든 접근 가능
• private -> 클래스 내부에서만 접근 가능
• protected -> 상속 클래스까지 접근 가능
• readonly -> 초기화 후 값 변경 불가
• extends -> 부모 클래스 기능 확장

---

✅ 4. 제네릭 함수 (utils/wrap.ts)

/**
 *  제네릭(Generics)
 * - 다양한 타입을 받아 타입 안정성을 유지하며 재사용 가능
 */

export function wrap<T>(value: T): { value: T } {
  return { value };
}

• <T> -> 호출 시 타입을 결정하는 변수
• wrap("hello") -> T = string 
• wrap(123) -> T = number

---

✅ 5. 컴포넌트 (components/UserCard.tsx)

import { ReactNode } from "react";
import { IUser } from "../types/user";

/**
 *  React 컴포넌트
 *  - props 타입을 인터페이스로 지정
 */
interface UserCardProps {
  user: IUser;
  children?: ReactNode;
}

export default function UserCard({ user, children }: UserCardProps) {
  return (
    <div style={{ border: "1px solid gray", padding: "10px", margin: "5px" }}>
      <h3>{user.name}</h3>
      <p>ID: {user.id}</p>
      {user.age && <p>Age: {user.age}</p>}
      {children}
    </div>
  );
}

• 설명:
  • 인터페이스를 통한 props 타입 안정성 확보
  • 선택적 속성(age?)도 안전하게 사용

---

✅ 6. Next.js 페이지 (pages/index.tsx)

import type { NextPage } from "next";
import UserCard from "../components/UserCard";
import {
  IUser,
  PartialTodo,
  PickTodo,
  OmitTodo,
  ReadonlyTodo,
} from "../types/user";
import { wrap } from "../utils/wrap";
import { Employee } from "../types/userClass";

const Home: NextPage = () => {
  // 인터페이스 사용하기
  const user: IUser = { id: 1, name: "James", age: 28 };
  const wrappedUser = wrap(user); // 제네릭 사용

  // 클래스 + 상속
  const emp = new Employee("Kong", "443--324-2333", "admin", 2, "Developer");
  emp.more(); // 부모 클래스 메서드
  emp.work();

  // 유틸리티 타입 사용
  const partialTodo: PartialTodo = { title: "Partial Todo" };
  const pickTodo: PickTodo = { id: 1, title: "Pick Example" };
  const omitTodo: OmitTodo = { id: 2, title: "Omit Example" };
  const readonlyTodo: ReadonlyTodo = {
    id: 3,
    title: "Readonly Example",
    completed: true,
  };

  return (
    <div>
      <h1>Next.js + TypeScript Example</h1>
      <UserCard user={wrappedUser.value} />
      <pre>
        {JSON.stringify(
          { partialTodo, pickTodo, omitTodo, readonlyTodo },
          null,
          2
        )}
      </pre>
    </div>
  );
};

export default Home;

• wrap(user) -> 제네릭 함수 사용
• Employee -> 클래스 + 상속 + 접근제어자 사용
• UserCard -> 인터페이스 기반 props 사용
• PartialTodo/PickTodo/OmitTodo/ReadonlyTodo -> 유틸리티 타입 적용

---

 

GitHub - Koras02/nextjs-bloging: https://thinky.tistory.com/category/Front-End/NextJs