[ TIL ] Day 46 + TypeScript 기본 문법 2

🗓️ 수업 일자 : 2025.11.28 (복습 11.29)

✨ 오늘의 수업 평가 :  [ GOOD ]  이 모든걸 이해한 나, 칭찬해 😎🚀

 

어제 배우면서 느낀건데, 참 흥미 진진한 기능들이 많았다! 

앞으로 작성할 내 코드들이 얼마나 업그레이드 될지 기대가 된다 👏🏻🤩 

 

 

📝  오늘 배운 내용  

- 타입 시스템 확장 기능

- 타입 조합하기

- 내장 타입(유틸리티 타입) 사용하기

 

타입스크립트를 활용하여 console로 출력하기 :)

---

1. 타입 시스템 확장 기능

- 타입 Type : 타입에 이름 붙여서 재사용하는 기능. 객체를 제외한 데이터 타입에 사용

// 기존
const myCart: string[] = ['shirt', 'pants', 'shoes'];
const yourCart: string[] = ['pants', 'shoes'];

// type 기능 사용 = 재사용성 높임
type cloth = string[];

const myCart: cloth = ['shirt', 'pants', 'shoes'];
const yourCart: cloth = ['pants', 'shoes'];

- 인터페이스 Interface : 객체의 데이터 타입을 미리 정의한 뒤 재사용 하는 문법.

interface people {
  id: number;
  name: string;
  address: string;
  phone: number;
} // interface 로 공통 데이터 타입 묶음 선언

const person1: people = {
  id: 1,
  name: 'mama',
  address: 'korea',
  phone: 8201012340123,
}; // 인터페이스 "people"를 적용

const person2: people = {
  id: 2,
  name: 'fafa',
  address: 'america',
  phone: 52120488502,
}; // 인터페이스 "people"를 적용

- 인터페이스 상속 : 기존에 설정 한 인터페이스를 기반으로 확장 된 인터페이스를 새로 생성 (부모 - 자식 인터페이스 구조) 

                             extends를 사용하여 기존에 선언한 인터페이스를 불러옴 

interface people {
  id: number;
  name: string;
  address: string;
  phone: number;
} 

interface level extends people {
  studyLevel: number;
}

interface company extends people {
  companyName: string;
  companyAdd: string;
}

const student: level = {
  id: 3,
  name: 'KK',
  address: 'uk', // 물려받은 키 미사용 또는 데이터 타입을 잘못 사용하는 경우 에러 발생
  phone: 4518723451,
  studyLevel: 2,
};

 

 

 

2. 타입 조합하기

1) Union | 

: | (파이프 기호, OR 기호)를 사용해서 사용할 값을 미리 선언한 뒤, 사용 시 선언해 둔 값 안에서만 골라서 사용

// type 선언 시 사용 할 값을 미리 선언
type ShoeSize = 220 | 230 | 240 | 250 | 260 | 270 | 280;

interface Cloth {
  name: string;
  size: string;
  color: string;
}

interface Shoe {
  name: string;
  size: ShoeSize; // 상단에 미리 선언한 ShoeSize 값을 사용
}

// 함수 선언 시 item(인자)으로 사용할 인터페이스 설정
function printSize(item: Cloth | Shoe) {
  if ('color' in item) {
    // 연산자 in : 어떤 객체에 특정 프로퍼티 이름이 존재하는지 확인하는 연산자
    // item 에 color이 있는 경우 = Cloth 타입 사용
    console.log(`옷 사이즈는 ${item.size} 입니다`);
  } else {
    // 그렇지 않으면 = Shoe 타입 사용
    console.log(`신발 사이즈는 ${item.size}mm 입니다`);
  }
}

const blueShoes: Shoe = {
  name: 'winterShoes',
  size: 250,
};

printSize(blueShoes);

 

2) Intersection &
: & (엠퍼센트 기호, AND 기호)를 사용해 사용 할 타입을 조합하여 사용, 조합 한 타입은 무조건 다 사용해야 함

type Name = { name: string };
type Age = { age: number };
type Email = { email: string };

type Highschool = Name & Age;
type Worker = Name & Email;

const p1: Worker = {
  name: 'js',
  email: 'jskim@namer.com',
}; // 미리 선언한 Name 과 Email을 모두 사용해야 함

 

 

3. 내장 타입(유틸리티 타입) 사용하기

: 이미 타입스크립트 내부에 선언되어 기본으로 제공되는 타입

 

1) Partial<T> : T로 선언한 인터페이스의 프로퍼티들을 모두 옵셔널하게 사용할 때 선언

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

function createUser(user: User) {
  // 신규 생성시에는 모든 유저 정보가 꼭 필요함
}

function updateUser(data: Partial<User>) {
  // 업데이트 작업 시 모든 정보를 꼭 필요로 하지 않으므로
  // 사용 값을 옵셔널로 변경 가능 = Partial<T>를 사용함
}

 

2) Record<K, T> : 키를  K 타입으로 하고, 값을 T 타입으로 하는 타입으로 반복 객체를 사용 할 때 유용하게 사용 가능

type Stock = Record<string, number>;
// Record<K,T> 기능을 활용 해 키 : string, 값 : number 로 지정

const stockList: Stock = {
  c001: 3,
  c002: 4,
};

 

3) Pick<T, K> : T의 인터페이스에 있는 키 들 중 K 타입에 해당하는 키들만 추출하여 사용 가능

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

function uniqueUser(user: Pick<User, 'email' & 'password'>) {
  // 유저의 유니크한 값만 뽑아서 새로 저장 할 때,
  // User 인터페이스에서 필요한 값 'email' & 'password'만 불러와서 저장
}

 

4) Omit<T, K> : T의 인터페이스에 있는 키 들 중 K 타입에 해당하는 키들을 제외하고 사용할 때 선언

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

function normalUser(user: Pick<User, 'password'>) {
  // 유저의 기본 정보만 뽑아서 새로 저장 할 때
  // User 인터페이스에서 보안 문제가 큰 'password'은 제외하고 저장
}

 

 

5) ReturnType<T> : 특정 함수의 리턴 값의 타입을 그대로 사용

function getUserInfo() {
  return {
    id: 1,
    name: "JS",
  };
}

// getUserInfo()의 "리턴 타입"을 그대로 가져옴
// 리턴 타입 = { id: number; name: string; }

type UserReturn = ReturnType<typeof getUser>;
// type UserReturn = { id: number; name: string; }; 과 동일한 선언

 

6) Parameters<T> : 특정 함수에서 사용한 파라미터(인자)의 타입을 그대로 사용

function login(id: string, pw: number) { ... }

type LoginParams = Parameters<typeof login>;
// type LoginParams = [string, number]; 과 동일한 선언

 

 

---

 

📃 내일은 뭘 배울까 🤔

- 타입 스크립트 고차기능 : Generic / 클래스 / void