5장 함수

5.1 함수의 선언과 호출 방법

5.1.1 함수의 선언

// 함수 선언식
function addNumber(a: number, b: number): number {
  return a + b;
}
console.log(addNumber(5, 15)); // 20

// 함수 표현식
let multiplyNumber = function (a: number, b: number): number {
  return a * b;
};
console.log(multiplyNumber(4, 5)); // 20

// 화살표 함수
let divideNumber = (a: number, b: number): number => {
  return a / b;
};
console.log(divideNumber(24, 3)); // 8

// 함수 선언식 반환 값 타입 생략
function addNumber(a: number, b: number) {
  return a + b;
}
console.log(addNumber(5, 15)); // 20

// 함수 표현식 반환 값 타입 생략
let multiplyNumber = function (a: number, b: number) {
  return a * b;
};
console.log(multiplyNumber(4, 5)); // 20

// 화살표 함수 반환 값 타입 생략
let divideNumber = (a: number, b: number) => {
  return a / b;
};
console.log(divideNumber(24, 3)); // 8

5.1.2 함수의 매개변수

1) 매개변수 선언 방법

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

console.log(add(1, 2)); // 3

2) 기본 매개변수

// 매개면수 greeting의 기본값을 'Hello'로 설정했습니다.
function greet(name: string, greeting: string = "Hello"): void {
  console.log(`${greeting}, ${name}!`);
}

greet("John", "Hi"); // Hi, John!

// 매개변수 greeting에 해당하는 값을 인자로 넘기지 않아 기본값인 'Hello'를 출력했습니다.
greet("John"); // Hello, John!

3) 선택적 매개변수

function greetSomeone(name: string, greeting?: string): void {
  if (greeting) {
    console.log(`${greeting}, ${name}!`);
  } else {
    console.log(`Hello, ${name}!`);
  }
}

greetSomeone('John'); // Hello, John!
greetSomeone('John', 'Hi'); // Hi, John!

4) 나머지 매개변수

function sum(...numbers: number[]): number {
  return numbers.reduce((prev, curr) => prev + curr, 0);
}

console.log(sum(1, 2, 3)); // 6

5.1.3 함수의 반환 값

1) 기본 반환 타입

//                                ↓ : number로 반환 타입 명시
function addNember(a: number, b: number): number {
  return a + b;
}

let result = addNember(11, 22); // 반환 값 33의 타입은 number입니다.

2) void 반환 타입

function log(message: string): void {
  console.log(message);
}

log("Hello, TypeScript!"); // 출력: Hello, TypeScript!

3) never 반환 타입

function error(message: string): never {
  throw new Error(message);
}

error('Something went wrong'); // Error: Something went wrong

5.2 함수의 this 타입

5.2.1 명시적 this 타입

interface Clock {
  time: Date;
  setTime(date: Date): void;
}

function setClockTime(this: Clock, date: Date): void {
  this.time = date;
}

const clock: Clock = {
  time: new Date(),
  setTime: setClockTime,
}

clock.setTime(new Date());

console.log(clock.time);

5.2.2 암시적 this 타입

interface Clock {
  time: Date;
  setTime(date: Date): void;
  getTime(): Date;
}

const clock: Clock = {
  time: new Date(),
  setTime(date: Date) {
    this.time = date;
  },
  getTime() {
    return this.time;
  },
};

clock.setTime(new Date());
console.log(clock.getTime());

5.3 오버로딩

5.3.1 오버로드 시그니처

//오버로드 시그니처
function add(a: number, b: number): number;
function add(a: string, b: string): string;
// Error 함수 구현이 없거나 선언 바로 다음에 나오지 않습니다.

5.3.2 구현 시그니처

// 구현 시그니처
function add(a: number | string, b: number | string): number | string {
  if (typeof a === "number" && typeof b === "number") {
    return a + b;
  } else if (typeof a === "string" && typeof b === "string") {
    return a.concat(b);
  } else {
    throw new Error("Invalid types for addition");
  }
}

console.log(add(1, 2)); // 3
console.log(add("Hello", "World")); // "HelloWorld"
console.log(add(1, 2, 3)); //Error 2개의 인수가 필요한데 3개를 가져왔습니다.
console.log(add(true, false)); //Error 이 호출과 일치하는 오버로드가 없습니다.

//오버로드 시그니처
function greet(name: string): string;
function greet(name: string, age: number): string;

// 구현 시그니처
function greet(name: string, age?: number): string {
    if (age !== undefined) {
        return `안녕하세요, 제 이름은 ${name}이고, 나이는 ${age}살입니다.`;
    } else {
        return `안녕하세요, 제 이름은 ${name}입니다.`;
    }
}

console.log(greet('김지윤')); // "안녕하세요, 제 이름은 김지윤입니다."
console.log(greet('김지윤', 3)); // "안녕하세요, 제 이름은 김지윤이고, 나이는 3살입니다."

5.3.3 예시

1) 타입별칭 예시

type FoodOrder = {
  (menu: string): string,
  (menu: string, quantity: number): string,
};

