Typescript(4) - 함수(2)

지난시간의 포스팅하던 Typescript의 함수에 대해서 더 알아보겠습니다.

rest parameter

js

function add(...nums) {
    return nums.reduce((result,num) => result + num, 0)
}

add(1,2,3);
add(1,2,3,4,5,6,7)

일반 js로 작성된 모든 매개변수를 더하는 함수입니다.
rest parameter를 이용해 모든 매개변수를 배열로 가져옵니다.

ts

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

add(1,2,3);
add(1,2,3,4,5,6,7)

Typescript로 변환한 함수입니다.
...nums 뒤에 : number[]로 타입을 지정해줍니다.
숫자로된 배열이라는 뜻입니다.

this

this와 관련된 내용입니다.

매개변수x

interface User{
    name: string;
}

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

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

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

interface로 User의 name의 타입을 string으로 고정합니다.
string이 아니라면 오류가 날 것입니다.

하지만
console.log(this.name)
에서 오류가 납니다.

this의 타입을 설정해주지 않아서 문제가 발생합니다.

interface User{
    name: string;
}

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

function showName(this:User){
    console.log(this.name)
}

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

this의 타입을 User라는 interface로 규정해주었습니다.

만약 매개변수가 존재한다면 어떻게 바꾸어야 할까요?

매개변수o

interface User{
    name: string;
}

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

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

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

이런식으로 매개변수가 존재할때 this에 똑같이 User타입을 걸어주면 됩니다.

예제

js

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

일반적인 js로 만들어진 함수입니다.
타입이 지정되지 않았기 때문에 오류를 일으킬 가능성이 있습니다.

ts

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

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

타입스크립트로 변경된 함수입니다.
name은 string으로 , age는 number혹은 string으로 받아옵니다.

이 함수의 if문에서 age가 number라면 name,age를 리턴하도록,
아니라면 string이기 때문에 "나이는 숫자로 입력해주세요." 가 반환됩니다.

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

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

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

const sam, const jane이 오류가 생길것입니다.

왜냐하면 매개변수의 타입에 따라 다르기때문에
오버로딩을 사용해야합니다.

오버로딩이 뭔가요?

TypeScript에서 오버로딩(Overloading)은 동일한 함수 이름을 사용하여 다양한 매개변수 조합에 대해 다른 동작을 정의하는 기능을 말합니다. 오버로딩을 사용하면 함수의 다양한 시그니처를 정의할 수 있으며, 호출될 때 TypeScript 컴파일러는 주어진 인수에 가장 잘 맞는 시그니처를 선택합니다.

즉, 매개변수의 타입이 확실하지 않고 다른 경우의 수가 존재한다면
오버로딩을 통해 모든 다른 동작에 대한 동작을 선언을 해주어야 합니다.

오버로딩 처리

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

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

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

이런방식으로 age가 number일때는 User를 반환
age가 string일때는 else문에있는 string을 반환하도록

오버로딩 처리를 해주시면 됩니다.

함수에 대한 포스팅을 마치고 다음 포스팅에서는 리터럴타입에 대해서 포스팅하겠습니다.