06_04 함수와 타입 실습

하위 태스크 1

함수 타입 정의

매개변수와 반환값 타입 추가

src/functions.ts:

function add(a: number, b: number): number {
    return a + b;
}

하위 태스크 2

선택적/기본값 매개변수

?와 기본값 사용, 동작 확인

src/functions.ts:

// ...
 
function sayHi(name: string = "이정환", tall?: number): void {
    console.log(`안녕하세요. 제 이름은 ${name}입니다.`);
    if (tall !== undefined) {
        console.log(`\t제 키는 ${tall}cm입니다.`);
    }
}
 
sayHi();
sayHi("홍길동");
sayHi("이철수", 174);

실행 결과:

안녕하세요. 제 이름은 이정환입니다.
안녕하세요. 제 이름은 홍길동입니다.
안녕하세요. 제 이름은 이철수입니다.
        제 키는 174cm입니다.

하위 태스크 3

나머지 매개변수

튜플 타입으로 정확한 개수 제한

src/functions.ts:

// ...
 
function getAverage(...values: [number, number, number]): number {
    return values.reduce((result, value) => result + value) / values.length;
}
 
console.log(getAverage(23, 20, 22));
// console.log(getAverage(10, 15, 21, 30)); // Expected 3 arguments, but got 4.

실행 결과:

21.666666666666668

하위 태스크 4

함수 타입 표현식

type으로 함수 타입 재사용

src/function-types.ts:

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;
 
console.log(add(1, 2), sub(1, 2), multiply(1, 2), divide(1, 2));

실행 결과:

3 -1 2 0.5

하위 태스크 5

호출 시그니처

객체 형태 함수 타입, 프로퍼티 추가

src/function-types.ts:

type Operation2 = {
    (a: number, b: number): number;
    name: string;
};
 
const add2: Operation2 = (a, b) => a + b;
add2.name = "add";
 
console.log(add2(1, 2));

실행 결과:

3

하위 태스크 6

반환값 호환성

공변적 동작 확인

src/function-compatibility.ts:

type FunctionOne = () => number;
type FunctionTwo = () => 10;
 
let functionOne: FunctionOne = () => 10;
let functionTwo: FunctionTwo = () => 10;
 
functionOne = functionTwo;
// functionTwo = functionOne; // Type 'FunctionOne' is not assignable to type 'FunctionTwo'.

하위 태스크 7

매개변수 호환성

반공변적 동작 확인

src/function-compatibility.ts:

// ...
 
type FunctionThree = (value: number) => void;
type FunctionFour = (value: 10) => void;
 
let functionThree: FunctionThree = (value) => {};
let functionFour: FunctionFour = (value) => {};
 
// functionThree = functionFour; // Type 'FunctionFour' is not assignable to type 'FunctionThree'.
functionFour = functionThree;

하위 태스크 8

함수 오버로딩

오버로드 시그니처와 구현 시그니처 작성

src/overloading.ts:

function overloaded(a: string): string;
function overloaded(a: string, b: number, c: boolean): boolean;
 
function overloaded(a: string, b?: number, c?: boolean) {
    if (b !== undefined && c !== undefined) {
        return c;
    }
    return a;
}

하위 태스크 9

사용자 정의 타입 가드

animal is Dog 형태 타입 가드 함수 작성

src/type-guards.ts:

type Dog = {
    name: string;
    hungry: boolean;
};
 
type Cat = {
    name: string;
    bored: boolean;
};
 
function isDog(value: unknown): value is Dog {
    if (typeof value !== "object" || value === null) {
        return false;
    }
    const dog = value as Dog;
    return typeof dog.name === "string" && typeof dog.hungry === "boolean";
}
 
function isCat(value: unknown): value is Cat {
    if (typeof value !== "object" || value === null) {
        return false;
    }
    const cat = value as Cat;
    return typeof cat.name === "string" && typeof cat.bored === "boolean";
}
 
let animal: Dog | Cat = {
    name: "Jee",
    bored: true,
};
 
if (isDog(animal)) {
    console.log(`${animal.hungry ? "배고프다" : "배고프지 않다"}, 멍.`);
} else if (isCat(animal)) {
    console.log(`${animal.bored ? "심심하다" : "심심하지 않다"}, 냥.`);
} else {
    console.log("알 수 없는 동물입니다.");
}

실행 결과:

심심하다, 냥.