[TS] 7. 함수 타입 작성하기

함수 타입 작성하기

함수의 타입을 작성 해줄때는 화살표 함수와 유사하게 작성하고 리턴값의 타입을 끝에 적어주면 된다.

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

const sum = (a:number, b:number):number =>{
    return a+b
}//적용 전

함수에 타입을 적용하고 싶을때는 함수 이름 옆에다 적어주면 됨.

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

const sum:BinaryFn = (a, b) =>{
    return a+b
}//적용 후

다른 예제

type showMsgType = (msg: string) => void;

const showMsg:showMsgType= (msg) =>{
    alert(msg)
}

// 함수와 타입 인자의 이름을 모두 동일하게 주긴 했지만 타입에선 인자들의 순서대로 타입을 줄 뿐 이니 상관없다.

이걸 응용해서 함수에서 함수를 받을 때 타입 작성법을 알아보자.

예를 들어 첫번째 인자로 string을 받고 대문자로 바꾼뒤 두번째 인자로 함수 인자를 받고 첫번째 인자를
alert 하고 싶다고 가정해보자.

type showMsgType = (msg: string) => void;

const showMsg:showMsgType= (msg) =>{
    alert(msg)
}

const someFunc = (msg:string, showMsg:showMsgType) =>{
    showMsg(msg.toUpperCase())
}

someFunc("hello",showMsg)

가독성을 위해서 타입을 따로 설정했지만
인자에 함수타입을 직접 넣어줘도 됨

type showMsgType = (msg: string) => void;

const showMsg:showMsgType= (msg) =>{
    alert(msg)
}

const someFunc = (msg:string, showMsg:(msg:string)=> void) =>{
    showMsg(msg.toUpperCase())
}// showMsg 타입을 직접 작성

someFunc("hello",showMsg)