📖 TIL - TypeScript 타입 단언과 타입 가드

📌 오늘 복습한 개념들

1. 타입 단언 (Type Assertion)

2. 타입 가드 (Type Guard)

3. 인터페이스 (Interface)

4. 타입 별칭 (Type Alias)

5. 함수 오버로딩 (Function Overloading)

6. 제네릭 (Generics)

---

🤔 학습 배경

DOM 조작이나 함수 매개변수에서 null이나 undefined 가능성 때문에 타입 에러가 자주 발생하는데, 이를 안전하게 처리하는 방법들을 배워보자!

---

💡 핵심 개념 정리

1. 타입 단언 (Type Assertion)

단언 = 주저하지 아니하고 딱 잘라 말함

단언 키워드: as와 Non-null 단언 연산자: !

// 1) DOM 조작에서의 타입 단언
const el = document.querySelector('body') 
el.textContent = 'hello' // ❌ 에러 발생!

위 코드에서 에러가 발생하는 이유는 el이 HTMLBodyElement | null 유니온 타입으로 지정되어 있기 때문!

해결 방법들:

// 방법 1: as 키워드로 직접 타입 단언
const el = document.querySelector('body') as HTMLBodyElement;

// 방법 2: Non-null 단언 연산자 사용
el!.textContent = "hello"; // 느낌표는 "절대 null이 아니다"라고 표시

// 방법 3: 타입 가드 사용 (가장 안전!)
if(el){
    el.textContent = "hello";
}

// 2) 함수에서의 타입 단언
function getNumber(x: number | null | undefined){
    return Number(x.toFixed(2)); // ❌ 에러! toFixed는 null/undefined 처리 불가
}

해결 방법:

// 타입 단언 사용
return Number((x as number).toFixed(2));
// 또는
return Number(x!.toFixed(2));

// 하지만 getNumber(null) 호출 시 TypeError 발생! (잘못된 타입 단언)

// 타입 가드로 안전하게 처리
if(x) { // undefined와 null은 조건문에서 참이 아니므로 안전
    return Number(x.toFixed(2));
}

// 3) 조건부 타입 단언
function getValue(x: string | number, isNumber: boolean){
    if(isNumber){
        return Number(x.toFixed(2)); // ❌ 에러
    }
    return x.toUpperCase(); // ❌ 에러
}

해결:

if(isNumber){
    return Number((x as number).toFixed(2));
}
return (x as string).toUpperCase();
// 여기서는 null/undefined가 아니므로 Non-null 연산자(!)는 불필요

할당 단언 (Assignment Assertion)

let num: number;
console.log(num); // ❌ 타입스크립트 에러 (값을 할당하지 않음)

// 자바스크립트에서는 undefined로 출력되지만 TS에서는 에러

해결: 할당 단언 사용

let num!: number; // 할당 단언 - "추후 값을 할당할 것이다"라고 TS에게 알림
console.log(num);
num = 123; // 나중에 할당

2. 타입 가드 (Type Guard)

function logText(el: Element){
    console.log(el.textContent);
}
const h1El = document.querySelector('h1');
logText(h1El); // ❌ 에러! h1El이 null일 수 있음

타입 단언 vs 타입 가드:

// 타입 단언 사용 (위험!)
const h1El = document.querySelector('h1') as HTMLHeadingElement;
// 코드상 에러는 없지만 실행 시 "Cannot read properties of null" 에러 발생 가능

// 타입 가드 사용 (안전!)
if(h1El){
    logText(h1El); // 안전하게 사용 가능
}

// 더 구체적인 타입 가드
if(h1El instanceof HTMLHeadingElement){
    logText(h1El);
}

3. 인터페이스 (Interface)

파스칼 케이스로 시작

기본 인터페이스

interface User {
    name: string;
    readonly age: number;  // 읽기 전용 속성
    isValid?: boolean;     // 선택적 속성
}

const neo: User = {
    name: 'sum',
    age: 100,
    isValid: true
};

neo.age = 200; // ❌ 에러! readonly 속성은 수정 불가

함수 타입 - 호출 시그니처 (Call Signature)

interface GetName {
    (mes: string): string; // 소괄호로 작성하는 것이 호출 시그니처
}

interface User {
    name: string;
    readonly age: number;
    getName: GetName;
}

const user1: User = {
    name: 'sum',
    age: 100,
    getName(mes: string) {
        console.log(mes);
        return this.name; // 화살표 함수가 아니므로 호출 시 this 판별 가능
    }
};

user1.getName('coco'); // 정상 작동

함수 타입을 따로 만드는 이유: 이름을 갖고 재사용할 수 있게 됨! 동일한 구조의 함수가 있다면 재사용 가능. 재사용성을 고려하여 호출 시그니처를 분리하는 것이 좋음.

인덱스 시그니처 (Index Signature)

배열과 객체에서 대괄호[]로 감싸서 사용하는 것

// 배열 타입 정의
interface Fruits {
    [item: number]: string; // 인덱스는 number, 값은 string
}
const fruits: Fruits = ['apple', 'banana', 'cherry'];
// 콘솔에 찍으면: 0: apple, 1: banana, 2: cherry

// 객체 타입 정의
interface User {
    [key: string]: unknown; // 어떤 값이 올지 모르겠다고 지정
    name: string;
    age: number;
}
const user1: User = {
    name: 'sum',
    age: 100
};

// 인덱싱으로 값 추가 가능
user1['isValid'] = true;
user1['emails'] = ['sum529@naver.com', 'coyasium@gmail.com'];

확장 (상속)

interface UserA {
    name: string;
    age: number;
}

interface UserB extends UserA {
    isValid: boolean;
}

const user2: UserB = {
    name: 'sum',
    age: 100,
    isValid: true // UserA의 속성 + UserB의 속성
};

