📆 2025.04.28 ‐ TypeScript type, intersection, interface, optional property, readonly

🧠 배운 점 & 정리

• 타입(ex06-02.ts)

  • 주요 타입

    • 기본 타입
      • string: 문자열 타입
      • number: 숫자 타입
      • boolean: true/false 논리 타입
      • null: 값이 비어있음을 명시하는 타입
      • undefined: 값이 할당되지 않은 상태
      • bigint: 매우 큰 정수를 다룰 수 있는 타입
      • symbol: 고유한 식별자를 만들 때 사용하는 타입
    • 참조 타입
      • object: 객체 타입 (key-value 구조)
      • Array: 특정 타입을 요소로 갖는 배열
      • tuple: 고정된 타입과 순서를 가지는 배열
    • 특수 타입
      • any: 모든 타입을 허용 (비추천, 타입 안정성 떨어짐)
      • unknown: 모든 타입을 허용하지만 사용 전 타입 검사가 필요하여 any보다 안전

  ---

  • 선택적 파라미터 (ex06-04.ts)

    함수의 매개 변수를 선택적으로 전달 받고 싶을때 매개 변수명 뒤에 ?를 추가

    (()=>{
      function user(name /*1️⃣*/: string, age?/*1️⃣2️⃣*/: number) {
        console.log(name, age);
      }
    
      user('하루', 5);
      user('나무'); // 3️⃣
    
    })();

    • 1️⃣ 타입지정
    • 2️⃣ 선택적 파라미터 선언법: 뒤에 물음표 적기
    • 3️⃣ 매개변수를 전달하지 않으면 undefined

  ---

  • 유니언 타입

    • 여러 종류의 타입을 허용하기 위해 | (OR 연산자) 로 연결한 타입

    • any 타입은 모든 타입을 허용하지만 유니언 타입은 | 연산자로 연결된 타입중 하나를 허용

    • 연산자의 앞뒤가 바뀌어도 상관이 없다

    • 코드(ex06-05.ts)

      (() => {
        function logString(msg: string) {
          console.log(msg);
        }
        
        logString("hello"); // 1️⃣
        logString(123); // 2️⃣
        // --------
        
        function logNumber(msg: number) {
          console.log(msg);
        }
        logNumber(235); // 1️⃣
        logNumber("235");// 2️⃣
        // --------
        
        function log(msg: number | string) {
          console.log(msg);
        }
        log(123); // 3️⃣
        log("123"); // 3️⃣
      })();

      

      • 1️⃣ 정상 작동 ⇒ 매개변수에 할당한 타입이 일치함, 정상 출력
      • 2️⃣ 타입 에러 ⇒ 매개변수에 할당한 타입이 불일치함
      • 3️⃣ 매개변수로 정의한 number, string 이 있음,
      • 4️⃣ 타입가드: 조건문 안에서 `타입범위를 한정`시켜줄 수 있는 방법

    • 코드(ex06-05-02.ts)

      (() => {
          function print(msg: number | string | boolean /*1️⃣*/) {
          if (typeof msg === "string") { // 2️⃣ 
            // string일 경우
            console.log(`${msg} 글자수: ${msg.length}`);
          }
          if (typeof msg === "number") { // 2️⃣ 
            // number일 경우
            console.log(`${msg} + 10 = ${msg + 10}`);
          }
      
          if (typeof msg === "boolean") { // 2️⃣ 
            // boolean일 경우
            console.log(`${msg}: ${msg ? "참" : "거짓"}`);
          }
        }
      
        print("world"); // 3️⃣
        print(200); // 3️⃣
        print(false);// 3️⃣
      })();

      

      • 1️⃣ 타입 설정
      • 2️⃣ 타입가드
      • 3️⃣ 정상 작동 ⇒ 2️⃣ 타입가드가 입력값의 타입(number, string, boolean)을 하나하나 검사하여, 일치하는 경우에만 해당 조건문 안의 코드를 실행하고 출력하기 때문이다. 타입이 정확히 구분되므로 각각 알맞은 방식으로 처리되어 정상 출력된다.

  ---

  • 타입 별칭(ex06-06.ts)

    • 값을 변수에 저장하듯, 타입을 변수에 저장해서 사용

    • 유니언 타입 같은 복잡한 타입에 의미 있는 이름을 붙여서 사용 (별칭)

    • type 키워드로 선언하는 사용자 정의 타입

    • 동일한 이름으로 중복 선언 불가

    • JS로 컴파일되면 제거됨

    • 관련적인 명명 규칙

      • PascalCase
      • 명사형

    • 코드

      (() => {
          function logMessage(msg: string | number) {
          console.log(msg);
        }
      
        function warnMessage(msg: number | string) {
          // 스타일 적용
          console.log(`%c${msg}`, "color: yellow; font-size: 20px;");
        }
      
        logMessage("hello");
        logMessage(100);
        warnMessage("bye");
        warnMessage(200);
      })();

      (() => {
        **type Massge = string | number; // 1️⃣
        function logMessage(msg: Massge /* 2️⃣ */) {
          console.log(msg);
        }
      
        function warnMessage(msg: Massge) {
          // 스타일 적용
          console.log(`%c${msg}`, "color: yellow; font-size: 20px;");
        }
      
        logMessage("hello");
        logMessage(100);
        warnMessage("bye");
        warnMessage(200);
      })();
      

