한입 크기로 잘라 먹는 타입스크립트 : 함수와 타입

함수 타입

함수를 설명하는 가장 좋은 방법

어떤 매개변수를 받고, 어떤 결과값을 반환하는지 이야기하는 것

 

타입스크립트의 함수를 설명하는 가장 좋은 방법

어떤 타입의 매개변수를 받고, 어떤 타입의 결과값을 반환하는지 이야기하는 것

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

 

화살표 함수의 타입을 정의하는 방법

함수의 선언식과 동일한 방식

const add = (a: number, b: number) => a + b;

 

함수의 매개변수

function introduce(name = "이정환") { // 기본값 기준으로 타입 추리(string)
    console.log(`name: ${name}`)
}

이때 주의할 부분

매개변수로 다른 타입을 넘겨주는 경우 오류 발생

introduce(1); // string인데 number 넘겨주니 당연히 오류 발생

초기값과 다른 타입 선언 시 오류 발생

function introduce(name: number = "이정환") { // 타입 충돌로 인한 오류 발생
    console.log(`name: ${name}`)
}

 

선택적 매개변수

필수 매개변수가 아닌, 선택적으로 전달 가능한 매개변수

선택적 매개변수는 필수 매개변수 앞에 올 수 없음

아래 코드와 같은 경우, tall을 선택적 매개변수로 설정할 필요가 있음

function introduce(name = "이정환", tall: number) {
    console.log(`name: ${name}`)
    console.log(`tall: ${tall}`)
}

introduce('이정환', 175);

introduce('이정환') // 오류 발생: 필수로 들어가야 할 tall 값이 없음

선택적 매개변수 설정 방법

'?' 추가 = type 값이 tall : number | undefined로 선언됨

function introduce(name = "이정환", tall?: number) {
    console.log(`name: ${name}`)
    console.log(`tall: ${tall}`)
}

따라서 아래 코드에선 오류 발생

    console.log(`tall: ${tall + 10}`) // 오류 발생 : tall은 undefined 일 수 있습니다.

오류 발생하지 않도록 하려면, 아래처럼 if문으로 타입을 좁혀줘야 함

    if (typeof tall === 'number') {
        console.log(`tall: ${tall + 10}`) // 오류 발생 : tall은 undefined 일 수 있습니다.
    }

 

매개변수 개수

js 문법인 '...rest'를 이용하면 매개변수의 개수 상관 없이 함수 호출 가능

function getSum(...rest: number[]) { // 매개변수의 개수 상관 없음
    let sum = 0;
    rest.forEach(it => sum += it);

    return sum;
}

getSum(1, 2, 3) // 6
getSum(1, 2, 3, 4, 5) // 15

개수 지정

튜플 방식 사용하면 매개변수 개수 지정 가능

function getSum(...rest: [number, number, number]) //  매개변수의 개수 지정

 

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

함수의 타입을 별도로 정의하는 방법

함수 타입 표현식

매개변수의 타입과 반환값의 타입을 함수의 선언식에 직접 정의하지 않고, 마치 변수의 타입을 정의하듯 깔끔하게 정의 가능

// const add = (a: number, b: number): number => a + b;

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

const add: Add = (a, b) => a + b;

장점

중복되는 타입 정의를 생략할 수 있음

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;

아래처럼 풀어써도 동일함(단, 가독성은 떨어짐)

const add: (a: number, b: number) => number = (a, b) => a + b;

 

호출 시그니처(콜 시그니처)

실제 함수 작성 후 함수 타입을 직접 정의할 때처럼 별도로 함수의 타입을 정의하는 문법

객체처럼 생긴 이유 : js에선 함수도 객체이기 때문

type Operation2 = { // 호출 시그니처 방식으로 함수 타입 정의
    (a: number, b: number): number;
}

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;

 

하이브리드 타입

타입을 갖는 변수를 객체로도, 함수로도 사용 가능

type Operation2 = {
    (a: number, b: number): number;
    name: string; // 하이브리드 타입
}

const add2: Operation2 = (a, b) => a + b;

add2.name

 

함수 타입의 호환성

특정 함수 타입을 아래 두가지 기준에 따라 다른 함수 타입으로 취급해도 괜찮은지 판단

1. 반환값의 타입이 호환되는가

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

기준1. 반환값이 호환되는가

업캐스팅은 허용, 다운캐스팅은 허용 안함

//기준 1. 반환값이 호환되는가
type A = () => number;
type B = () => 10;

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

a = b; // 허용됨 : number를 10(number literal)으로 좁히는 것은 가능 -> 업캐스팅
b = a; // 허용 안됨 : 10을 number로 넓히는 것은 불가능 -> 다운캐스팅

 

기준2. 매개변수의 타입이 호환되는가

2-1. 매개변수의 개수가 같을 때

반환값과는 반대로 다운캐스팅을 허용, 업캐스팅은 허용 안함

// 기준2. 매개변수가 호환되는가
// 2-1. 매개변수의 개수가 같을 때

type C = (value: number) => void;
type D = (value: 10) => void;

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

c = d; // 허용 안됨: 매개변수일 때는 업캐스팅일 때 안됨
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; // 허용 안됨 : 업캐스팅

// 이유 : 아래 함수를 만드려고 하는 것과 똑같은 상황
let testFunc = (animal: Animal) => {
    console.log(animal.name); // 가능
    console.log(animal.color); // 불가능
}

dogFunc = animalFunc; // 허용됨

// 이유 : 아래 함수를 만드려고 하는 것과 똑같은 상황
let testFunc2 = (dog: Dog) => {
    console.log(dog.name); // 가능
}

2-2. 매개변수의 개수가 다를 때

할당하려고 하는 함수의 타입의 개수가 더 적을 때 호환 가능

매개변수의 타입은 일치해야 함

//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; // 허용 : func1의 매개변수가 더 많은 경우 -> 가능
// func2 = func1; // 허용 안함 : func2의 매개변수가 더 적은 경우 -> 불가능