인프런 강의 - 한 입 크기로 잘라먹는 타입스크립트 (타입스크립트 이해하기)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런

 

📌 타입스크립트 이해하기

 

✅ 문법만 외우면 충분하지 않나?

• 처음에는 타입스크립트 문법만 외워 빠르게 프로젝트에 적용할 수 있음
• 실제로 타입스크립트 공식 문서도 문법 중심의 cheat sheets를 제공
• 하지만 복잡한 상황에서는 문법 암기로는 한계에 부딪히기 쉬움

✅ 문법만 외웠을 때 생기는 문제

• 복잡한 타입 정의나 예외 상황에 스스로 대처하기 어려움
• 타입 오류 해결에 시간을 쏟다 보면 코드가 더러워지고 생산성이 떨어짐
• 실제로 문법만으로 프로젝트에 투입됐다가 오히려 개발 기간이 늘어난 경험 있음

✅ 그래서 왜 원리를 배워야 하나?

• 타입스크립트는 단순한 언어가 아님
• 타입 정의 기준, 타입 간 관계, 오류 검사 방식 등 동작 원리를 이해해야 실전에서 자유롭게 활용 가능함
• 새로운 문제 앞에서도 즐겁고 능동적으로 해결할 수 있는 실력 갖추기

 

📌 타입은 집합이다

 

✅ 타입은 집합이다

• 타입스크립트에서 ‘타입’은 값들의 집합을 의미
   -> 예) number 타입: 여러 숫자를 포함한 큰 집합
   -> 예) number Literal 타입: 작은 집합
• number Literal 타입(예: 20)은 number 타입(예: 숫자 전체)의 부분 집합
   -> 20 ⊆ number
• 타입 간에는 상하 관계(포함 관계)가 존재함
   -> 상위 타입: 슈퍼 타입 (부모 타입)
   -> 하위 타입: 서브 타입 (자식 타입)

 

 

✅ 타입 호환성이란?

• 두 타입 A, B가 있을 때, A 타입의 값을 B 타입처럼 사용할 수 있는지 판단하는 것
• 서브 타입 -> 슈퍼 타입 : 가능 (업캐스팅)
   -> 예) 20 (Number Literal) -> number : 가능
• 슈퍼 타입 -> 서브 타입 : 불가능 (다운캐스팅)
   -> 예) number -> 20 : 불가능

 

 

✅ 왜 다운캐스팅은 불가능할까?

• num1: number -> 10, 999, -5 등 모든 숫자 가능
• num2: 10 -> 오직 10만 가능
• num1에 어떤 값이 들어 있는지 확신할 수 없기 때문에, 타입 안정성 보장을 위해 타입스크립트가 금지

 

📌 타입 계층도와 함께 기본타입 살펴보기

// ✅ Unknown 타입
function unknownExam() {
    // 🔼 업 캐스팅
    let a: unknown = 1;
    let b: unknown = "hello";
    let c: unknown = true;
    let d: unknown = null;
    let e: unknown = undefined;

    // 🔽 다운 캐스팅
    let unknownVar: unknown;
    // let num: number = unknownVar;
    // let str: string = unknownVar;
    // let bool: boolean = unknownVar;
}

// ✅ Never 타입
function neverExam() {
    function neverFunc(): never {
        while (true) {}
    }

    // 🔼 업 캐스팅
    let num: number = neverFunc();
    let str: string = neverFunc();
    let bool: boolean = neverFunc();

    // 🔽 다운 캐스팅
    let never1: never;
    // never1 = 10;
    // never1 = "string";
    // never1 = true;
}

// ✅ Void 타입
function voidExam() {
    function voidFunc(): void {
        console.log("void function!")
    }

    // 🔼 업 캐스팅
    let voidVar: void = undefined;
}

// ✅ any 타입
function anyExam() {
    let unknownVar: unknown;
    let anyVar: any;
    let undefinedVar: undefined;
    let neverVar: never;

    // 📌 any는 타입 계층도 예외 → 무엇이든 업/다운 캐스팅 가능
    anyVar = unknownVar;
    undefinedVar = anyVar;

    // ❌ 예외: never는 어떤 타입으로도 다운캐스팅 불가능
    // neverVar = anyVar;
}

 

📌 객체 타입의 호환성

// ✅ 객체 타입 호환성
// 두 객체 타입 A, B가 있을 때, A 타입의 값을 B 타입처럼 사용할 수 있는지 판단
type Animal = {
    name: string;
    color: string;
};

type Dog = {
    name: string;
    color: string;
    breed: string;
};

let animal: Animal = {
    name: "기린",
    color: "yellow",
};

let dog: Dog = {
    name: "강말리",
    color: "white",
    breed: "말티즈",
}; 