---

• 타입 별칭으로 객체의 타입 선언

  • 객체의 속성명과 속성값의 타입을 지정

  • 속성은 , 또는 ; 으로 구분할 수 있지만 공식 스타일 가이드에서는 ;을 권장

  • 타입 별칭을 타입으로 지정한 객체는 타입 별칭에 정의된 속성명과 속성의 타입을 준수해야 함

  • 코드(ex06-07.ts)

    (() => {
      type user = { // 1️⃣
        name: string;
        age: number;
      };
      const u1: user = { // 2️⃣
        name: "하루",
        age: 1,
      };
      const u2: user = { // 2️⃣
        name: "나무",
        age: 5,
      };
    
      console.log(u1.name); // 3️⃣
      console.log(u2.age); // 3️⃣
    })();
    

    

    • 1️⃣ type 키워드를 이용해 user라는 타입 별칭을 생성하고, name(string)과 age(number)의 타입 구조를 정의함
    • 2️⃣ u1, u2는 user 타입을 명시적으로 지정하여 객체를 생성했음. 이를 통해 타입 안정성을 확보함
    • 3️⃣ u1.name은 문자열(string)로, u2.age는 숫자(number)로 타입이 보장되어 각각 정상 출력됨

---

• 인터섹션 타입

  • 타입 여러개를 하나로 합치기 위해 &(AND 연산자) 로 연결한 타입

    • 타입 별칭을 확장할 때 주로 사용

  • 동일한 속성을 인터섹션 타입으로 추가할때 타입이 다르면 never 타입이 되면서 해당 속성은 사용이 불가함

  • 코드(ex06-08.ts)

    (() => {
      // 할일 등록시 사용
      type TodoRegist = { // 1️⃣
        title: string;
        content: string;
      };
    
      // 할일 조회시 사용
      type TodoInfo = TodoRegist & { // 2️⃣
        id: number;
        done: boolean;
      };
    
      const todo1: TodoRegist = { // 3️⃣
        title: "타입스크립트 공부",
        content: "타입스크립트 수업 대비해서 미리 책 읽어보기.",
      };
      const todo2: TodoInfo = { // 3️⃣
        id: 13,
        title: "타입스크립트 공부",
        content: "타입스크립트 수업 대비해서 미리 책 읽어보기.",
        done: false,
      };
    
      console.log(todo1.title, ":", todo1.content);
      console.log("todo2 합본!: ", todo2.id, todo2.title, 
      todo2.content, todo2.done);
    })();

    • 1️⃣ TodoRegist 타입을 만들어 title과 content 속성에 각각 string 타입을 지정
    • 2️⃣ TodoInfo 타입은 TodoRegist 타입을 상속받고(& 사용), 추가로 id(number), done(boolean) 속성을 확장해서 정의
    • 3️⃣ todo1은 TodoRegist 타입을 따르는 객체이고, todo2는 확장된 TodoInfo 타입을 따르는 객체

---

