JS 에서 TS 넘어가기 - 3 (함수)

이번 포스팅에서는 TS 에서 함수를 정의하는 방법에 대해 알아보도록 하겠습니다!

바로 시작하도록 하죠

어떻게 쓸까?

타입 스크립트에서는 모든 데이터에 타입을 정해줘야 합니다. 일반적인 변수 뿐만 아니라 파라미터, 객체 안의 데이트에도 각각 넣어줘야합니다.

물론 함수 에도 적용해 줘야합니다. 함수에서 흔히 데이터는 어떤 것이 있을까요? C,C++ 을 생각하면 파라미터 뿐만 아니라 반환형태 에도 타입을 정해줘야함이 자연스럽습니다. 아래의 포멧 처럼요 👇

function add (x : type , y : type) : type 
{...}

여기서 반환형의 타입은 파라미터 뒤에 붙여주도록 합니다.

그러면 이전의 예제를 반환형까지 완벽하게 적어준다면,

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

//bool 반환
function is(age:number ) : boolean {
	return age > 19
}

그리고 또한 인터페이스 처럼 함수의 파라미터도 옵셔널 하게 지정이 가능합니다!

function hello (name:string ) : string {
	return `Hello, ${name || "world "} `
} // 에러 : 무조건 name 이 들어와야 한다고 생각하기 떄문.

function hello (name?:string ) : string{
	return `Hello, ${name || "world "} `
} // 성공

🙋 JS 에서 디폴트 값 사용도 가능한가요?

🤖 쌉가능입니다.

function hello (name = "world" ): string {
	return `Hello, ${name} `
} // 성공

⚠️ 그러나 선택적 매개변수를 사용할 때 주의점이 있습니다!

function hello (name?:string , age : number ) : string{
	return `Hello, ${name} . you are ${age}`
} // error

function hello (name:string , age ?: number ) : string{
	return `Hello, ${name} . you are ${age}`
} // ok

선택적 매개변수가 필수 매개변수 보다 앞에오면 에러가 발생함!

🙋 아 근데 저는 name도 앞에 놔두고 싶고 선택적 매개변수로도 만들고 싶어요 가능한가요??

🤖 쌉가능입니다.

function hello (name:string | undefiend , age : number ) : string{
	return `Hello, ${name} . you are ${age}`
} // ok

hello(undefined , 30)

매개 변수의 타입들

1. Rest 매개변수 (= 배열형태 타입)

function add(...nums : number[]) {
	return nums.reduce(() .....)
}

add(1,2,3,4)
add(1,2,3,4,5,5,2,1,3)

2. this의 타입 정하기

interface User {
	name : string;
}

// 매개변수 없는 경우
function showName(this:User) {
 console.log(this.name) 
 
}


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

const a = showName.bind(Sam); // this 를 Sam 객체로 강제함.
a()

🙋 만약 매개변수를 받은 상태에서는 어떻게 this type을 정해주나요?

🤖 맨앞에 적어줍니다

interface User {
	name : string;
}

// 매개변수 있는 경우
function showName(this:User , a: number , gender : 'm'|'f') {
//전달된 매개 변수는 2번째 부터 적용.
 console.log(this.name) 
 
}


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

const a = showName.bind(Sam); // this 를 Sam 객체로 강제함.
a(30,'m')

3. 함수 리턴 타입이 경우에 따라 다를 경우

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

function joid (name :strinf , age : number | string ) : User | string {
	if (typeof age == "number"){
    	return {name,age}
    }
    else{
    	return "숫자로 입력하셈"
    }
}


const sam : User = join ("Sam" ,30 ) // error
const sam2 : string = join ("Sam" ,"30" ) // error

이 경우 sam , sam2는 각각 리턴 받는 타입에 대해 확신이 없는 경우이기 때문에 에러가 도출 되게 됩니다.

이럴땐 함수 오버로딩을 사용해 해결이 가능합니다.

잘못된 것을 받을까봐 걱정인 고객에게 확신을 주는 서류를 작성해서 줍니다 😊

....
function joid (name :strinf , age : number ) : User;
function joid (name :strinf , age : string ) : string;
function joid (name :strinf , age : number | string ) : User | string {
	if (typeof age == "number"){
    	return {name,age}
    }
    else{
    	return "숫자로 입력하셈"
    }
}
const sam : User = join ("Sam" ,30 ) // ok
const sam2 : string = join ("Sam" ,"30" ) // ok

이렇게 매개변수의 타입이나 개수에 따라 다르게 리턴을 해야한다면 오버로드를 사용해 리턴을 해줍니다.