animal = dog; // 🔼 업 캐스팅
// dog = animal; // 🔽 다운 캐스팅

type Book = {
    name: string;
    price: number;
};

type ProgrammingBook = {
    name: string;
    price: number;
    skill: string;
};

let book: Book;
let programmingBook: ProgrammingBook = {
    name: "한 입 크기로 잘라먹는 타입스크립트",
    price: 33000,
    skill: "typescript",
};

book = programmingBook; // 🔼 업 캐스팅
// programmingBook = book // 🔽 다운 캐스팅

// ✅ 초과 프로퍼티 검사
// 객체 리터럴을 직접 할당할 때는 타입에 정의되지 않은 프로퍼티가 있으면 오류
let book2: Book = {
    name: "한 입 크기로 잘라먹는 타입스크립트",
    price: 33000,
    // skill: "typescript", // Book 타입에는 skill이 없기 때문에 오류 발생
}

// ✅ 초과 프로퍼티 검사를 피하는 방법
let book3: Book = programmingBook; // 객체 리터럴이 아닌 변수나 객체로 전달하면 초과 프로퍼티 검사가 적용되지 않음

 

📌 대수 타입

// ✅ 대수 타입 (Algebraic Types)
// 여러 개의 타입을 조합해 새로운 타입을 만드는 방식
// 대표적으로 합집합(Union), 교집합(Intersection)이 존재

// 1. 합집합 - Union 타입
// 여러 타입 중 하나만 해당되면 할당 가능
let a: string | number | boolean;
a = 1;
a = "hello";
a = true;

// 배열에서의 Union 예시
let arr: (number | string | boolean)[] = [1, "hello", true];

// 객체 타입 간 Union 예시
type Dog = {
    name: string;
    color: string;
};

type Person = {
    name: string;
    language: string;
};

type Union1 = Dog | Person

let union1: Union1 = { name: "", color: "" };               // Dog 타입 객체
let union2: Union1 = { name: "", language: "" };            // Person 타입 객체
let union3: Union1 = { name: "", color: "", language: "" }; // Dog + Person 구조도 허용
// let union4: Union1 = { name: "" }; // Dog도 Person도 아님 → 오류

// 2. 교집합 - Intersection 타입
// 기본 타입 간에는 공통된 부분이 없어 never로 추론됨
let variable: number & string; // 존재할 수 없는 타입 → 오류

// 객체 타입 간 Intersection 예시
type Intersection = Dog & Person;

// 두 타입의 모든 속성을 포함해야 함
let intersection: Intersection = {
    name: "",
    color: "",
    language: "",
};

 

📌 타입 추론

// ✅ 타입 추론 (Type Inference)
// 타입스크립트는 타입이 명시되지 않은 변수나 표현식의 타입을 자동으로 추론함
// 덕분에 모든 변수에 타입을 직접 작성하지 않아도 코드를 작성할 수 있음

// 1. 변수 선언 시 초기값을 통해 타입 추론
let a = 10; // 타입은 number로 추론됨
let b = "hello"; // 타입은 string으로 추론됨
let c = {
    id: 1,
    name: "강연수",
    profile: {
        nickname: "강수",
    },
    urls: ["https://isliife2.tistory.com/"],
};

// 2. 구조 분해 할당도 추론 가능
let { id, name, profile, urls } = c;
let [one, two, three] = [1, "hello", true];

// 3. 함수 반환값과 기본값이 있는 매개변수도 추론됨
function func(message = "hello") { // message: string으로 추론
    return "hello"; // 반환 타입은 string으로 추론됨
}

// 4. 암시적 any (Implicit any)
// 타입 없이 선언만 하고 초기값이 없으면 → 암시적으로 any 타입
// 이후 할당된 값에 따라 타입이 변경됨 ("any의 진화"라고 함)
let d;  // 초기에는 any로 추론
d = 10; // 이후엔 number처럼 동작
d.toFixed();
d = "hello"; // 이후엔 string처럼 동작
d.toLowerCase();
// d.toFixed(); // 현재 d는 string 타입이므로 오류

// 5. const로 선언한 변수의 타입 추론
const num = 10;      // 타입은 10 (number 리터럴 타입)
const str = "hello"; // 타입은 "hello" (string 리터럴 타입)

// 6. 배열의 타입 추론
let arr = [1, "string"]; // (number | string)[] 으로 추론됨 (최적 공통 타입)

 

📌 타입 단언

// ✅ 타입 단언 (Type Assertion)
// 타입스크립트가 추론한 타입이 아닌, 프로그래머가 지정한 타입으로 "단언"하는 문법 (문법: 값 as 타입)
type Person = {
    name: string;
    age: number;
};