인터페이스 중복 선언 (Declaration Merging):

interface FullName {
    firstName: string;
    lastName: string;
}

interface FullName {
    middleName: string;
    // lastName: number; // ❌ 에러! 기존 타입은 변경 불가
}
// 두 인터페이스가 합쳐짐!

4. 타입 별칭 (Type Alias)

// 유니온 타입 가능
type TypeA = string | number | boolean;

// 튜플 타입 가능
type User1 = [string, number, boolean];

// 복합 타입
type User2 = {
    name: string;
    age: number;
    isValid: boolean;
} | [string, number, boolean];

인터페이스 vs 타입 별칭:

• 재할당 가능 여부가 차이점
• 인터페이스: 같은 명칭으로 재선언 시 자동으로 합쳐짐
• 타입 별칭: 재선언 불가 (오류 방지 측면에서 더 안전)

5. 함수 - 명시적 this 타입

interface Cat {
    name: string;
    age: number;
}

const cat: Cat = {
    name: 'sum',
    age: 10
};

function fi(mes: string){
    console.log(`${this.name}, ${mes}`); // ❌ this에서 에러
}

fi.call(cat, 'meow'); // call 메소드로 cat 객체의 메소드처럼 호출

에러 원인: this에는 형식 주석이 없으므로 암시적으로 any 형식 포함 (TS의 엄격한 문법 검사)

해결:

function fi(this: Cat, mes: string){ // this 타입 명시 (매개변수가 아닌 TS 문법)
    console.log(`${this.name}, ${mes}`);
}

6. 함수 오버로딩 (Function Overloading)

기존 비효율적인 코드:

function add1(a: string, b: string) {
    return a + b;
}
function add2(a: number, b: number) {
    return a + b;
}
// 불필요한 중복 코드!

오버로딩 사용:

function add(a: string, b: string): string;  // 타입 선언
function add(a: number, b: number): number;  // 타입 선언
function add(a: any, b: any) {               // 함수 구현
    return a + b;
}

add('h', 'i');  // 정상
add(2, 3);      // 정상
add('h', 1);    // ❌ 에러

오버로딩이란? 하나의 함수 이름에 여러 타입의 매개변수 시그니처를 선언해 다양한 입력에 따라 다르게 동작하도록 만드는 기능. 여기서 any는 실제 타입이 아니라 "타입 선언한 방식 중 어떤 것이든 할당될 수 있다"는 의미.

7. 제네릭 (Generics)

함수 제네릭:

// 오버로딩 대신 제네릭 사용
function add<T>(a: T, b: T) {
    return a + b;
}

인터페이스 제네릭과 제약 조건:

// 기본 제네릭 인터페이스
interface MyData<T> {
    name: string;
    value: T;
}

const dataA: MyData<string> = {
    name: 'data',
    value: 'hello'
};

const dataB: MyData<number[]> = {
    name: 'data',
    value: [1, 2]
};

// 제약 조건이 있는 제네릭
interface MyData<T extends string | number> {
    name: string;
    value: T;
}

const dataC: MyData<number[]> = { // ❌ 에러! number[]는 제약 조건에 맞지 않음
    name: 'data',
    value: [1, 2]
};

8. 패키지 타입 선언

import _ from 'lodash';

const str = 'xxxx xxx xxx';
console.log(_.camelCase(str));
console.log(_.snakeCase(str));

타입 선언 파일 생성 (패키지명.d.ts):

declare module 'lodash' {
    interface Lodash {
        camelCase: (str: string) => string;
        snakeCase: (str: string) => string;
    }
    const _: Lodash;
    export default _;
}

삼중 슬래시 지시자 (Triple-slash directive):

/// <reference path="./main.d.ts"/>

더 편한 방법:

# 타입 존재 확인
$ npm info @types/lodash

# 개발 의존성으로 타입 설치
$ npm i @types/lodash -D

---

🔍 실제 사용 예시

DOM 조작에서의 타입 안전성

// ❌ 위험한 방법
const button = document.querySelector('button');
button.addEventListener('click', () => {}); // 에러 발생 가능

// ✅ 타입 가드 사용
const button = document.querySelector('button');
if (button) {
    button.addEventListener('click', () => {});
}

// ✅ 타입 단언 사용 (확실할 때만!)
const button = document.querySelector('button') as HTMLButtonElement;
button.addEventListener('click', () => {});

---

✨ 새롭게 배운 점

• 타입 단언 vs 타입 가드: 단언은 개발자가 "확신"할 때 사용하지만, 잘못 사용하면 런타임 에러가 발생할 수 있음. 타입 가드는 더 안전한 방법!
• 할당 단언 (!): 변수 선언 시 나중에 값을 할당할 것임을 TypeScript에게 알려주는 방법
• 인터페이스의 중복 선언: 같은 이름의 인터페이스를 여러 번 선언하면 합쳐짐 (Declaration Merging)
• 제네릭의 제약 조건: extends 키워드로 제네릭 타입을 특정 조건으로 제한 가능

---

🚀 이런 점이 효율적이에요

1. 타입 가드 우선 사용: 타입 단언보다는 타입 가드를 먼저 고려하자. 런타임 안전성이 높아짐!
2. 인터페이스 vs 타입 별칭:
   • 인터페이스: 확장 가능, 선언 병합 가능
   • 타입 별칭: 유니온 타입, 튜플 타입 표현 가능
3. 제네릭 활용: 코드 재사용성을 높이고 타입 안전성을 유지할 수 있음

---

⭐️ 참고 자료

• TypeScript 공식 문서 - Type Assertions
• TypeScript 공식 문서 - Type Guards
• TypeScript 공식 문서 - Interfaces
• TypeScript 공식 문서 - Generics