[typescript] 함수

내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다.

---

함수 리턴타입

함수는 매개변수의 타입과 리턴타입을 지정해야 한다.

function add(num1: number, num2: number): void {
    console.log(num1 + num2);
}

리턴타입이 없을 경우는 void를 사용하고

function add(num1: number, num2: number): numbr {
    return num1 + num2;
}

리턴타입이 있을 경우 리턴타입(number)을 지정하면 된다.

function isAdult(age: number): boolean {
    return age > 19;
} 

isAdult도 이렇게 지정할 수 있다.

선택적 매개변수

인터페이스 처럼 함수의 매개변수도 optional로 지정할 수 있다.

function hello(name: string) {
    return `Hello, ${name || "World"}`;
}

const result = hello(); // 오류 발생

이런 경우는 name을 optional로 지정해야 한다. (선택적 매개변수)

function hello(name?: string) 

아래와 같이 사용할 수 있다.

function hello(name?: string) {
    return `Hello, ${name || "World"}`;
}

const result = hello();
const result2 = hello("Sam");
// const result3 = hello(123); // 이건 안된다

참고로 javascript에서 매개변수의 디폴트 값을 줄 수 있다.

function hello2(name = "World") {
    return `Hello, ${name}`;
}

다음은 이름과 나이를 받아서 문자열을 리턴하는 함수이다.

function hello(name: string, age?: number): string {
    if (age !== undefined) {
        return `Hello, You are ${age}`;
    } else {
        return `Hello, ${name}`;
    }
}

console.log(hello("Sam"));
console.log(hello("Sam",30));

이렇게 사용할 수 있다.

여기서 선택적 매개변수가 앞에오면 안된다. 이런 경우는 아래와 같은 방식을 사용해야 한다.

function hello(age?: number | undefined, name: string, ): string {
    if (age !== undefined) {
        return `Hello, You are ${age}`;
    } else {
        return `Hello, ${name}`;
    }
}

console.log(hello(30, "Sam"));
console.log(hello(undefined, "Sam"));

나머지 매개변수

다음은 나머지 매개변수의 타입 작성법이다.

숫자들을 전달받아서 모두 더해주는 함수이다.

function add(...nums: number[]) {
    return nums.reduce((result, num) => result + num, 0);
}

add(1, 2, 3); // 6
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

나머지 매개변수는 매개변수의 값이 매번 바뀔 수가 있는 것이다. 점 3개를 사용하면 전달받은 파라미터를 배열로 나타낼 수가 있는 것이다. 그래서 타입은 number:[]으로 배열형태로 사용하면 된다.

this 사용법

다음은 this와 관련된 내용이다.

interface User {
    name: string;
}

const Sam: User = {name: 'Sam'};

function showName() {
    console.log(this.name);
}

const a = showName.bind(Sam);
a();

Sam의 name을 출력하는 데 Sam의 this는 bind를 이용해서 Sam 객체로 변환하고 있다. 실행은 잘 되지만 this의 타입이 any로 되어 있는 것을 알 수 있다.

this의 타입을 정할 때는 함수의 첫 번째 매개변수에 this를 쓰고 타입을 지정해주면 된다.

function showName(this:User) {
  ...
}

만일 매개변수가 있다면 어떻게 될까?

interface User {
    name: string;
}

const Sam: User = {name: 'Sam'};

function showName(age: number, gender: 'm'|'f') {
    console.log(this.name, age, gender);
}

const a = showName.bind(Sam);
a(30, 'm');

age와 gender가 있는 경우는 어떻게 해야 할까?

function showName(this:User, age: number, gender: 'm'|'f') {
    ...
}

첫 번째 매개변수에 this:User를 사용하면 된다.

조건에 따른 리턴타입 변경

다음은 name과 age를 받아서 age가 숫자이면 객체를 리턴하고 아니면 숫자를 입력하라는 문자를 반환하는 케이스이다.

interface User {
    name: string;
    age: number;
}

function join(name: string, age: number | string): User | string {
    if (typeof age === 'number') {
        return {
            age,
            name
        };
    } else {
        return '나이는 숫자로 입력해주세요';
    }
}

const sam: User = join("Sam", 30); // 오류
const jane: string = join("Jane", "30"); // 오류

이 함수는 전달받은 매개변수의 타입에 따라 리턴해주는 결과가 달라지는 것이다.
이럴 경우는 함수 오버로드를 사용해야 한다.

함수 위에 똑같은 모습으로 작성을 하면 된다.

function join(name: string, age: string): string;
function join(name: string, age: number): User;
function join(name: string, age: number | string): User | string {
    if (typeof age === 'number') {
        return {
            age,
            name
        };
    } else {
        return '나이는 숫자로 입력해주세요';
    }
}