let person = {} as Person; // 빈 객체를 Person 타입으로 단언
person.name = "강연수";
person.age = 24;

type Dog = {
    name: string;
    color: string;
};

let dog = {
    name: "강말리",
    color: "white",
    breed: "말티즈", // 초과 프로퍼티지만 단언을 통해 무시 가능
} as Dog;

// ✅ 타입 단언 규칙
// A as B → A가 B의 슈퍼타입이거나 서브타입일 때만 가능
let num1 = 10 as never; // number는 never의 슈퍼타입
let num2 = 10 as unknown; // number는 unknown의 서브타입
// let num3 = 10 as string; // number와 string은 관련 없음 → 오류

// ✅ const 단언
// 값을 리터럴 타입 또는 readonly 프로퍼티로 고정시킴
let num4 = 10 as const; // 타입: 10 (리터럴 타입)
let cat = {
    name: "야옹이",
    color: "yellow",
} as const; // 모든 프로퍼티가 readonly + 리터럴 타입으로 고정됨

// ✅ Non Null 단언
// 값이 null 또는 undefined가 아님을 단언
type Post = {
    title: string;
    author?: string;
};

let post: Post = {
    title: "게시글 1",
    author: "강연수",
}

const len: number = post.author!.length; // !를 붙이면 "null/undefined 아님"으로 단언

 

📌 타입 좁히기

// ✅ 타입 좁히기 (Type Narrowing)
// 하나의 넓은 타입(유니온 등)을 조건문 등을 통해 더 구체적인 타입으로 "좁혀서" 사용하는 방법
// typeof, instanceof, in 연산자를 활용해 타입을 좁힐 수 있음
type Person = {
    name: string;
    age: number;
}

function func(value: number | string | Date | null | Person) {
    // value.toFixed();
    // value.toUpperCase();

    if (typeof value === "number") { // ✅ 타입 가드 사용: typeof
        console.log(value.toFixed());
    } else if (typeof value === "string") { // ✅ 타입 가드 사용: typeof
        console.log(value.toUpperCase());
    } else if (value instanceof Date) { // ✅ 타입 가드 사용: instanceof (내장 클래스에만 사용 가능)
        console.log(value.getTime());
    } else if (value && "age" in value) { // ✅ 타입 가드 사용: in (사용자 정의 타입 확인에 유용)
        console.log(`${value.name}은 ${value.age}살 입니다`);
    }
}

 

📌 서로소 유니온 타입

// ✅ 서로소 유니온 타입 (Discriminated Union)
// 서로 겹치지 않는 (교집합이 없는) 타입들로 이루어진 유니온 타입
// 각 타입을 구분할 수 있는 고유한 리터럴 값(tag, state 등)을 포함하는 것이 특징

// 1. 유저 역할 예시
type Admin = {
    tag: "ADMIN";
    name: string;
    kickCount: number;
};

type Member = {
    tag: "MEMBER";
    name: string;
    point: number;
};

type Guest = {
    tag: "GUEST";
    name: string;
    visitCount: number;
};

// 서로소 유니온 타입: 공통 필드(tag)를 기준으로 타입을 안전하게 구분할 수 있음
type User = Admin | Member | Guest;

function login(user: User) {
    switch (user.tag) {
        case "ADMIN": {
            console.log(`${user.name}님 현재까지 ${user.kickCount}명 강퇴했습니다.`);
            break;
        }
        case "MEMBER": {
            console.log(`${user.name}님 현재까지 ${user.point}점 모았습니다.`);
            break;
        }
        case "GUEST": {
            console.log(`${user.name}님 현재까지 ${user.visitCount}번 방문하셨습니다.`);
            break;
        }
    }
}

// 2. 비동기 작업 처리 예시
type LoadingTask = {
    state: "LOADING";
};

type FailedTask = {
    state: "FAILED";
    error: {
        message: string;
    };
};

type SuccessTask = {
    state: "SUCCESS";
    response: {
        data: string;
    };
}

// 공통 프로퍼티인 state를 기준으로 구분 가능한 서로소 유니온 타입
type AsyncTask = LoadingTask | FailedTask | SuccessTask;

function processResult(task: AsyncTask) {
    switch (task.state) {
        case "LOADING": {
            console.log("로딩 중");
            break;
        }
        case "FAILED": {
            console.log(`에러 발생: ${task.error.message}`);
            break;
        }
        case "SUCCESS": {
            console.log(`성공: ${task.response.data}`);
            break;
        }
    }
}

 

⬇️ 다음 내용은 아래 글을 참고

인프런 강의 - 한 입 크기로 잘라먹는 타입스크립트 (함수와 타입)