TS: 한입크기로 잘라먹는 타입스크립트 챌린지_day7

🫖 진도

 

4. 함수와 타입 (3/5)

• 함수 타입
• 함수 타입 표현식과 호출 시그니처
• 함수 타입의 호환성

🍱 요약

 

함수 타입

/**
 * 함수 타입 정의
 */
// 함수를 설명하는 가장 좋은 방법
// (어떤 매개변수를 받고, 어떤 결과값을 반환하는지 이야기)
// => 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과값을 반환하는지 이야기

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

/**
 * 화살표 함수를 정의하는 법
 */
//  (a: number, b: number): number는
//  (a: number, b: number)로 생략 가능
const add = (a: number, b: number): number => a + b;

/**
 * 함수의 매개변수
 */
// 앞에 필수 매개변수가 먼저 오고 마지막에 선택적 매개변수(=?)가 와야함
function introduce(name = "marvin", tall?: number) {
    console.log(`name: ${name}`);
    if (typeof tall === "number") {
        console.log(`tall: ${tall}+ 1`);
    }
}
introduce("marvin", 185);
introduce("marvin");

 

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

/**
 * 함수 타입 표현식 Function Type Expresstion
 */

type Operation = (a: number, b: number) => number;

// const add:Operation = (a, b) => a + b; 밑의 add랑 같은 내용
const add: (a: number, b: number) => number = (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 Signiture
 */

type Operation2 = {
    (a: number, b: number): number;
    name: string;
    // -> 객체로도 쓰고 함수로도 쓸 수 있는 hybrid type
    // -> 함수도 객체이기 떄문에 가능
};
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;

// add2();
// add2.name;

 

함수 타입 호환성

/**
 * 함수 타입 호환성
 * 특정 함수 타입을 다른 함수 타입으로 취급해도 괜찮은가를 판단하는
 * 1. 반환값의 타입이 호환되는가?
 * 2. 매개변수의 타입이 호환되는가?
 */

// 1. 반환값의 타입이 호환되는가?
type A = () => number;
type B = () => 10;

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

a = b; // b = a;
// - B <= A
// - number literal type <= number type
// - 반환값 기준이면 다운캐스팅 X, 업 캐스팅만 가능


// 2. 매개변수의 타입이 호환되는가?

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

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

// c = d;
// - C <= D
// - number type <= number literal type
// - 매개변수 기준이면 업 캐스팅 X
d = c;

  /* ++ 객체로 예시 */
  type Animal = {
      name: string;
  };
  type Dog = {
      name: string;
      color: string;
  };
  let animalFunc = (animal: Animal) => {
      console.log(animal.name);
  };

  let dogFunc = (dog: Dog) => {
      console.log(dog.name);
      console.log(dog.color);
  };
  // animalFunc = dogFunc;
  // - Animal <= Dog
  // - Dog타입은 Animal타입의 서브 타입이 때문에 Animal이 가진 타입을 다 가지고 있음.
  // - 그렇지만 Animal은 Dog타입이 가진 타입을 다 가지고 있지 않기 때문에 안된다
  // - 매개변수 기준일 경우에는 다운 캐스팅만 가능하다.
  dogFunc = animalFunc;


// 2-2. 매개변수의 갯수가 다를 때
// - 타입 같은 게 있어야 가능
// - type Func1 = (a: string, b: number) => void; 이러면 못함
type Func1 = (a: number, b: number) => void;
type Func2 = (a: number) => void;

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

func1 = func2; // func2 = func1;
// - Func2 <= Func1
// - Func2의 매개변수의 갯수는 1개, Func1은 2개인데
// - 1개 <= 2개 하려니 호환이 안되는 것

 

 

🍚 과제

Q1. 아래의 코드를 완성해 오류를 제거하세요.

function introduce(name = "이정환", tall?: number){
if(!tall){
  console.log(`안녕하세요 ${name}입니다.`)
} else {
  console.log(`안녕하세요 ${name}입니다. 키는 ${tall}입니다.`)
}
}

 

Q2. 아래의 코드를 완성해 오류를 제거하세요.

type Func = (a: number, b: string) => boolean;