let order: FoodOrder = (menu: string, quantity?: number): string => {
  if (typeof quantity === "number") {
    return `${menu} ${quantity}개를 주문하겠습니다.`;
  } else {
    return `${menu} 먹고싶어요`;
  }
};

console.log(order("자몽 허니 블랙티", 2)); //"자몽 허니 블랙티 2개를 주문하겠습니다."
console.log(order("훠궈")); //"훠궈 먹고 싶어요"

2) 인터페이스 예시

interface ReviewEvent {
  (menu: string): string;
  (menu: string, review: number): string;
}

let reviewEvent: ReviewEvent = (menu: string, review?: number): string => {
  if (typeof review === "number") {
    return `손님이 ${menu}을(를) 주문하고 리뷰 이벤트 ${review}번 품목을 선택했습니다.`;
  } else {
    return `손님이 ${menu}을(를) 주문했습니다.`;
  }
};

console.log(reviewEvent("피자", 1)); //"손님이 피자을(를) 주문하고 리뷰 이벤트 1번 품목을 선택했습니다."
console.log(reviewEvent("불족발")); //"손님이 불족발을(를) 주문했습니다."

5.4 함수 타입의 호환성

5.4.1 타입의 공변성과 반공변성, 이변성

1) 공변성

let A: Array<string> = []; // 서브 타입
let B: Array<string | number> = [];// 슈퍼 타입

B = A; // Ok
A = B; // Error: '(string | number)[]' 형식은 'string[]' 형식에 할당할 수 없습니다.

2) 반공변성

type T<Param> = (param: Param) => void;
let A: T<number> = (param) => {
  // 서브타입
  console.log(param); 
};
let B: T<string | number> = (param) => {
  // 슈퍼타입
  console.log(param); 
};
A = B; // OK 
B = A; // Error: 'T<number>' 형식은 'T<string | number>' 형식에 할당할 수 없습니다.

3) 이변성

type T<Param> = (param: Param) => void;
let A: T<number> = (param) => {
  console.log(param);
};
let B: T<string | number> = (param) => {
  console.log(param);
};
A = B; // OK
B = A; // OK??

5.4.2 반환값의 타입에 따른 호환성

type Novel = () => "Harry Potter"; // 서브타입
type Book = () => string; // 슈퍼타입

let novelFunc: Novel = () => "Harry Potter";
let bookFunc: Book = () => "Book";

bookFunc = novelFunc; // OK
novelFunc = bookFunc; // Error: 'Book' 형식은 'Novel' 형식에 할당할 수 없습니다.

5.4.3 매개변수의 타입에 따른 호환성

1) 매개변수의 개수가 같은 경우

type Novel = (title: "Harry Potter") => void; // 서브타입
type Book = (title: string) => void; // 슈퍼타입

let novelFunc: Novel = (title) => {
  /*..*/
};
let bookFunc: Book = (title) => {
  /*..*/
};

novelFunc = bookFunc; // OK
bookFunc = novelFunc; // Error: 'Novel' 형식은 'Book' 형식에 할당할 수 없습니다.

interface Beverage {
  // 슈퍼타입
  name: string;
  size: string;
}

interface Coffee extends Beverage {
  // 서브타입
  kind: string;
}
let orderBeverage = (beverage: Beverage) =>
  console.log(
    `손님이 ${beverage.size} 사이즈의 ${beverage.name}를 주문하셨습니다.`
  );
let orderCoffee = (coffee: Coffee) =>
  console.log(
    `손님이 ${coffee.size} 사이즈의 ${coffee.kind} 커피를 주문하셨습니다.`
  );

orderCoffee = orderBeverage; // Ok
orderBeverage = orderCoffee; // Error: 'coffee' 및 'beverage' 매개 변수의 형식이 호환되지 않습니다.

orderBeverage = orderCoffee; // 컴파일 에러가 발생하지 않습니다.
orderBeverage({ name: "아메리카노", size: "Tall" });
// "손님이 Tall 사이즈의 undefined 커피를 주문하셨습니다."

2) 매개변수의 개수가 다른 경우

type LoginProp = (email: string, name: string) => void;
type ResetPasswordProp = (email: string) => void;

let login: LoginProp = (email, name) => {
  console.log(`안녕하세요!, ${name} 님! ${email} 계정으로 로그인하셨습니다.`);
};

let resetPassword: ResetPasswordProp = (email) => {
  console.log(`${email}으로 비밀번호 재설정 메일이 전송되었습니다.`);
};

login("hayeon@test.com", "이하연"); // "안녕하세요!, 이하연 님! hayeon@test.com 계정으로 로그인하셨습니다."
login = resetPassword; // Ok
login("hayeon@test.com", "이하연"); // "hayeon@test.com으로 비밀번호 재설정 메일이 전송되었습니다." 

resetPassword = login; // Error: 'LoginProp' 형식은 'ResetPasswordProp' 형식에 할당할 수 없습니다.
resetPassword("hayeon@test.com"); // "안녕하세요!, undefined 님! hayeon@test.com 계정으로 로그인하셨습니다."