• 인터페이스

  • 객체의 타입을 정의하기 위해 사용(객체의 속성명과 속성값의 타입을 지정)

  • 속성은 ,또는 ;으로 구분

  • interface 키워드로 선언하는 사용자 정의 타입

  • 인터페이스를 타입으로 지정한 객체는 해당 인터페이스에 정의된 속성명과 속성의 타입을 준수해야 함

  • JS로 컴파일 하면 제거됨

  • 코드(ex06-07.ts, ex06-09.ts)

    // ex06-07.ts
    (() => {
      type user = { // 1️⃣
        name: string;
        age: number;
      };
      const u1: user = {
        name: "하루",
        age: 1,
      };
      const u2: user = {
        name: "나무",
        age: 5,
      };
    
      console.log(u1.name);
      console.log(u2.age);
    })();
    

    // ex06-09.ts
    (() => {
      interface User { // 1️⃣
        name: string;
        age: number;
      }
      const u1: User = {
        name: "하루",
        age: 1,
      };
      const u2: User = {
        name: "나무",
        age: 5,
      };
    
      console.log(u1.name);
      console.log(u2.age);
    })();
    

    1️⃣ ex06-07.ts은 type, ex06-09.ts은 interface를 사용해 user 타입을 정의함. 둘 다 name(string)과 age(number) 속성을 가짐

    • 기본 인터섹션 사용(ex06-10.ts): 변수, 함수의 매개 변수, 함수의리턴 타입에 사용

      (() => {
        interface User { // 1️⃣
          name: string;
          age: number;
        }
      
        const u1: User = { // 2️⃣
          name: "하루",
          age: 1,
        };
        const u2: User = { // 2️⃣
          name: "나무",
          age: 5,
        };
        console.log(u1.name);
        console.log(u2.age);
      
        const createUser = function (name: string, age: number): User {
          return { name, age };
        }; // 3️⃣
      
        const u3: User = createUser("유저핑", 9);
        console.log(u3.name);
      
        function getAge(user: User): number { // 4️⃣
          return user.age;
        }
      
        console.log(getAge(u1));
        console.log(getAge(u2));
      })();
      

      • 1️⃣ User라는 이름으로 name(string)과 age(number)를 갖는 인터페이스를 생성
      • 2️⃣ u1, u2 객체를 User 타입으로 지정하여 타입 안정성을 확보
      • 3️⃣ createUser 함수가 User 타입 객체를 반환하도록 리턴 타입을 지정
      • 4️⃣ getAge 함수가 매개변수로 User 타입 객체를 받고, 그 객체의 age 값을 반환

---

• 클래스 인터페이스 사용

  • 클래스의 타입 지정에 사용

  • 클래스명 뒤에 implements 키워드 추가

  • 인터페이스를 타입으로 지정한 클래스의 멤버 변수와 메서드는 인터페이스에 정의된 속성과 속성의 타입을 준수해야 함

  • 코드(ex06-11.ts)

    (() => {
      interface Score { // 1️⃣
        kor: number;
        eng: number;
        sum(): number;
        avg(): number;
      }
    
      class HighSchool implements Score { // 2️⃣
        kor: number;
        eng: number;
        constructor(kor: number, eng: number) {
          this.kor = kor;
          this.eng = eng;
        }
        sum() {
          return this.kor + this.eng;
        }
        avg() {
          return this.sum() / 2;
        }
      }
    
      function printScore(score: Score) { // 3️⃣
        console.log(score.sum(), score.avg());
      }
    
      const haru = new HighSchool(100, 90); // 4️⃣
      printScore(haru); // 5️⃣
    })();
    

    • 1️⃣ Score라는 인터페이스를 생성해서 kor, eng (number 타입)과 sum(), avg() 메서드를 정의함

    • 2️⃣ HighSchool 클래스가 Score 인터페이스를 implements(구현)하여 kor, eng 속성과 sum(), avg() 메서드를 구현함

    • 3️⃣ printScore 함수는 매개변수로 Score 타입을 받고, sum()과 avg() 결과를 출력함

    • 4️⃣ haru라는 이름으로 HighSchool 인스턴스를 생성하고, kor=100, eng=90 값을 전달함

    • 5️⃣ printScore(haru)를 호출해서 haru 객체의 총점(sum())과 평균(avg())을 출력함

      Score 인터페이스
      ├─ kor: number
      ├─ eng: number
      ├─ sum(): number
      └─ avg(): number
      
      HighSchool 클래스 (implements Score)
      ├─ kor
      ├─ eng
      ├─ sum()
      │  └─ return this.kor + this.eng
      └─ avg()
          └─ return this.sum() / 2
      
      printScore(score: Score) 함수
      ├─ console.log(score.sum())
      └─ console.log(score.avg())
      
      haru 객체 생성
      └─ new HighSchool(100, 90)
      
      printScore(haru) 호출
      ├─ haru.sum() 실행
      └─ haru.avg() 실행
      

---

• optional property

  • 객체의 속성을 선택적으로 부여하고 싶을때 인터페이스 속성명 뒤에 ?를 추가

---

