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

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

 

📌 함수 타입

// ✅ 함수 타입 정의
// 반환값 타입은 타입스크립트가 자동 추론 가능 → 생략 가능
function func(a: number, b: number): number { 
    return a + b;
}

// ✅ 화살표 함수 타입 정의
const add = (a: number, b: number): number => a + b;

// ✅ 기본값이 설정된 매개변수
// ❗ 선택적 매개변수는 항상 필수 매개변수 뒤에 위치해야 함
function introduce(name = "강연수", age: number, tall?: number) {
    console.log(`name : ${name}`);

    // 선택적 매개변수는 undefined일 수 있으므로 타입 좁히기를 통해 사용
    if (typeof tall === 'number') {
        console.log(`tall : ${tall + 10}`);
    }
}

introduce("강연수", 24, 160);
introduce("강말리", 5);

// ✅ 나머지 매개변수 (rest parameter)
function getSum(...rest: number[]) {
    let sum = 0;
    rest.forEach((it) => (sum += it));

    return sum;
}

getSum(1, 2, 3);
getSum(1, 2, 3, 4, 5);

 

📌 함수 타입 표현식과 호출 시그니쳐

// ✅ 함수 타입 표현식 (Function Type Expression)
// 여러 함수가 같은 타입 구조를 따를 경우 중복 코드 제거 가능
// 함수 구현과 타입 선언을 분리할 수 있어 가독성과 유지보수성 향상
type Operation = (a: number, b: number) => number;

const add: Operation = (a, b) => a + b;
const sub: Operation = (a, b) => a - b;
const multiply: Operation = (a, b) => a * b;
const divide: Operation = (a, b) => a / b;

// ✅ 호출 시그니처 (Call Signature)
// 객체 형태의 타입 선언 안에서 함수를 정의하는 문법
// 함수 타입 표현식과 역할은 같지만, 객체처럼 사용할 수 있는 추가적인 장점 보유
type Operation2 = {
    (a: number, b: number): number;
    name: string; // 호출 시그니처 안에 일반 속성을 추가하면 '하이브리드 타입'이 됨
};

const add2: Operation2 = (a, b) => a + b;
const sub2: Operation2 = (a, b) => a - b;
const multiply2: Operation2 = (a, b) => a * b;
const divide2: Operation2 = (a, b) => a / b;

 

📌 함수 타입의 호환성

// ✅ 함수 타입의 호환성
// "이 함수 타입을 다른 함수 타입처럼 써도 괜찮을까?"를 판단하는 기준

// ✅ 기준 1: 반환값 타입이 호환되는가?
// ➜ 더 구체적인 값(하위 타입)은 더 넓은 값(상위 타입)에 들어갈 수 있음
type A = () => number;
type B = () => 10;

let a: A = () => 10;
let b: B = () => 10;

a = b; // OK: a()는 실제 b()를 호출 → 항상 10을 반환하니, number를 기대하는 a에도 문제 없음
// b = a; // ERROR: b()는 실제 a()를 호출 → 10이 아닐 수도 있음 (예: 999, -1, 등등)

// ✅ 기준 2: 매개변수가 호환되는가?
// ➜ 매개변수는 반대로, "더 넓은 타입"을 "더 좁은 타입"으로 대입하는 것은 불가

// 2-1. 매개변수의 개수가 같을 때
type C = (value: number) => void;
type D = (value: 10) => void;

let c: C = (value) => {};
let d: D = (value) => {};

// c = d; // ERROR: c(20)는 실제 d(20)를 호출 → d는 10 아니면 못 받아서 위험
d = c; // OK: d(10)는 실제 c(10)을 호출 → c는 number 전체 OK, 문제 없음

// 2-2. 매개변수의 개수가 다를 때
type Func1 = (a: number, b: number) => void;
type Func2 = (a: number) => void;

let func1: Func1 = (a, b) => {};
let func2: Func2 = (a) => {};

func1 = func2; // OK: func1(1, 2)는 실제 func2(1)를 호출 → b는 무시되므로 문제 없음
// func2 = func1; // ERROR: func2(1)는 실제 func1(1, undefined)를 호출 → b는 누락될 수 있어 위험

 

📌 함수 오버로딩

// ✅ 함수 오버로딩 
// → 하나의 함수 이름으로, 매개변수 개수나 타입에 따라 여러 버전을 정의하는 방식
// 자바스크립트는 지원 X, 오직 타입스크립트만 지원

// 오버로드 시그니처: "이런 버전이 존재해!"라고 선언만 해주는 부분
function func(a: number): void;
function func(a: number, b: number, c: number): void;

// 구현 시그니처: 실제 함수 구현
function func(a: number, b?: number, c?: number) {
    if (typeof b === 'number' && typeof c === 'number') {
        console.log(a + b + c);
    } else {
        console.log(a * 20);
    }
};

 

📌 사용자 정의 타입 가드

// ✅ 사용자 정의 타입가드
type Dog = {
    name: string;
    isBark: boolean;
};

type Cat = {
    name: string;
    isScratch: boolean;
};

type Animal = Dog | Cat;

// 사용자 정의 타입가드
function isDog(animal: Animal): animal is Dog { // animal is Dog: 해당 함수가 true를 반환하면, 타입스크립트는 animal을 Dog로 간주
    return (animal as Dog).isBark !== undefined;
}

function isCat(animal: Animal): animal is Cat { // animal is Cat: 해당 함수가 true를 반환하면, 타입스크립트는 animal을 Cat으로 간주
    return (animal as Cat).isScratch !== undefined;
}

// 타입 가드를 활용해 Animal의 타입을 안전하게 좁혀 사용
function warning(animal: Animal) {
    if (isDog(animal)) {
        console.log("소음 주의")
    } else if (isCat(animal)) {
        console.log("부상 주의")
    }
}

 

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

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