• readonly

  • 인터페이스의 속성명앞에 readonly키워드 추가

  • 객체 생성시에만 값 할당이 가능하고 생성된 이후에는 수정할 수 없는 속성을 만들때 사용

  • 코드

    (() => {
      interface Todo {
        readonly id: number;
        title: string;
        content: string;
        done?: boolean;
      }
    
      const todo1: Todo = {
        id: 1,
        title: "TypeScript 학습하기",
        content: "학습하기",
        done: false,
      };
      console.log(todo1);
      const todo2: Todo = {
        id: 2,
        title: "TypeScript 학습하기",
        content: "학습하기",
      };
    
      console.log("변경 전", todo2);
      todo2.id = 3;
      todo2.content = "학습 끝";
      console.log("변경 후", todo2);
    })();
    

    

    

    • 1️⃣ Todo라는 타입(설계도)을 정의했다. (readonly/optional 특징 있음)
    • 2️⃣ Todo 타입을 이용해서 todo1 객체를 만들었다. (설계도에 맞춰 생성)
    • 3️⃣ todo2 객체를 만들고 수정하려 했는데, readonly id는 수정 못하고, content는 수정 가능했다

---

• 인터페이스 상속

  • 부모 인터페이스의 속성과 메서드 정의를 자식 인터페이스가 물려 받고 확장

  • interface선언부의 extends키워드 뒤에 상속 받을 부모 인터페이스 지정

  • 코드(ex06-13.ts)

    (() => {
      interface TodoRegist { //  1️⃣
        title: string;
        content: string;
      }
    
      interface TodoInfo extends TodoRegist { // 2️⃣
        id: number;
        done: boolean;
      }
    
      const todo1: TodoRegist = { // 3️⃣
        title: "TypeScript",
        content: "학습하기",
      };
      console.log("할일 상세 조회", todo1);
    
      const todo2: TodoInfo = { // 4️⃣
        id: 1,
        title: "TS",
        content: "학습하기",
        done: false,
      };
    
      console.log("할일 상세 조회", todo2); // 5️⃣
    })();
    

    • 1️⃣ TodoRegist라는 인터페이스를 만들어 title과 content 속성(string 타입)을 정의함
    • 2️⃣ TodoInfo라는 인터페이스를 생성하고, TodoRegist를 extends(상속)하여 id, done 속성을 추가함
      • title, content는 상속받아서 자동 포함됨
    • 3️⃣ todo1 객체를 TodoRegist 타입으로 생성하고, title과 content 값을 할당함
    • 4️⃣ todo2 객체를 TodoInfo 타입으로 생성하고, id, title, content, done 값을 모두 할당함
    • 5️⃣ 각각의 todo1, todo2 객체를 console.log로 출력하여 내용 확인

🔗 배웠던 파일

• ex06
  • 02.ts 기본 타입
  • 02.js 기본 타입
  • 03.ts 함수에 타입 지정
  • 03.js 함수에 타입 지정
  • 04.ts 선택적 파라미터(optional parameter)
  • 04.js 선택적 파라미터(optional parameter)
  • 05.ts 유니언 타입
  • 05.js 유니언 타입
  • 05-02.ts 유니언 타입과 타입 가드
  • 05-02.js 유니언 타입과 타입 가드
  • 06.ts 유니언 타입
  • 06.js 유니언 타입
  • 06-02.ts 유니언 타입에 타입 별칭 지정
  • 06-02.js 유니언 타입에 타입 별칭 지정
  • 07.ts 타입 별칭으로 객체의 타입 선언
  • 07.js 타입 별칭으로 객체의 타입 선언
  • 08.ts 인터섹션 타입(intersection type)
  • 08.js 인터섹션 타입(intersection type)
  • 09.ts 인터페이스로 객체의 타입 선언
  • 09.js 인터페이스로 객체의 타입 선언
  • 10.ts 인터페이스 사용 - 변수, 함수의 매개변수, 리턴타입
  • 10.js 인터페이스 사용 - 변수, 함수의 매개변수, 리턴타입
  • 11.ts 인터페이스 사용 - 클래스의 타입 지정
  • 11.js 인터페이스 사용 - 클래스의 타입 지정
  • 12.ts 인터페이스 정의 - 선택적 속성, 읽기 전용 속성
  • 12.js 인터페이스 정의 - 선택적 속성, 읽기 전용 속성
  • 13.ts 인터페이스 상속
  • 13.js 인터페이스 상속

---

❓ 생긴 질문 / 더 알아볼 것

• 익숙한거랑 모르는게 있어서 좋았다
• sass는 컴파일링 하는 과정에서 에러가 있으면 컴파일링 자체가 안되는데 TypeScript는 에러가 있어도 무시하고 컴파일링하는 과정이 신기했다.

🔗 참고 자료

• Optional Parameter
• 유니온 타입과 인터섹션 타입
• 노션 정리